Bootstrap snippet: user profile cover with links

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



<div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-sx-12"> <div class="current-profile"> <div class="user-bg" style="background: url(http://lorempixel.com/1100/300/nature/5/) no-repeat;"></div> <div class="user-pic" style="background: url(http://bootdey.com/img/Content/user_3.jpg) no-repeat">&nbsp;</div> <div class="user-details"> <h4 class="user-name">Camilo<i>!</i></h4> <h5 class="description">Hi, I'm UI Designer from Canada. I like to design web and mobile applications that look good and work well.</h5> <br> </div> <div class="social-list"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3 center-align-text"> <h3>2359</h3> <small>Posts</small> </div> <div class="col-md-3 col-sm-3 col-xs-3 center-align-text"> <h3>1278</h3> <small>Followers</small> </div> <div class="col-md-3 col-sm-3 col-xs-3 center-align-text"> <h3>7315</h3> <small>Likes</small> </div> <div class="col-md-3 col-sm-3 col-xs-3 center-align-text"> <h3>189</h3> <small>Contacts</small> </div> </div> </div> </div> </div> </div> </div> </div> </div>
body{margin-top:20px; background:#eee; } .current-profile .user-bg { background-position: bottom center; height: 280px; position: relative; } .current-profile .user-pic { background-position: center center !important; background-size:cover !important; height: 120px; width: 120px; position: absolute; left: 0; right: 0; margin: 0px auto; top: 20px; border: 5px solid #fff; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .current-profile .user-details { position: absolute; top: 150px; text-align: center; margin: auto; left: 10px; right: 10px; } .current-profile h4.user-name { color: white; text-align: center; margin: 0; padding: 0; } .current-profile h5.description { color: white; margin: 10px 0 0 0; text-align: center; font-weight: 100; line-height: 21px; } .current-profile .social-list { margin: 0; position: absolute; bottom: 25px; left: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.3); padding: 6px 0; border-top: 1px solid rgba(0, 0, 0, 0.2); } .current-profile .social-list h3 { color: white; padding: 0; margin: 7px 0 0 0; } .current-profile .social-list small { color: white; } @media (max-width: 767px) { .current-profile .user-bg { height: 260px; } .current-profile .user-pic { height: 72px; width: 72px; } .current-profile .user-details { position: absolute; top: 100px; } .current-profile .social-list { position: absolute; bottom: 0; } .current-profile .social-list h3 { font-size: 16px; } }
Dey-Dey

user profile cover with links

Dey-Dey
  Apr 25th, 00:26
1.7K Views