Bootstrap snippet: Profile widget

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,widget



<div class="container bootstrap snippet"> <div class="col-md-8"> <div class="panel panel-white profile-widget panel-shadow"> <div class="row"> <div class="col-sm-12"> <div class="image-container bg2"> <img src="http://bootdey.com/img/Content/user_3.jpg" class="avatar" alt="avatar"> </div> </div> <div class="col-sm-12"> <div class="details"> <h4>Barbao's slim <i class="fa fa-sheild"></i></h4> <div>Works at bootdey</div> <div>Attended University of colombia</div> <div>Lives in medellin, colombia</div> <div class="mg-top-10"> <a href="#" class="btn btn-info">About Barbao's</a> <a href="#" class="btn btn-success">Follow</a> </div> </div> </div> </div> </div> </div> </div>
.panel-shadow { box-shadow: rgba(0, 0, 0, 0.3) 7px 7px 7px; } .panel-white { border: 1px solid #dddddd; } .panel { font-size: 13px; color: #454545; background: #fafafa; position: relative; overflow-x: hidden; font-family: 'Source Sans Pro', 'Oxygen', sans-serif; } .panel-white .panel-heading { color: #333; background-color: #fff; border-color: #ddd; } .panel-white .panel-footer { background-color: #fff; border-color: #ddd; } .bg2 { background-image: url('http://lorempixel.com/560/344/sports/1/'); } .profile-widget { position: relative; } .profile-widget .image-container { background-size: cover; background-position: center; padding: 190px 0 10px; } .profile-widget .image-container .profile-background { width: 100%; height: auto; } .profile-widget .image-container .avatar { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto -60px; display: block; } .profile-widget .details { padding: 50px 15px 15px; text-align: center; }
Dey-Dey

Profile widget

Dey-Dey
  Sep 4th 2014, 13:56
4.5K Views