Foundation zurb snippet: Meet our team with animation effect

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: images,team



<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css" /> <div class="team-section"> <div class="row"> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> </div> <div class="row"> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> <div class="large-3 columns text-center wow bounceIn animated"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> <h3>John doe</h3> <p> Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus. </p> </div> </div> </div>
body{ margin-top:20px; } .team-section{ padding: 100px 0; background-color: #eee; } .team-section img{ margin-bottom: 15px; border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 2px 1px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 2px 1px 3px rgba(0,0,0,0.3); } .team-section h3{ font-size: 15px; color:#000; font-weight:bold; } .team-section p{ margin-bottom: 25px; }
Dey-Dey

Meet our team with animation effect

Dey-Dey
  May 15th, 20:58
65 Views