Bootstrap snippet: Profile cover

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



<div class="container bootstrap snippet"> <div class="col-md-10"> <div class="profile-display"> <div class="profile-cover"></div> <div class="author-info"> <div class="author-info-img" > </div> <div class="author-meta"> <h2 class="author-username"> Deyson </h2> </div> </div> </div> </div> </div>
.profile-cover { background-image: url(http://bootdey.com/img/Content/bg_element.jpg); } .author-info-img { background-image: url(http://bootdey.com/img/Content/user_6.jpg); } .profile-display { width: 100%; position: relative; box-shadow: 0 1px 12px rgba(0,0,0,0.1); height: 340px; background-color: #fff; } .profile-cover { height: 210px; position: absolute; top: 0px; right: 0px; left: 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; } .author-info { background-color: #f5f5f5; padding: 10px; position: absolute; top: 40px; left: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); width: 240px; } .author-info .author-info-img { width: 100%; height: 220px; width: 220px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; margin-bottom: 3px; position: relative; } .author-meta { display: inline-block; vertical-align: bottom; } .author-username { font-size: 26px; margin: 5px 0 0 0; }
Dey-Dey

Profile cover

Dey-Dey
  Aug 25th 2014, 08:44
3.1K Views