summary social networks

This bootstrap snippet called "summary social networks" 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: site,report,list,user,bootstrap,snippet,social,networks

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 rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<div class="container bootstrap snippet">
      <div class="header">
        <h3 class="text-muted prj-name">
            <img class="img-thumbnail"  src="https://bootdey.com/img/Content/user_1.jpg">
            Jhon Snader
        </h3>
      </div>
     <div class="jumbotron list-content">
         <div class="row social-resume">
            <div class="col-lg-6 col-sm-6">
                <section class="panel">
                    <div class="icon-content facebook">
                        <i class="fa fa-facebook"></i>
                    </div>
                    <div class="value">
                        <h1 class="count">3.000</h1>
                        <p>Friends</p>
                    </div>
                </section>
            </div>
            <div class="col-lg-6 col-sm-6">
                <section class="panel">
                    <div class="icon-content google-plus">
                        <i class="fa fa-google-plus"></i>
                    </div>
                    <div class="value">
                        <h1 class="count2">947</h1>
                        <p>Pleople</p>
                    </div>
                </section>
            </div>
            <div class="col-lg-6 col-sm-6">
                <section class="panel">
                    <div class="icon-content twitter">
                        <i class="fa fa-twitter"></i>
                    </div>
                    <div class="value">
                        <h1 class="count3">2.000</h1>
                        <p>Followers</p>
                    </div>
                </section>
            </div>
            <div class="col-lg-6 col-sm-6">
                <section class="panel">
                    <div class="icon-content youtube">
                        <i class="fa fa-youtube"></i>
                    </div>
                    <div class="value">
                        <h1 class="count4">25</h1>
                        <p>Videos</p>
                    </div>
                </section>
            </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

.jumbotron h1, .jumbotron .h1 {
    font-size: 25px;
}
.social-resume .facebook {
    background: #3b5998;
}

.social-resume .google-plus {
    background:#DD4B39;
}

.social-resume .twitter {
    background: #00acee;
}

.social-resume .youtube {
    background: #c4302b;
}
.social-resume .icon-content, .social-resume .value {
    display: inline-block;
    text-align: center;
}

.social-resume .value  {
    float: right;

}

.social-resume .value h1, .social-resume .value p  {
    margin: 0;
    padding: 0;
    color: #c6cad6;
}

.social-resume .value h1 {
    font-weight: 300;
}

.social-resume .icon-content i {
    color: #fff;
    font-size: 50px;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
        -ms-border-radius: 100%;
         -o-border-radius: 100%;
            border-radius: 100%;
    -webkit-border: 2px solid #fff;
       -moz-border: 2px solid #fff;
        -ms-border: 2px solid #fff;
         -o-border: 2px solid #fff;
            border: 2px solid #fff;
    width: 85px;
    height: 85px;
    padding-top: 17px;
    box-shadow:3px 3px 3px #000000;
}

.social-resume .icon-content {
    width: 40%;
    padding: 25px 15px;
    -webkit-border-radius: 4px 0px 0px 4px;
       -moz-border-radius: 4px 0px 0px 4px;
        -ms-border-radius: 4px 0px 0px 4px;
         -o-border-radius: 4px 0px 0px 4px;
            border-radius: 4px 0px 0px 4px;
}

.social-resume .value {
    width: 58%;
    padding-top: 31px;
}

.social-resume section.panel{
    border: none;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 28th 2014, 21:06

Views: 3.0K

Rated 5/5 based on 1 reviews