Foundation zurb snippet: Blog cards

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



<div class="row"> <div class="columns small-12 medium-4 "> <div class="cta-box"> <a href="#"> <div class="cta-image"> <img src="http://lorempixel.com/200/140/nature/5/" alt="Regional Satellite Map"> </div> <h3>Regional Satellite</h3> </a> </div> </div> <div class="columns small-12 medium-4 "> <div class="cta-box"> <a href="#"> <div class="cta-image"> <img src="http://lorempixel.com/200/140/sports/1/" alt="Personal Weather Stations"> </div> <h3>Personal Weather Stations</h3> </a> </div> </div> <div class="columns small-12 medium-4 "> <div class="cta-box"> <a href="#"> <div class="cta-image"> <img src="http://lorempixel.com/200/140/nature/4/" alt="Global Temperature Map"> </div> <h3>Global Temperatures</h3> </a> </div> </div> </div> <div class="row"> <div class="columns small-12 medium-4 "> <div class="cta-box"> <a href="#"> <div class="cta-image"> <img src="http://lorempixel.com/200/140/nature/2/" alt="Regional Satellite Map"> </div> <h3>Regional Satellite</h3> </a> </div> </div> <div class="columns small-12 medium-4 "> <div class="cta-box"> <a href="#"> <div class="cta-image"> <img src="http://lorempixel.com/200/140/nature/3/" alt="Personal Weather Stations"> </div> <h3>Personal Weather Stations</h3> </a> </div> </div> <div class="columns small-12 medium-4 "> <div class="cta-box"> <a href="#"> <div class="cta-image"> <img src="http://lorempixel.com/200/140/nature/4/" alt="Global Temperature Map"> </div> <h3>Global Temperatures</h3> </a> </div> </div> </div>
body{ margin-top:50px; } body{margin-top:20px;} .cta-box { box-shadow: 0 3px 2px #D7D7D7; background-color: #F7F7F7; padding-bottom: 10px; margin-bottom: 20px; } .cta-box .cta-image { position: relative; overflow: hidden; } .cta-box .cta-image img { width: 100%; } .cta-box h3 { font-weight: bold; color: #333333; margin: 15px 20px 0 20px; } @media only screen and (min-width: 40.063em) { .cta-box h3 { font-size: 16px; } }
Dey-Dey

Blog cards

Dey-Dey
  May 13th, 19:09
52 Views