Foundation zurb snippet: blog card

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: cards,blog



<div class="row text-center"> <div class="large-4 columns"> <div class="row"> <div class="large-10 columns wrapper-default wrapper-xs wrapper-shadow no-gutter"> <img src="http://templatedeck.com/demos/poncho1021/img/image-19-sm.jpg" class="pull-top img-responsive" alt="image"> <img src="http://templatedeck.com/demos/poncho1021/img/testimonial6.jpg" class="img-circle pull-top" width="80" alt="image"> <div class="row"> <div class="large-12"> <h5>Dolor sit amet</h5> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. </p> <a href="#" class="button">Read more...</a> </div> </div> </div> </div> </div> <div class="large-4 columns"> <div class="row"> <div class="large-10 columns col-md-offset-1 wrapper-default wrapper-xs wrapper-shadow no-gutter"> <img src="http://templatedeck.com/demos/poncho1021/img/image-20-sm.jpg" class="pull-top img-responsive" alt="image"> <img src="http://templatedeck.com/demos/poncho1021/img/testimonial1.jpg" class="img-circle pull-top" width="80" alt="image"> <div class="row"> <div class="large-12"> <h5>Dolor sit amet</h5> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. </p> <a href="#" class="button">Read more...</a> </div> </div> </div> </div> </div> <div class="large-4 columns"> <div class="row"> <div class="large-10 columns col-md-offset-2 wrapper-default wrapper-xs wrapper-shadow no-gutter"> <img src="http://templatedeck.com/demos/poncho1021/img/image-21-sm.jpg" class="pull-top img-responsive" alt="image"> <img src="http://templatedeck.com/demos/poncho1021/img/testimonial7.jpg" class="img-circle pull-top" width="80" alt="image"> <div class="row"> <div class="large-12"> <h5>Dolor sit amet</h5> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. </p> <a href="#" class="button">Read more...</a> </div> </div> </div> </div> </div> </div>
body{margin-top:20px;} .no-gutter { padding-left: 0; padding-right: 0; } .wrapper-shadow { box-shadow: 200px 200px 200px rgba(0, 0, 0, 0.2); } .wrapper-default { background-color: #fff; color: #303030; } .wrapper-xs { padding-top: 40px; padding-bottom: 40px; } .pull-top { margin-top: -40px; } .img-circle{ border-radius:50%; } .img-responsive { display: block; max-width: 100%; height: auto; } .text-center{ text-align:center; }
Dey-Dey

blog card

Dey-Dey
  May 13th, 19:10
81 Views