Bootstrap snippet: Social profile head

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,social,profile,head,facebook,html,page,twitter,social network

<div class="container bootstrap snippet"> <div class="cover-container"> <div class="social-cover"></div> <div class="social-desc"> <div class="visible-md visible-sm"> <h1 class="fg-white">Empire State, NY, USA</h1> <h5 class="fg-white">- Aug 20th, 2014</h5> <div style="margin-top:50px;"> </div> </div> </div> <div class="social-avatar" > <img class="img-avatar" src="" height="100" width="100"> <h4 class="fg-white text-center">Marting lowenyert</h4> <h5 class="fg-white text-center" style="opacity:0.8;">DevOps Engineer, NY</h5> <hr class="border-black75" style="border-width:2px;" > <div class="text-center"> <button role="button" class="btn btn-inverse btn-outlined btn-retainBg btn-brightblue" type="button"> <span>follow me</span> </button> </div> </div> </div> </div>
.social-cover{ position:absolute; left:0; right:0; top:0; bottom:0 ;background-color:rgba(0, 0, 0, 0.7); } .cover-container { height:350px; margin-top:-25px; background-image:url(; background-size:cover; position:relative; margin-bottom:25px; background-position:center } .btn-brightblue.btn-inverse.btn-outlined { color: #fff; border-color: #fff; } .border-black75 { border-color: #3F3F3B!important; } .btn-brightblue.btn-outlined { color: #003BFF; background: 0 0; } .social-avatar { top: 0; right: 0; bottom: 0; width: 300px; position: absolute; background: -webkit-linear-gradient(top,rgba(0,0,0,.3) 0,rgba(0,0,0,.5) 100%); background: linear-gradient(top,rgba(0,0,0,.3) 0,rgba(0,0,0,.5) 100%); } .img-avatar{ display:block; border-radius:100px; border:2px solid #fff; margin:auto; margin-top:50px; } .social-desc { top: 0; left: 0; bottom: 0; right: 300px; position: absolute; } .social-desc div { margin-left: 10%; margin-top: 100px; } .fg-focus-white:focus, .fg-hover-white:hover, .fg-white, .fg-white .tab-container.plain .nav-tabs a, .fg-white .fg-tab-active .tab-container .nav-tabs a, .fg-white .tab-container .nav-tabs .b-tab a { color: #fff; } .fg-white{ opacity:0.8; } .btn-orange75.btn-inverse.btn-outlined { color: #fff; border-color: #fff; } .btn-orange75.btn-outlined { color: #EE682F; background: 0 0; } .btn.btn-rounded { line-height: 1; border-radius: 100px; height: auto!important; padding: 15px!important; } .btn>.rubix-icon { line-height: 1; font-size: 18px; } .social-like-count { cursor: pointer; display: inline-block; } .social-like-count>span { margin-left: 25px; }

Social profile head

  Feb 23rd 2015, 09:22