Social profile head

This bootstrap snippet called "Social profile head" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: bootstrap,snippet,social,profile,head,facebook,html,page,twitter,social network

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<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="https://bootdey.com/img/Content/user-453533-fdadfd.png" 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>                    

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


.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(http://www.nuevayork.net/fotos/times-square.jpg);
    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 .b-tab.active a, 
.fg-white .fg-tab-active .tab-container .nav-tabs .b-tab.active 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;
}                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Jan 12th 2015, 18:52

Views: 4.3K

Rated 5/5 based on 1 reviews