Bootstrap snippet: event blocks

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: event,blocks



<div class="row"> <div class="col-md-6"> <!-- START widget--> <div class="panel widget"> <div class="row row-table row-flush"> <div class="col-xs-5"> <picture class="lateral-picture"> <img src="http://lorempixel.com/400/400/technics/7/" alt=""> </picture> </div> <div class="col-xs-7 align-middle p-lg"> <div class="pull-right"><a href="#" class="btn btn-primary btn-sm">Register</a> </div> <p> <span class="text-lg">16</span>Aug</p> <p> <strong>EVENT INVITATION</strong> </p> <p>Donec posuere neque in elit luctus tempor consequat enim egestas. Nulla dictum egestas leo at lobortis.</p> </div> </div> </div> <!-- END widget--> </div> <div class="col-md-6"> <!-- START widget--> <div class="panel widget"> <div class="row row-table row-flush"> <div class="col-xs-5"> <picture class="lateral-picture"> <img src="http://lorempixel.com/400/400/technics/1/" alt=""> </picture> </div> <div class="col-xs-7 align-middle p-lg"> <div class="pull-right"><a href="#" class="btn btn-primary btn-sm">Register</a> </div> <p> <span class="text-lg">16</span>Aug</p> <p> <strong>EVENT INVITATION</strong> </p> <p>Donec posuere neque in elit luctus tempor consequat enim egestas. Nulla dictum egestas leo at lobortis.</p> </div> </div> </div> <!-- END widget--> </div> </div>
body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.52857143; color: #515253; background-color: #f5f7fa; margin-top:20px; } .widget .panel, .widget.panel { overflow: hidden; } .widget { margin-bottom: 20px; border: 0; } .row-table { display: table; table-layout: fixed; height: 100%; width: 100%; margin: 0; } .row-flush>[class*=col-] { padding-left: 0; padding-right: 0; } .row-table>[class*=col-] { display: table-cell; float: none; table-layout: fixed; vertical-align: middle; } .widget .lateral-picture { position: relative; display: block; height: 240px; width: auto; overflow: hidden; } .widget .lateral-picture>img { position: absolute; top: 0; left: 0; max-height: 100%; width: auto; } .align-middle { vertical-align: middle; } .p-lg { padding: 15px!important; } .btn { border-radius: 3px; font-size: 13px; border-color: transparent; -webkit-appearance: none; outline: 0!important; -webkit-transition: all .1s; -o-transition: all .1s; transition: all .1s; }
Dey-Dey

event blocks

Dey-Dey
  Jun 22nd 2015, 08:49
2.5K Views