Bootstrap snippet: simple user profile presentation social

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: simple,user,profile presentation,social

<link href="//" rel="stylesheet"> <div class="container profile"> <div class="row"> <div class="col-md-12"> <div class="well well-small clearfix"> <div class="row"> <div class="col-md-2"> <img src="" class="img-polaroid"/> </div> <div class="col-md-4"> <h2>Dey-Dey name</h2> <ul class="list-unstyled"> <li><i class="icon-phone"></i> 916-241-3613</li> <li><i class="icon-envelope"></i></li> <li><i class="icon-globe"></i></li> </ul> </div> <div class="col-md-6"> <ul class="list-inline stats"> <li> <span>275</span> Friends </li> <li> <span>354</span> Followers </li> <li> <span>186</span> Photos </li> </ul> <div><!--/span6--> </div><!--/row--> </div> <!--Body content--> </div> </div> <div class="well clearfix"> <b>Aplication name</b> </div> </div>
body{margin-top:20px;} body{ padding-top:25px !important; } .stats { text-align:center; text-shadow:1px 1px 0px #fff; margin-top:25px; } .stats li{ width:125px; } .stats span{ font-family:Helvetica; font-weight:bold; text-shadow:1px 1px 0px #fff; font-size:4em; display:block; line-height:1em; } /* Large desktop */ @media (min-width: 1200px) { } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { .profile img{ width:75px; } .profile h2{ font-size:1.7em; } .stats span{ font-size: 2em; } } /* Landscape phones and down */ @media (max-width: 480px) { }

simple user profile presentation social

  May 6th 2014, 23:08