Bootstrap snippet: profile with left 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: user,profile,cover,social network



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-3"> <div class="panel rounded shadow"> <div class="panel-body"> <div class="inner-all"> <ul class="list-unstyled"> <li class="text-center"> <img class="img-circle img-bordered-primary" src="http://bootdey.com/img/Content/user_3.jpg" alt="Marint month"> </li> <li class="text-center"> <h4 class="text-capitalize">Marint month</h4> <p class="text-muted text-capitalize">web designer</p> </li> <li> <a href="" class="btn btn-success text-center btn-block">PRO Account</a> </li> <li><br></li> <li> <div class="btn-group-vertical btn-block"> <a href="" class="btn btn-default"><i class="fa fa-cog pull-right"></i>Edit Account</a> <a href="" class="btn btn-default"><i class="fa fa-sign-out pull-right"></i>Logout</a> </div> </li> </ul> </div> </div> </div> </div> <div class="col-md-9"> <div class="panel cover rounded shadow no-overflow"> <div class="panel-body"> <div class="inner-cover"> <img src="http://lorempixel.com/600/150/nature/5/" class="img-responsive full-width" alt="cover"> </div> </div> </div> <div class="panel cover rounded shadow no-overflow" style="height:200px;"> <div class="panel-body"> content!! </div> </div> </div> </div> </div>
body{ background:#eee; margin-top:20px; } .shadow { -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) !important; } .rounded { -webkit-border-radius: 3px !important; -moz-border-radius: 3px !important; border-radius: 3px !important; } .panel { border: none; position: relative; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .btn{ border-radius:0px; } .profile-cover { width: 100%; } .profile-cover .cover { position: relative; border: 10px solid #FFF; background:#fff; } .profile-cover .cover .inner-cover { overflow: hidden; height: auto; } .profile-cover .cover .inner-cover .cover-menu-mobile { position: absolute; top: 10px; right: 10px; } .full-width { top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; }
Dey-Dey

profile with left cover

Dey-Dey
  Nov 9th 2015, 09:55
2.2K Views