Foundation zurb snippet: Blog post widget

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



<div class="row"> <div class="large-6 columns"> <div class="widget widget-blog"> <div class="widget-blog-cover"> <img src="http://lorempixel.com/400/200/sports/1/" alt=""> </div> <div class="widget-blog-author"> <div class="widget-blog-author-image"> <img src="http://bootdey.com/img/Content/user_1.jpg" alt=""> </div> <div class="widget-blog-author-info"> <h5 class="m-t-0 m-b-1">Serhiy Navin</h5> <p class="text-muted m-0 f-s-11">Front End Designer</p> </div> </div> <div class="widget-blog-content"> <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5> <p> Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi. </p> </div> </div> </div> <div class="large-6 columns"> <div class="widget widget-blog"> <div class="widget-blog-cover"> <img src="http://lorempixel.com/400/200/nature/2/" alt=""> </div> <div class="widget-blog-author"> <div class="widget-blog-author-image"> <img src="http://bootdey.com/img/Content/user_2.jpg" alt=""> </div> <div class="widget-blog-author-info"> <h5 class="m-t-0 m-b-1">Serhiy Navin</h5> <p class="text-muted m-0 f-s-11">Front End Designer</p> </div> </div> <div class="widget-blog-content"> <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5> <p> Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi. </p> </div> </div> </div> <div class="large-6 columns"> <div class="widget widget-blog"> <div class="widget-blog-cover"> <img src="http://lorempixel.com/400/200/business/2/" alt=""> </div> <div class="widget-blog-author"> <div class="widget-blog-author-image"> <img src="http://bootdey.com/img/Content/user_3.jpg" alt=""> </div> <div class="widget-blog-author-info"> <h5 class="m-t-0 m-b-1">Serhiy Navin</h5> <p class="text-muted m-0 f-s-11">Front End Designer</p> </div> </div> <div class="widget-blog-content"> <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5> <p> Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi. </p> </div> </div> </div> <div class="large-6 columns"> <div class="widget widget-blog"> <div class="widget-blog-cover"> <img src="http://lorempixel.com/400/200/technics/7/" alt=""> </div> <div class="widget-blog-author"> <div class="widget-blog-author-image"> <img src="http://bootdey.com/img/Content/user_6.jpg" alt=""> </div> <div class="widget-blog-author-info"> <h5 class="m-t-0 m-b-1">Serhiy Navin</h5> <p class="text-muted m-0 f-s-11">Front End Designer</p> </div> </div> <div class="widget-blog-content"> <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5> <p> Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi. </p> </div> </div> </div> </div>
body{ background:#eee; margin-top:20px; } .widget { border: none; box-shadow: 0 2px 0 rgba(0,0,0,.07); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 20px; position: relative; background: #fff; padding: 20px; display: block; } .widget-blog-cover { overflow: hidden; padding-top: 60%; } .widget-blog-cover, .widget-stat-header { position: relative; border-radius: 5px 5px 0 0; margin: -20px -20px 20px; } .animation-grow-hover, .widget-blog .widget-blog-cover img { transition: all .1s ease-in-out; } .widget-blog-cover img:hover{ max-width: 110%; min-height: 110%; margin-left: -5%; margin-top: -5%; } .widget-blog-cover img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; max-width: 100%; min-height: 100%; } .widget-blog-author { margin: -20px -20px 0; padding: 10px 20px; } .widget-blog-author-image { float: left; margin-top: -30px; padding: 5px; border-radius: 70px; width: 70px; height: 70px; background: #fff; position: relative; } .widget-blog-author-image img { max-width: 100%; border-radius: 70px; } .text-muted { color: #aab3ba; } .f-s-11 { font-size: 11px!important; } .m-0 { margin: 0!important; }
Dey-Dey

Blog post widget

Dey-Dey
  May 13th, 23:12
69 Views