Bootstrap snippet: blog post 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="container bootstrap snippet"> <div class="row"> <div class="col-md-4"> <div class="card card-favorite"> <div class="card-img-container"> <a href="#" style="background-image:url('http://lorempixel.com/400/200/sports/1/')" class="card-img"></a> </div> <div class="card-content"> <div class="card-meta"> <span class="meta-date meta-box"> Jan 11 </span> <span class="meta-pulse meta-box"> <a href="#" class="card-share-number sharrre">50 Shares</a> </span> </div> <h2> <a href="#"> Lorem ipsum dolor sit amet, consectetur </a> </h2> </div> <span class="meta-tags"> <a href="#" title="tags" class="tag">Php</a> </span> </div> </div> <div class="col-md-4"> <div class="card card-favorite"> <div class="card-img-container"> <a href="#" style="background-image:url('http://lorempixel.com/400/200/city/2/')" class="card-img"></a> </div> <div class="card-content"> <div class="card-meta"> <span class="meta-date meta-box"> Jul 16 </span> <span class="meta-pulse meta-box"> <a href="#" class="card-share-number sharrre">800 Shares</a> </span> </div> <h2> <a href="#"> Lorem ipsum dolor sit amet, consectetur </a> </h2> </div> <span class="meta-tags"> <a href="#" title="tags" class="tag">Html</a> </span> </div> </div> <div class="col-md-4"> <div class="card card-favorite"> <div class="card-img-container"> <a href="#" style="background-image:url('http://lorempixel.com/400/200/abstract/1/')" class="card-img"></a> </div> <div class="card-content"> <div class="card-meta"> <span class="meta-date meta-box"> Feb 18 </span> <span class="meta-pulse meta-box"> <a href="#" class="card-share-number sharrre">53 Shares</a> </span> </div> <h2> <a href="#"> Lorem ipsum dolor sit amet, consectetur </a> </h2> </div> <span class="meta-tags"> <a href="#" title="tags" class="tag">Css</a> </span> </div> </div> </div> </div>
body{margin-top:20px;} .card { min-width: 0; margin: 20px 10px; width: 100%; background: #0C0C0C; color: #696969; -webkit-transition: .3s ease all; transition: .3s ease all; border: none; border-radius: 5px; padding: 0; margin-bottom: 30px; } .card .card-img-container .card-img { background-size: cover; background-position: top center; display: block; height: 175px; } .card .card-img { height: 150px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .card .card-img-container { position: relative; overflow: hidden; width: 100%; } .card .card-content { padding: 20px 20px 40px; text-align: center; } .card .card-meta { font-size: 12px; } .card .meta-box { margin-right: 20px; } .card .card-content h2 { margin-top: 10px; margin-bottom: 0; font-size: 16px; line-height: 1.4; } .card h2 a { color: #D0D0D0; -webkit-transition: .3s ease all; transition: .3s ease all; } a:hover{ text-decoration:none; } .card:hover h2 a { color: #FFF; } .card .meta-tags a:hover { color: #FFF; } .card .meta-tags .tag { background: #DD1B16; color: #f9c7c6; } .card .meta-tags a:last-child { margin-right: 0; border-bottom-right-radius: 5px; } .card .meta-tags a:first-child { border-top-left-radius: 5px; } .card .meta-tags a { display: inline-block; padding: 3px 8px; color: #FFF; -webkit-transition: .3s ease all; transition: .3s ease all; }
Dey-Dey

blog post cards

Dey-Dey
  Jun 26th 2015, 08:31
2.6K Views