Bootstrap snippet: Material design profile

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,user,social network,material design



<div class="container"> <div class="profile-page"> <div class="page-header header-filter" data-parallax="active" style="transform: translate3d(0px, 0px, 0px); background-image: url(http://bootdey.com/img/login/3.png);"></div> <div class="main main-raised"> <div class="profile-content"> <div class="container"> <div class="row"> <div class="col-xs-6 col-xs-offset-3"> <div class="profile"> <div class="avatar"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="Circle Image" class="img-circle img-responsive img-raised"> </div> <div class="name"> <h3 class="title">John Smith Doe</h3> <h6>Designer man, boom! boom! baby</h6> <a href="#pablo" class="btn btn-just-icon btn-simple btn-dribbble"><i class="fa fa-dribbble"></i></a> <a href="#pablo" class="btn btn-just-icon btn-simple btn-twitter"><i class="fa fa-twitter"></i></a> <a href="#pablo" class="btn btn-just-icon btn-simple btn-pinterest"><i class="fa fa-pinterest"></i></a> </div> </div> </div> <div class="col-xs-2 follow"></div> </div> </div> </div> </div> </div> </div>
body{margin-top:20px;} .profile-page .page-header { height: 380px; background-position: top center; } .header-filter { position: relative; } .page-header { height: 100vh; background-position: center center; background-size: cover; margin: 0; padding: 0; border: 0; } .page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; } .main-raised { margin: -60px 30px 0px; border-radius: 6px; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } .main { background: #FFFFFF; position: relative; z-index: 3; } .profile-page .profile { text-align: center; } .profile-page .profile img { max-width: 160px; width: 100%; margin: 0 auto; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .img-raised { box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); }
Dey-Dey

Material design profile

Dey-Dey
  Oct 18th, 23:45
1.3K Views