Facebook like profile cover

This bootstrap snippet called "Facebook like profile cover" 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: facebook,profile,user,cover,network,social

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

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container bootstrap snippet">
    <div class="fb-profile">
        <img align="left" class="fb-image-lg" src="https://lorempixel.com/850/280/nightlife/5/" alt="Profile image example"/>
        <img align="left" class="fb-image-profile thumbnail" src="https://bootdey.com/img/Content/user-453533-fdadfd.png" alt="Profile image example"/>
        <div class="fb-profile-text">
            <h1>Deycknston Mackency</h1>
            <p>Rap music rules!</p>
        </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


body {
    font-family: 'Open Sans', sans-serif;
}

.fb-profile img.fb-image-lg{
    z-index: 0;
    width: 100%;  
    margin-bottom: 10px;
}

.fb-image-profile {
    margin: -90px 10px 0px 50px;
    z-index: 9;
    width: 20%; 
}

@media (max-width:768px) {
    
.fb-profile-text>h1{
    font-weight: 700;
    font-size:16px;
}

.fb-image-profile
{
    margin: -45px 10px 0px 25px;
    z-index: 9;
    width: 20%; 
}
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Mar 6th 2015, 22:48

Views: 1.6K