Bootstrap snippet: simple user cards contact info

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: html,css



<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-4"> <div class="widget lazur-bg p-xl"> <h2>Janet Smith</h2> <ul class="list-unstyled m-t-md"> <li> <span class="fa fa-envelope m-r-xs"></span> <label>Email:</label> mike@mail.com </li> <li> <span class="fa fa-home m-r-xs"></span> <label>Address:</label> Street 200, Avenue 10 </li> <li> <span class="fa fa-phone m-r-xs"></span> <label>Contact:</label> (+121) 678 3462 </li> </ul> </div> </div> <div class="col-md-4"> <div class="widget red-bg p-xl"> <h2>Deyson Bejarano</h2> <ul class="list-unstyled m-t-md"> <li> <span class="fa fa-envelope m-r-xs"></span> <label>Email:</label> deyson@mail.com </li> <li> <span class="fa fa-home m-r-xs"></span> <label>Address:</label> Street 200, Avenue 10 </li> <li> <span class="fa fa-phone m-r-xs"></span> <label>Contact:</label> (+121) 678 3462 </li> </ul> </div> </div> <div class="col-md-4"> <div class="widget navy-bg p-xl"> <h2>Briant Mckenly</h2> <ul class="list-unstyled m-t-md"> <li> <span class="fa fa-envelope m-r-xs"></span> <label>Email:</label> bmkenly@mail.com </li> <li> <span class="fa fa-home m-r-xs"></span> <label>Address:</label> Street 200, Avenue 10 </li> <li> <span class="fa fa-phone m-r-xs"></span> <label>Contact:</label> (+121) 678 3462 </li> </ul> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="widget yellow-bg p-xl"> <h2>Carlos simptho</h2> <ul class="list-unstyled m-t-md"> <li> <span class="fa fa-envelope m-r-xs"></span> <label>Email:</label> clossimp@mail.com </li> <li> <span class="fa fa-home m-r-xs"></span> <label>Address:</label> Street 200, Avenue 10 </li> <li> <span class="fa fa-phone m-r-xs"></span> <label>Contact:</label> (+121) 678 3462 </li> </ul> </div> </div> </div> </div>
body{margin-top:20px;} .p-xl { padding: 40px; } .lazur-bg { background-color: #23c6c8; color: #ffffff; } .red-bg { background-color: #ed5565; color: #ffffff; } .navy-bg { background-color: #1ab394; color: #ffffff; } .yellow-bg { background-color: #f8ac59; color: #ffffff; } .widget { border-radius: 5px; padding: 15px 20px; margin-bottom: 10px; margin-top: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); } .widget h2, .widget h3 { margin-top: 5px; margin-bottom: 0; border-bottom:1px dotted white; } .m-t-md { margin-top: 20px; }
Dey-Dey

simple user cards contact info

Dey-Dey
  Jan 5th, 08:22
1.8K Views