Bootstrap snippet: user profile cover like facebook

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: user,photo,profile,cover



<div class="col-md-8"> <div class="profile clearfix"> <div class="image"> <img src="http://lorempixel.com/700/300/nature/2/" class="img-cover"> </div> <div class="user clearfix"> <div class="avatar"> <img src="http://bootdey.com/img/Content/user-453533-fdadfd.png" class="img-thumbnail img-profile"> </div> <h2>Martin maoth</h2> <div class="actions"> <div class="btn-group"> <button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Add to friends"><span class="glyphicon glyphicon-plus glyphicon glyphicon-white"></span> Friends</button> <button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Send message"><span class="glyphicon glyphicon-envelope glyphicon glyphicon-white"></span> Message</button> <button class="btn btn-default btn-sm tip btn-responsive" title="" data-original-title="Recommend"><span class="glyphicon glyphicon-share-alt glyphicon glyphicon-white"></span> Recommend</button> </div> </div> </div> <div class="info"> <p><span class="glyphicon glyphicon-globe"></span> <span class="title">Address:</span> St. Revutskogo, Kiev, Ukraine</p> <p><span class="glyphicon glyphicon-gift"></span> <span class="title">Date of birth:</span> 14.02.1989</p> </div> </div> </div>
body{margin-top:20px;} .profile { width: 100%; position: relative; background: #FFF; border: 1px solid #D5D5D5; padding-bottom: 5px; margin-bottom: 20px; } .profile .image { display: block; position: relative; z-index: 1; overflow: hidden; text-align: center; border: 5px solid #FFF; } .profile .user { position: relative; padding: 0px 5px 5px; } .profile .user .avatar { position: absolute; left: 20px; top: -85px; z-index: 2; } .profile .user h2 { font-size: 16px; line-height: 20px; display: block; float: left; margin: 4px 0px 0px 135px; font-weight: bold; } .profile .user .actions { float: right; } .profile .user .actions .btn { margin-bottom: 0px; } .profile .info { float: left; margin-left: 20px; } .img-profile{ height:100px; width:100px; } .img-cover{ width:800px; height:300px; } @media (max-width: 768px) { .btn-responsive { padding:2px 4px; font-size:80%; line-height: 1; border-radius:3px; } } @media (min-width: 769px) and (max-width: 992px) { .btn-responsive { padding:4px 9px; font-size:90%; line-height: 1.2; } }
Dey-Dey

user profile cover like facebook

Dey-Dey
  Jul 1st 2015, 08:20
4.8K Views