ui-social-buttons.html

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sufee Admin - HTML5 Admin Template</title>
    <meta name="description" content="Sufee Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-icon.png">
    <link rel="shortcut icon" href="favicon.ico">

    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/flag-icon.min.css">
    <link rel="stylesheet" href="assets/css/cs-skin-elastic.css">
    <!-- <link rel="stylesheet" href="assets/css/bootstrap-select.less"> -->
    <link rel="stylesheet" href="assets/scss/style.css">
    <link rel="stylesheet" href="assets/scss/socials.css">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>

    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->

</head>
<body>
        <!-- Left Panel -->

    <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default">

            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="./"><img src="images/logo.png" alt="Logo"></a>
                <a class="navbar-brand hidden" href="./"><img src="images/logo2.png" alt="Logo"></a>
            </div>

            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.html"> <i class="menu-icon fa fa-dashboard"></i>Dashboard </a>
                    </li>
                    <h3 class="menu-title">UI elements</h3><!-- /.menu-title -->
                    <li class="menu-item-has-children active dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-laptop"></i>Components</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-puzzle-piece"></i><a href="ui-buttons.html">Buttons</a></li>
                            <li><i class="fa fa-id-badge"></i><a href="ui-badges.html">Badges</a></li>
                            <li><i class="fa fa-bars"></i><a href="ui-tabs.html">Tabs</a></li>
                            <li><i class="fa fa-share-square-o"></i><a href="ui-social-buttons.html">Social Buttons</a></li>
                            <li><i class="fa fa-id-card-o"></i><a href="ui-cards.html">Cards</a></li>
                            <li><i class="fa fa-exclamation-triangle"></i><a href="ui-alerts.html">Alerts</a></li>
                            <li><i class="fa fa-spinner"></i><a href="ui-progressbar.html">Progress Bars</a></li>
                            <li><i class="fa fa-fire"></i><a href="ui-modals.html">Modals</a></li>
                            <li><i class="fa fa-book"></i><a href="ui-switches.html">Switches</a></li>
                            <li><i class="fa fa-th"></i><a href="ui-grids.html">Grids</a></li>
                            <li><i class="fa fa-file-word-o"></i><a href="ui-typgraphy.html">Typography</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-table"></i>Tables</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-table"></i><a href="tables-basic.html">Basic Table</a></li>
                            <li><i class="fa fa-table"></i><a href="tables-data.html">Data Table</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-th"></i>Forms</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-th"></i><a href="forms-basic.html">Basic Form</a></li>
                            <li><i class="menu-icon fa fa-th"></i><a href="forms-advanced.html">Advanced Form</a></li>
                        </ul>
                    </li>

                    <h3 class="menu-title">Icons</h3><!-- /.menu-title -->

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-tasks"></i>Icons</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-fort-awesome"></i><a href="font-fontawesome.html">Font Awesome</a></li>
                            <li><i class="menu-icon ti-themify-logo"></i><a href="font-themify.html">Themefy Icons</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="widgets.html"> <i class="menu-icon ti-email"></i>Widgets </a>
                    </li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-bar-chart"></i>Charts</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-line-chart"></i><a href="charts-chartjs.html">Chart JS</a></li>
                            <li><i class="menu-icon fa fa-area-chart"></i><a href="charts-flot.html">Flot Chart</a></li>
                            <li><i class="menu-icon fa fa-pie-chart"></i><a href="charts-peity.html">Peity Chart</a></li>
                        </ul>
                    </li>

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-area-chart"></i>Maps</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-map-o"></i><a href="maps-gmap.html">Google Maps</a></li>
                            <li><i class="menu-icon fa fa-street-view"></i><a href="maps-vector.html">Vector Maps</a></li>
                        </ul>
                    </li>
                    <h3 class="menu-title">Extras</h3><!-- /.menu-title -->
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-glass"></i>Pages</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-sign-in"></i><a href="page-login.html">Login</a></li>
                            <li><i class="menu-icon fa fa-sign-in"></i><a href="page-register.html">Register</a></li>
                            <li><i class="menu-icon fa fa-paper-plane"></i><a href="pages-forget.html">Forget Pass</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </aside><!-- /#left-panel -->

    <!-- Left Panel -->

    <!-- Right Panel -->

    <div id="right-panel" class="right-panel">

        <!-- Header-->
        <header id="header" class="header">

            <div class="header-menu">

                <div class="col-sm-7">
                    <a id="menuToggle" class="menutoggle pull-left"><i class="fa fa fa-tasks"></i></a>
                    <div class="header-left">
                        <button class="search-trigger"><i class="fa fa-search"></i></button>
                        <div class="form-inline">
                            <form class="search-form">
                                <input class="form-control mr-sm-2" type="text" placeholder="Search ..." aria-label="Search">
                                <button class="search-close" type="submit"><i class="fa fa-close"></i></button>
                            </form>
                        </div>

                        <div class="dropdown for-notification">
                          <button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-bell"></i>
                            <span class="count bg-danger">5</span>
                          </button>
                          <div class="dropdown-menu" aria-labelledby="notification">
                            <p class="red">You have 3 Notification</p>
                            <a class="dropdown-item media bg-flat-color-1" href="#">
                                <i class="fa fa-check"></i>
                                <p>Server #1 overloaded.</p>
                            </a>
                            <a class="dropdown-item media bg-flat-color-4" href="#">
                                <i class="fa fa-info"></i>
                                <p>Server #2 overloaded.</p>
                            </a>
                            <a class="dropdown-item media bg-flat-color-5" href="#">
                                <i class="fa fa-warning"></i>
                                <p>Server #3 overloaded.</p>
                            </a>
                          </div>
                        </div>

                        <div class="dropdown for-message">
                          <button class="btn btn-secondary dropdown-toggle" type="button"
                                id="message"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="ti-email"></i>
                            <span class="count bg-primary">9</span>
                          </button>
                          <div class="dropdown-menu" aria-labelledby="message">
                            <p class="red">You have 4 Mails</p>
                            <a class="dropdown-item media bg-flat-color-1" href="#">
                                <span class="photo media-left"><img alt="avatar" src="images/avatar/1.jpg"></span>
                                <span class="message media-body">
                                    <span class="name float-left">Jonathan Smith</span>
                                    <span class="time float-right">Just now</span>
                                        <p>Hello, this is an example msg</p>
                                </span>
                            </a>
                            <a class="dropdown-item media bg-flat-color-4" href="#">
                                <span class="photo media-left"><img alt="avatar" src="images/avatar/2.jpg"></span>
                                <span class="message media-body">
                                    <span class="name float-left">Jack Sanders</span>
                                    <span class="time float-right">5 minutes ago</span>
                                        <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </span>
                            </a>
                            <a class="dropdown-item media bg-flat-color-5" href="#">
                                <span class="photo media-left"><img alt="avatar" src="images/avatar/3.jpg"></span>
                                <span class="message media-body">
                                    <span class="name float-left">Cheryl Wheeler</span>
                                    <span class="time float-right">10 minutes ago</span>
                                        <p>Hello, this is an example msg</p>
                                </span>
                            </a>
                            <a class="dropdown-item media bg-flat-color-3" href="#">
                                <span class="photo media-left"><img alt="avatar" src="images/avatar/4.jpg"></span>
                                <span class="message media-body">
                                    <span class="name float-left">Rachel Santos</span>
                                    <span class="time float-right">15 minutes ago</span>
                                        <p>Lorem ipsum dolor sit amet, consectetur</p>
                                </span>
                            </a>
                          </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-5">
                    <div class="user-area dropdown float-right">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img class="user-avatar rounded-circle" src="images/admin.jpg" alt="User Avatar">
                        </a>

                        <div class="user-menu dropdown-menu">
                                <a class="nav-link" href="#"><i class="fa fa- user"></i>My Profile</a>

                                <a class="nav-link" href="#"><i class="fa fa- user"></i>Notifications <span class="count">13</span></a>

                                <a class="nav-link" href="#"><i class="fa fa -cog"></i>Settings</a>

                                <a class="nav-link" href="#"><i class="fa fa-power -off"></i>Logout</a>
                        </div>
                    </div>

                    <div class="language-select dropdown" id="language-select">
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown"  id="language" aria-haspopup="true" aria-expanded="true">
                            <i class="flag-icon flag-icon-us"></i>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="language" >
                            <div class="dropdown-item">
                                <span class="flag-icon flag-icon-fr"></span>
                            </div>
                            <div class="dropdown-item">
                                <i class="flag-icon flag-icon-es"></i>
                            </div>
                            <div class="dropdown-item">
                                <i class="flag-icon flag-icon-us"></i>
                            </div>
                            <div class="dropdown-item">
                                <i class="flag-icon flag-icon-it"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </header><!-- /header -->
        <!-- Header-->

        <div class="breadcrumbs">
            <div class="col-sm-4">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>Dashboard</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="page-header float-right">
                    <div class="page-title">
                        <ol class="breadcrumb text-right">
                            <li><a href="#">Dashboard</a></li>
                            <li><a href="#">UI Elements</a></li>
                            <li class="active">Social buttons</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content ml-0 mt-3">
            <div class="animated fadeIn">

                <div class="social-buttons">
                    <div class="card icon-text">
                        <div class="card-header">
                            <strong>Social Media Buttons</strong>
                            <small>Usage ex. <code style="text-transform:lowercase">&lt;button class="btn social facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code></small>

                            <div class="card-actions">
                                <a href="#" class="btn-setting"><i class="fa fa-cog"></i></a>
                                <button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
                                    <i class="fa fa-angle-down"></i>
                                </button>
                                <a href="#" class="btn-close"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="card-body">
                            <strong>Size Small
                                <small>Add this class
                                    <code>.btn-sm</code>
                                </small>
                            </strong>

                            <p class="mt-1">

                                <button type="button" class="btn btn-sm social facebook" style="margin-bottom: 4px">
                                    <i class="fa fa-facebook"></i>
                                    <span>Facebook</span>
                                </button>

                                <button type="button" class="btn btn-sm social twitter" style="margin-bottom: 4px">
                                    <i class="fa fa-twitter"></i>
                                    <span>Twitter</span>
                                </button>

                                <button type="button" class="btn btn-sm social linkedin" style="margin-bottom: 4px">
                                    <i class="fa fa-linkedin"></i>
                                    <span>LinkedIn</span>
                                </button>

                                <button type="button" class="btn btn-sm social flickr" style="margin-bottom: 4px">
                                    <i class="fa fa-flickr"></i>
                                    <span>Flickr</span>
                                </button>

                                <button type="button" class="btn btn-sm social tumblr" style="margin-bottom: 4px">
                                    <i class="fa fa-tumblr"></i>
                                    <span>Tumblr</span>
                                </button>

                                <button type="button" class="btn btn-sm social xing" style="margin-bottom: 4px">
                                    <i class="fa fa-xing"></i>
                                    <span>Xing</span>
                                </button>

                                <button type="button" class="btn btn-sm social github" style="margin-bottom: 4px">
                                    <i class="fa fa-github"></i>
                                    <span>Github</span>
                                </button>

                                <button type="button" class="btn btn-sm social html5" style="margin-bottom: 4px">
                                    <i class="fa fa-html5"></i>
                                    <span>HTML5</span>
                                </button>

                                <button type="button" class="btn btn-sm social openid" style="margin-bottom: 4px">
                                    <i class="fa fa-openid"></i>
                                    <span>OpenID</span>
                                </button>

                                <button type="button" class="btn btn-sm social stack-overflow" style="margin-bottom: 4px">
                                    <i class="fa fa-stack-overflow"></i>
                                    <span>StackOverflow</span>
                                </button>

                                <button type="button" class="btn btn-sm social css3" style="margin-bottom: 4px">
                                    <i class="fa fa-css3"></i>
                                    <span>CSS3</span>
                                </button>

                                <button type="button" class="btn btn-sm social youtube" style="margin-bottom: 4px">
                                    <i class="fa fa-youtube"></i>
                                    <span>YouTube</span>
                                </button>

                                <button type="button" class="btn btn-sm social dribbble" style="margin-bottom: 4px">
                                    <i class="fa fa-dribbble"></i>
                                    <span>Dribbble</span>
                                </button>

                                <button type="button" class="btn btn-sm social google-plus" style="margin-bottom: 4px">
                                    <i class="fa fa-google-plus"></i>
                                    <span>Google+</span>
                                </button>

                                <button type="button" class="btn btn-sm social instagram" style="margin-bottom: 4px">
                                    <i class="fa fa-instagram"></i>
                                    <span>Instagram</span>
                                </button>

                                <button type="button" class="btn btn-sm social pinterest" style="margin-bottom: 4px">
                                    <i class="fa fa-pinterest"></i>
                                    <span>Pinterest</span>
                                </button>

                                <button type="button" class="btn btn-sm social vk" style="margin-bottom: 4px">
                                    <i class="fa fa-vk"></i>
                                    <span>VK</span>
                                </button>

                                <button type="button" class="btn btn-sm social yahoo" style="margin-bottom: 4px">
                                    <i class="fa fa-yahoo"></i>
                                    <span>Yahoo</span>
                                </button>

                                <button type="button" class="btn btn-sm social behance" style="margin-bottom: 4px">
                                    <i class="fa fa-behance"></i>
                                    <span>Behance</span>
                                </button>

                                <button type="button" class="btn btn-sm social dropbox" style="margin-bottom: 4px">
                                    <i class="fa fa-dropbox"></i>
                                    <span>Dropbox</span>
                                </button>

                                <button type="button" class="btn btn-sm social reddit" style="margin-bottom: 4px">
                                    <i class="fa fa-reddit"></i>
                                    <span>Reddit</span>
                                </button>

                                <button type="button" class="btn btn-sm social spotify" style="margin-bottom: 4px">
                                    <i class="fa fa-spotify"></i>
                                    <span>Spotify</span>
                                </button>

                                <button type="button" class="btn btn-sm social vine" style="margin-bottom: 4px">
                                    <i class="fa fa-vine"></i>
                                    <span>Vine</span>
                                </button>

                                <button type="button" class="btn btn-sm social foursquare" style="margin-bottom: 4px">
                                    <i class="fa fa-foursquare"></i>
                                    <span>Forsquare</span>
                                </button>

                                <button type="button" class="btn btn-sm social vimeo" style="margin-bottom: 4px">
                                    <i class="fa fa-vimeo"></i>
                                    <span>Vimeo</span>
                                </button>

                            </p>


                            <strong>Size Normal</strong>

                            <p class="mt-1">

                                <button type="button" class="btn social facebook" style="margin-bottom: 4px">
                                    <i class="fa fa-facebook"></i>
                                    <span>Facebook</span>
                                </button>

                                <button type="button" class="btn social twitter" style="margin-bottom: 4px">
                                    <i class="fa fa-twitter"></i>
                                    <span>Twitter</span>
                                </button>

                                <button type="button" class="btn social linkedin" style="margin-bottom: 4px">
                                    <i class="fa fa-linkedin"></i>
                                    <span>LinkedIn</span>
                                </button>

                                <button type="button" class="btn social flickr" style="margin-bottom: 4px">
                                    <i class="fa fa-flickr"></i>
                                    <span>Flickr</span>
                                </button>

                                <button type="button" class="btn social tumblr" style="margin-bottom: 4px">
                                    <i class="fa fa-tumblr"></i>
                                    <span>Tumblr</span>
                                </button>

                                <button type="button" class="btn social xing" style="margin-bottom: 4px">
                                    <i class="fa fa-xing"></i>
                                    <span>Xing</span>
                                </button>

                                <button type="button" class="btn social github" style="margin-bottom: 4px">
                                    <i class="fa fa-github"></i>
                                    <span>Github</span>
                                </button>

                                <button type="button" class="btn social html5" style="margin-bottom: 4px">
                                    <i class="fa fa-html5"></i>
                                    <span>HTML5</span>
                                </button>

                                <button type="button" class="btn social openid" style="margin-bottom: 4px">
                                    <i class="fa fa-openid"></i>
                                    <span>OpenID</span>
                                </button>

                                <button type="button" class="btn social stack-overflow" style="margin-bottom: 4px">
                                    <i class="fa fa-stack-overflow"></i>
                                    <span>StackOverflow</span>
                                </button>

                                <button type="button" class="btn social css3" style="margin-bottom: 4px">
                                    <i class="fa fa-css3"></i>
                                    <span>CSS3</span>
                                </button>

                                <button type="button" class="btn social youtube" style="margin-bottom: 4px">
                                    <i class="fa fa-youtube"></i>
                                    <span>YouTube</span>
                                </button>

                                <button type="button" class="btn social dribbble" style="margin-bottom: 4px">
                                    <i class="fa fa-dribbble"></i>
                                    <span>Dribbble</span>
                                </button>

                                <button type="button" class="btn social google-plus" style="margin-bottom: 4px">
                                    <i class="fa fa-google-plus"></i>
                                    <span>Google+</span>
                                </button>

                                <button type="button" class="btn social instagram" style="margin-bottom: 4px">
                                    <i class="fa fa-instagram"></i>
                                    <span>Instagram</span>
                                </button>

                                <button type="button" class="btn social pinterest" style="margin-bottom: 4px">
                                    <i class="fa fa-pinterest"></i>
                                    <span>Pinterest</span>
                                </button>

                                <button type="button" class="btn social vk" style="margin-bottom: 4px">
                                    <i class="fa fa-vk"></i>
                                    <span>VK</span>
                                </button>

                                <button type="button" class="btn social yahoo" style="margin-bottom: 4px">
                                    <i class="fa fa-yahoo"></i>
                                    <span>Yahoo</span>
                                </button>

                                <button type="button" class="btn social behance" style="margin-bottom: 4px">
                                    <i class="fa fa-behance"></i>
                                    <span>Behance</span>
                                </button>

                                <button type="button" class="btn social dropbox" style="margin-bottom: 4px">
                                    <i class="fa fa-dropbox"></i>
                                    <span>Dropbox</span>
                                </button>

                                <button type="button" class="btn social reddit" style="margin-bottom: 4px">
                                    <i class="fa fa-reddit"></i>
                                    <span>Reddit</span>
                                </button>

                                <button type="button" class="btn social spotify" style="margin-bottom: 4px">
                                    <i class="fa fa-spotify"></i>
                                    <span>Spotify</span>
                                </button>

                                <button type="button" class="btn social vine" style="margin-bottom: 4px">
                                    <i class="fa fa-vine"></i>
                                    <span>Vine</span>
                                </button>

                                <button type="button" class="btn social foursquare" style="margin-bottom: 4px">
                                    <i class="fa fa-foursquare"></i>
                                    <span>Forsquare</span>
                                </button>

                                <button type="button" class="btn social vimeo" style="margin-bottom: 4px">
                                    <i class="fa fa-vimeo"></i>
                                    <span>Vimeo</span>
                                </button>

                            </p>


                            <h6>Size Large
                                <small>Add this class
                                    <code>.btn-lg</code>
                                </small>
                            </h6>
                            <p class="mt-1">
                                <button type="button" class="btn btn-lg social facebook" style="margin-bottom: 4px">
                                    <i class="fa fa-facebook"></i>
                                    <span>Facebook</span>
                                </button>

                                <button type="button" class="btn btn-lg social twitter" style="margin-bottom: 4px">
                                    <i class="fa fa-twitter"></i>
                                    <span>Twitter</span>
                                </button>

                                <button type="button" class="btn btn-lg social linkedin" style="margin-bottom: 4px">
                                    <i class="fa fa-linkedin"></i>
                                    <span>LinkedIn</span>
                                </button>

                                <button type="button" class="btn btn-lg social flickr" style="margin-bottom: 4px">
                                    <i class="fa fa-flickr"></i>
                                    <span>Flickr</span>
                                </button>

                                <button type="button" class="btn btn-lg social tumblr" style="margin-bottom: 4px">
                                    <i class="fa fa-tumblr"></i>
                                    <span>Tumblr</span>
                                </button>

                                <button type="button" class="btn btn-lg social xing" style="margin-bottom: 4px">
                                    <i class="fa fa-xing"></i>
                                    <span>Xing</span>
                                </button>

                                <button type="button" class="btn btn-lg social github" style="margin-bottom: 4px">
                                    <i class="fa fa-github"></i>
                                    <span>Github</span>
                                </button>

                                <button type="button" class="btn btn-lg social html5" style="margin-bottom: 4px">
                                    <i class="fa fa-html5"></i>
                                    <span>HTML5</span>
                                </button>

                                <button type="button" class="btn btn-lg social openid" style="margin-bottom: 4px">
                                    <i class="fa fa-openid"></i>
                                    <span>OpenID</span>
                                </button>

                                <button type="button" class="btn btn-lg social stack-overflow" style="margin-bottom: 4px">
                                    <i class="fa fa-stack-overflow"></i>
                                    <span>StackOverflow</span>
                                </button>

                                <button type="button" class="btn btn-lg social css3" style="margin-bottom: 4px">
                                    <i class="fa fa-css3"></i>
                                    <span>CSS3</span>
                                </button>

                                <button type="button" class="btn btn-lg social youtube" style="margin-bottom: 4px">
                                    <i class="fa fa-youtube"></i>
                                    <span>YouTube</span>
                                </button>

                                <button type="button" class="btn btn-lg social dribbble" style="margin-bottom: 4px">
                                    <i class="fa fa-dribbble"></i>
                                    <span>Dribbble</span>
                                </button>

                                <button type="button" class="btn btn-lg social google-plus" style="margin-bottom: 4px">
                                    <i class="fa fa-google-plus"></i>
                                    <span>Google+</span>
                                </button>

                                <button type="button" class="btn btn-lg social instagram" style="margin-bottom: 4px">
                                    <i class="fa fa-instagram"></i>
                                    <span>Instagram</span>
                                </button>

                                <button type="button" class="btn btn-lg social pinterest" style="margin-bottom: 4px">
                                    <i class="fa fa-pinterest"></i>
                                    <span>Pinterest</span>
                                </button>

                                <button type="button" class="btn btn-lg social vk" style="margin-bottom: 4px">
                                    <i class="fa fa-vk"></i>
                                    <span>VK</span>
                                </button>

                                <button type="button" class="btn btn-lg social yahoo" style="margin-bottom: 4px">
                                    <i class="fa fa-yahoo"></i>
                                    <span>Yahoo</span>
                                </button>

                                <button type="button" class="btn btn-lg social behance" style="margin-bottom: 4px">
                                    <i class="fa fa-behance"></i>
                                    <span>Behance</span>
                                </button>

                                <button type="button" class="btn btn-lg social dropbox" style="margin-bottom: 4px">
                                    <i class="fa fa-dropbox"></i>
                                    <span>Dropbox</span>
                                </button>

                                <button type="button" class="btn btn-lg social reddit" style="margin-bottom: 4px">
                                    <i class="fa fa-reddit"></i>
                                    <span>Reddit</span>
                                </button>

                                <button type="button" class="btn btn-lg social spotify" style="margin-bottom: 4px">
                                    <i class="fa fa-spotify"></i>
                                    <span>Spotify</span>
                                </button>

                                <button type="button" class="btn btn-lg social vine" style="margin-bottom: 4px">
                                    <i class="fa fa-vine"></i>
                                    <span>Vine</span>
                                </button>

                                <button type="button" class="btn btn-lg social foursquare" style="margin-bottom: 4px">
                                    <i class="fa fa-foursquare"></i>
                                    <span>Forsquare</span>
                                </button>

                                <button type="button" class="btn btn-lg social vimeo" style="margin-bottom: 4px">
                                    <i class="fa fa-vimeo"></i>
                                    <span>Vimeo</span>
                                </button>


                            </p>
                        </div>
                    </div>

                    <div class="card only-icon">
                        <div class="card-header">
                            <strong>Social Media Buttons</strong>
                            <small>Usage ex.</small>
                            <small><code style="text-transform:lowercase">&lt;button class="btn social facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code></small>
                            <div class="card-actions">
                                <a href="#" class="btn-setting"><i class="fa fa-cog"></i></a>
                                <button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
                                    <i class="fa fa-angle-down"></i>
                                </button>
                                <a href="#" class="btn-close"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="card-body">
                            <strong>Size Small
                                <small>Add this class
                                    <code>.btn-sm</code>
                                </small>
                            </strong>

                            <p class="mt-1">

                                <button type="button" class="btn btn-sm social facebook" style="margin-bottom: 4px">
                                    <i class="fa fa-facebook"></i>
                                </button>

                                <button type="button" class="btn btn-sm social twitter" style="margin-bottom: 4px">
                                    <i class="fa fa-twitter"></i>
                                </button>

                                <button type="button" class="btn btn-sm social linkedin" style="margin-bottom: 4px">
                                    <i class="fa fa-linkedin"></i>
                                </button>

                                <button type="button" class="btn btn-sm social flickr" style="margin-bottom: 4px">
                                    <i class="fa fa-flickr"></i>
                                </button>

                                <button type="button" class="btn btn-sm social tumblr" style="margin-bottom: 4px">
                                    <i class="fa fa-tumblr"></i>
                                </button>

                                <button type="button" class="btn btn-sm social xing" style="margin-bottom: 4px">
                                    <i class="fa fa-xing"></i>
                                </button>

                                <button type="button" class="btn btn-sm social github" style="margin-bottom: 4px">
                                    <i class="fa fa-github"></i>
                                </button>

                                <button type="button" class="btn btn-sm social html5" style="margin-bottom: 4px">
                                    <i class="fa fa-html5"></i>
                                </button>

                                <button type="button" class="btn btn-sm social openid" style="margin-bottom: 4px">
                                    <i class="fa fa-openid"></i>
                                </button>

                                <button type="button" class="btn btn-sm social stack-overflow" style="margin-bottom: 4px">
                                    <i class="fa fa-stack-overflow"></i>
                                </button>

                                <button type="button" class="btn btn-sm social css3" style="margin-bottom: 4px">
                                    <i class="fa fa-css3"></i>
                                </button>

                                <button type="button" class="btn btn-sm social youtube" style="margin-bottom: 4px">
                                    <i class="fa fa-youtube"></i>
                                </button>

                                <button type="button" class="btn btn-sm social dribbble" style="margin-bottom: 4px">
                                    <i class="fa fa-dribbble"></i>
                                </button>

                                <button type="button" class="btn btn-sm social google-plus" style="margin-bottom: 4px">
                                    <i class="fa fa-google-plus"></i>
                                </button>

                                <button type="button" class="btn btn-sm social instagram" style="margin-bottom: 4px">
                                    <i class="fa fa-instagram"></i>
                                </button>

                                <button type="button" class="btn btn-sm social pinterest" style="margin-bottom: 4px">
                                    <i class="fa fa-pinterest"></i>
                                </button>

                                <button type="button" class="btn btn-sm social vk" style="margin-bottom: 4px">
                                    <i class="fa fa-vk"></i>
                                </button>

                                <button type="button" class="btn btn-sm social yahoo" style="margin-bottom: 4px">
                                    <i class="fa fa-yahoo"></i>
                                </button>

                                <button type="button" class="btn btn-sm social behance" style="margin-bottom: 4px">
                                    <i class="fa fa-behance"></i>
                                </button>

                                <button type="button" class="btn btn-sm social dropbox" style="margin-bottom: 4px">
                                    <i class="fa fa-dropbox"></i>
                                </button>

                                <button type="button" class="btn btn-sm social reddit" style="margin-bottom: 4px">
                                    <i class="fa fa-reddit"></i>
                                </button>

                                <button type="button" class="btn btn-sm social spotify" style="margin-bottom: 4px">
                                    <i class="fa fa-spotify"></i>
                                </button>

                                <button type="button" class="btn btn-sm social vine" style="margin-bottom: 4px">
                                    <i class="fa fa-vine"></i>
                                </button>

                                <button type="button" class="btn btn-sm social foursquare" style="margin-bottom: 4px">
                                    <i class="fa fa-foursquare"></i>
                                </button>

                                <button type="button" class="btn btn-sm social vimeo" style="margin-bottom: 4px">
                                    <i class="fa fa-vimeo"></i>
                                </button>

                            </p>


                            <strong>Size Normal</strong>

                            <p class="mt-1">

                                <button type="button" class="btn social facebook" style="margin-bottom: 4px">
                                    <i class="fa fa-facebook"></i>
                                </button>

                                <button type="button" class="btn social twitter" style="margin-bottom: 4px">
                                    <i class="fa fa-twitter"></i>
                                </button>

                                <button type="button" class="btn social linkedin" style="margin-bottom: 4px">
                                    <i class="fa fa-linkedin"></i>
                                </button>

                                <button type="button" class="btn social flickr" style="margin-bottom: 4px">
                                    <i class="fa fa-flickr"></i>
                                </button>

                                <button type="button" class="btn social tumblr" style="margin-bottom: 4px">
                                    <i class="fa fa-tumblr"></i>
                                </button>

                                <button type="button" class="btn social xing" style="margin-bottom: 4px">
                                    <i class="fa fa-xing"></i>
                                </button>

                                <button type="button" class="btn social github" style="margin-bottom: 4px">
                                    <i class="fa fa-github"></i>
                                </button>

                                <button type="button" class="btn social html5" style="margin-bottom: 4px">
                                    <i class="fa fa-html5"></i>
                                </button>

                                <button type="button" class="btn social openid" style="margin-bottom: 4px">
                                    <i class="fa fa-openid"></i>
                                </button>

                                <button type="button" class="btn social stack-overflow" style="margin-bottom: 4px">
                                    <i class="fa fa-stack-overflow"></i>
                                </button>

                                <button type="button" class="btn social css3" style="margin-bottom: 4px">
                                    <i class="fa fa-css3"></i>
                                </button>

                                <button type="button" class="btn social youtube" style="margin-bottom: 4px">
                                    <i class="fa fa-youtube"></i>
                                </button>

                                <button type="button" class="btn social dribbble" style="margin-bottom: 4px">
                                    <i class="fa fa-dribbble"></i>
                                </button>

                                <button type="button" class="btn social google-plus" style="margin-bottom: 4px">
                                    <i class="fa fa-google-plus"></i>
                                </button>

                                <button type="button" class="btn social instagram" style="margin-bottom: 4px">
                                    <i class="fa fa-instagram"></i>
                                </button>

                                <button type="button" class="btn social pinterest" style="margin-bottom: 4px">
                                    <i class="fa fa-pinterest"></i>
                                </button>

                                <button type="button" class="btn social vk" style="margin-bottom: 4px">
                                    <i class="fa fa-vk"></i>
                                </button>

                                <button type="button" class="btn social yahoo" style="margin-bottom: 4px">
                                    <i class="fa fa-yahoo"></i>
                                </button>

                                <button type="button" class="btn social behance" style="margin-bottom: 4px">
                                    <i class="fa fa-behance"></i>
                                </button>

                                <button type="button" class="btn social dropbox" style="margin-bottom: 4px">
                                    <i class="fa fa-dropbox"></i>
                                </button>

                                <button type="button" class="btn social reddit" style="margin-bottom: 4px">
                                    <i class="fa fa-reddit"></i>
                                </button>

                                <button type="button" class="btn social spotify" style="margin-bottom: 4px">
                                    <i class="fa fa-spotify"></i>
                                </button>

                                <button type="button" class="btn social vine" style="margin-bottom: 4px">
                                    <i class="fa fa-vine"></i>
                                </button>

                                <button type="button" class="btn social foursquare" style="margin-bottom: 4px">
                                    <i class="fa fa-foursquare"></i>
                                </button>

                                <button type="button" class="btn social vimeo" style="margin-bottom: 4px">
                                    <i class="fa fa-vimeo"></i>
                                </button>

                            </p>


                            <h6>Size Large
                                <small>Add this class
                                    <code>.btn-lg</code>
                                </small>
                            </h6>
                            <p class="mt-1">
                                <button type="button" class="btn btn-lg social facebook" style="margin-bottom: 4px">
                                    <i class="fa fa-facebook"></i>
                                </button>

                                <button type="button" class="btn btn-lg social twitter" style="margin-bottom: 4px">
                                    <i class="fa fa-twitter"></i>
                                </button>

                                <button type="button" class="btn btn-lg social linkedin" style="margin-bottom: 4px">
                                    <i class="fa fa-linkedin"></i>
                                </button>

                                <button type="button" class="btn btn-lg social flickr" style="margin-bottom: 4px">
                                    <i class="fa fa-flickr"></i>
                                </button>

                                <button type="button" class="btn btn-lg social tumblr" style="margin-bottom: 4px">
                                    <i class="fa fa-tumblr"></i>
                                </button>

                                <button type="button" class="btn btn-lg social xing" style="margin-bottom: 4px">
                                    <i class="fa fa-xing"></i>
                                </button>

                                <button type="button" class="btn btn-lg social github" style="margin-bottom: 4px">
                                    <i class="fa fa-github"></i>
                                </button>

                                <button type="button" class="btn btn-lg social html5" style="margin-bottom: 4px">
                                    <i class="fa fa-html5"></i>
                                </button>

                                <button type="button" class="btn btn-lg social openid" style="margin-bottom: 4px">
                                    <i class="fa fa-openid"></i>
                                </button>

                                <button type="button" class="btn btn-lg social stack-overflow" style="margin-bottom: 4px">
                                    <i class="fa fa-stack-overflow"></i>
                                </button>

                                <button type="button" class="btn btn-lg social css3" style="margin-bottom: 4px">
                                    <i class="fa fa-css3"></i>
                                </button>

                                <button type="button" class="btn btn-lg social youtube" style="margin-bottom: 4px">
                                    <i class="fa fa-youtube"></i>
                                </button>

                                <button type="button" class="btn btn-lg social dribbble" style="margin-bottom: 4px">
                                    <i class="fa fa-dribbble"></i>
                                </button>

                                <button type="button" class="btn btn-lg social google-plus" style="margin-bottom: 4px">
                                    <i class="fa fa-google-plus"></i>
                                </button>

                                <button type="button" class="btn btn-lg social instagram" style="margin-bottom: 4px">
                                    <i class="fa fa-instagram"></i>
                                </button>

                                <button type="button" class="btn btn-lg social pinterest" style="margin-bottom: 4px">
                                    <i class="fa fa-pinterest"></i>
                                </button>

                                <button type="button" class="btn btn-lg social vk" style="margin-bottom: 4px">
                                    <i class="fa fa-vk"></i>
                                </button>

                                <button type="button" class="btn btn-lg social yahoo" style="margin-bottom: 4px">
                                    <i class="fa fa-yahoo"></i>
                                </button>

                                <button type="button" class="btn btn-lg social behance" style="margin-bottom: 4px">
                                    <i class="fa fa-behance"></i>
                                </button>

                                <button type="button" class="btn btn-lg social dropbox" style="margin-bottom: 4px">
                                    <i class="fa fa-dropbox"></i>
                                </button>

                                <button type="button" class="btn btn-lg social reddit" style="margin-bottom: 4px">
                                    <i class="fa fa-reddit"></i>
                                </button>

                                <button type="button" class="btn btn-lg social spotify" style="margin-bottom: 4px">
                                    <i class="fa fa-spotify"></i>
                                </button>

                                <button type="button" class="btn btn-lg social vine" style="margin-bottom: 4px">
                                    <i class="fa fa-vine"></i>
                                </button>

                                <button type="button" class="btn btn-lg social foursquare" style="margin-bottom: 4px">
                                    <i class="fa fa-foursquare"></i>
                                </button>

                                <button type="button" class="btn btn-lg social vimeo" style="margin-bottom: 4px">
                                    <i class="fa fa-vimeo"></i>
                                </button>


                            </p>
                        </div>
                    </div>


                    <div class="card only-text">
                        <div class="card-header">
                            <strong>Social Media Buttons</strong>
                            <small>Usage ex. <code style="text-transform:lowercase">&lt;button class="btn social facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</code></small>

                            <div class="card-actions">
                                <a href="#" class="btn-setting"><i class="fa fa-cog"></i></a>
                                <button class="btn-minimize" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="collapseExample">
                                    <i class="fa fa-angle-down"></i>
                                </button>
                                <a href="#" class="btn-close"><i class="fa fa-times"></i></a>
                            </div>
                        </div>
                        <div class="card-body">
                            <strong>Size Small
                                <small>Add this class
                                    <code>.btn-sm</code>
                                </small>
                            </strong>

                            <p class="mt-1">
                                <button type="button" class="btn btn-sm social facebook" style="margin-bottom: 4px">
                                    <span>Facebook</span>
                                </button>

                                <button type="button" class="btn btn-sm social twitter" style="margin-bottom: 4px">
                                    <span>Twitter</span>
                                </button>

                                <button type="button" class="btn btn-sm social linkedin" style="margin-bottom: 4px">
                                    <span>LinkedIn</span>
                                </button>

                                <button type="button" class="btn btn-sm social flickr" style="margin-bottom: 4px">
                                    <span>Flickr</span>
                                </button>

                                <button type="button" class="btn btn-sm social tumblr" style="margin-bottom: 4px">
                                    <span>Tumblr</span>
                                </button>

                                <button type="button" class="btn btn-sm social xing" style="margin-bottom: 4px">
                                    <span>Xing</span>
                                </button>

                                <button type="button" class="btn btn-sm social github" style="margin-bottom: 4px">
                                    <span>Github</span>
                                </button>

                                <button type="button" class="btn btn-sm social html5" style="margin-bottom: 4px">
                                    <span>HTML5</span>
                                </button>

                                <button type="button" class="btn btn-sm social openid" style="margin-bottom: 4px">
                                    <span>OpenID</span>
                                </button>

                                <button type="button" class="btn btn-sm social stack-overflow" style="margin-bottom: 4px">
                                    <span>StackOverflow</span>
                                </button>

                                <button type="button" class="btn btn-sm social css3" style="margin-bottom: 4px">
                                    <span>CSS3</span>
                                </button>

                                <button type="button" class="btn btn-sm social youtube" style="margin-bottom: 4px">
                                    <span>YouTube</span>
                                </button>

                                <button type="button" class="btn btn-sm social dribbble" style="margin-bottom: 4px">
                                    <span>Dribbble</span>
                                </button>

                                <button type="button" class="btn btn-sm social google-plus" style="margin-bottom: 4px">
                                    <span>Google+</span>
                                </button>

                                <button type="button" class="btn btn-sm social instagram" style="margin-bottom: 4px">
                                    <span>Instagram</span>
                                </button>

                                <button type="button" class="btn btn-sm social pinterest" style="margin-bottom: 4px">
                                    <span>Pinterest</span>
                                </button>

                                <button type="button" class="btn btn-sm social vk" style="margin-bottom: 4px">
                                    <span>VK</span>
                                </button>

                                <button type="button" class="btn btn-sm social yahoo" style="margin-bottom: 4px">
                                    <span>Yahoo</span>
                                </button>

                                <button type="button" class="btn btn-sm social behance" style="margin-bottom: 4px">
                                    <span>Behance</span>
                                </button>

                                <button type="button" class="btn btn-sm social dropbox" style="margin-bottom: 4px">
                                    <span>Dropbox</span>
                                </button>

                                <button type="button" class="btn btn-sm social reddit" style="margin-bottom: 4px">
                                    <span>Reddit</span>
                                </button>

                                <button type="button" class="btn btn-sm social spotify" style="margin-bottom: 4px">
                                    <span>Spotify</span>
                                </button>

                                <button type="button" class="btn btn-sm social vine" style="margin-bottom: 4px">
                                    <span>Vine</span>
                                </button>

                                <button type="button" class="btn btn-sm social foursquare" style="margin-bottom: 4px">
                                    <span>Forsquare</span>
                                </button>

                                <button type="button" class="btn btn-sm social vimeo" style="margin-bottom: 4px">
                                    <span>Vimeo</span>
                                </button>

                            </p>


                            <strong>Size Normal</strong>

                            <p class="mt-1">

                                <button type="button" class="btn social facebook" style="margin-bottom: 4px">
                                    <span>Facebook</span>
                                </button>

                                <button type="button" class="btn social twitter" style="margin-bottom: 4px">
                                    <span>Twitter</span>
                                </button>

                                <button type="button" class="btn social linkedin" style="margin-bottom: 4px">
                                    <span>LinkedIn</span>
                                </button>

                                <button type="button" class="btn social flickr" style="margin-bottom: 4px">
                                    <span>Flickr</span>
                                </button>

                                <button type="button" class="btn social tumblr" style="margin-bottom: 4px">
                                    <span>Tumblr</span>
                                </button>

                                <button type="button" class="btn social xing" style="margin-bottom: 4px">
                                    <span>Xing</span>
                                </button>

                                <button type="button" class="btn social github" style="margin-bottom: 4px">
                                    <span>Github</span>
                                </button>

                                <button type="button" class="btn social html5" style="margin-bottom: 4px">
                                    <span>HTML5</span>
                                </button>

                                <button type="button" class="btn social openid" style="margin-bottom: 4px">
                                    <span>OpenID</span>
                                </button>

                                <button type="button" class="btn social stack-overflow" style="margin-bottom: 4px">
                                    <span>StackOverflow</span>
                                </button>

                                <button type="button" class="btn social css3" style="margin-bottom: 4px">
                                    <span>CSS3</span>
                                </button>

                                <button type="button" class="btn social youtube" style="margin-bottom: 4px">
                                    <span>YouTube</span>
                                </button>

                                <button type="button" class="btn social dribbble" style="margin-bottom: 4px">
                                    <span>Dribbble</span>
                                </button>

                                <button type="button" class="btn social google-plus" style="margin-bottom: 4px">
                                    <span>Google+</span>
                                </button>

                                <button type="button" class="btn social instagram" style="margin-bottom: 4px">
                                    <span>Instagram</span>
                                </button>

                                <button type="button" class="btn social pinterest" style="margin-bottom: 4px">
                                    <span>Pinterest</span>
                                </button>

                                <button type="button" class="btn social vk" style="margin-bottom: 4px">
                                    <span>VK</span>
                                </button>

                                <button type="button" class="btn social yahoo" style="margin-bottom: 4px">
                                    <span>Yahoo</span>
                                </button>

                                <button type="button" class="btn social behance" style="margin-bottom: 4px">
                                    <span>Behance</span>
                                </button>

                                <button type="button" class="btn social dropbox" style="margin-bottom: 4px">
                                    <span>Dropbox</span>
                                </button>

                                <button type="button" class="btn social reddit" style="margin-bottom: 4px">
                                    <span>Reddit</span>
                                </button>

                                <button type="button" class="btn social spotify" style="margin-bottom: 4px">
                                    <span>Spotify</span>
                                </button>

                                <button type="button" class="btn social vine" style="margin-bottom: 4px">
                                    <span>Vine</span>
                                </button>

                                <button type="button" class="btn social foursquare" style="margin-bottom: 4px">
                                    <span>Forsquare</span>
                                </button>

                                <button type="button" class="btn social vimeo" style="margin-bottom: 4px">
                                    <span>Vimeo</span>
                                </button>

                            </p>


                            <h6>Size Large
                                <small>Add this class
                                    <code>.btn-lg</code>
                                </small>
                            </h6>
                            <p class="mt-1">
                                <button type="button" class="btn btn-lg social facebook" style="margin-bottom: 4px">
                                    <span>Facebook</span>
                                </button>

                                <button type="button" class="btn btn-lg social twitter" style="margin-bottom: 4px">
                                    <span>Twitter</span>
                                </button>

                                <button type="button" class="btn btn-lg social linkedin" style="margin-bottom: 4px">
                                    <span>LinkedIn</span>
                                </button>

                                <button type="button" class="btn btn-lg social flickr" style="margin-bottom: 4px">
                                    <span>Flickr</span>
                                </button>

                                <button type="button" class="btn btn-lg social tumblr" style="margin-bottom: 4px">
                                    <span>Tumblr</span>
                                </button>

                                <button type="button" class="btn btn-lg social xing" style="margin-bottom: 4px">
                                    <span>Xing</span>
                                </button>

                                <button type="button" class="btn btn-lg social github" style="margin-bottom: 4px">
                                    <span>Github</span>
                                </button>

                                <button type="button" class="btn btn-lg social html5" style="margin-bottom: 4px">
                                    <span>HTML5</span>
                                </button>

                                <button type="button" class="btn btn-lg social openid" style="margin-bottom: 4px">
                                    <span>OpenID</span>
                                </button>

                                <button type="button" class="btn btn-lg social stack-overflow" style="margin-bottom: 4px">
                                    <span>StackOverflow</span>
                                </button>

                                <button type="button" class="btn btn-lg social css3" style="margin-bottom: 4px">
                                    <span>CSS3</span>
                                </button>

                                <button type="button" class="btn btn-lg social youtube" style="margin-bottom: 4px">
                                    <span>YouTube</span>
                                </button>

                                <button type="button" class="btn btn-lg social dribbble" style="margin-bottom: 4px">
                                    <span>Dribbble</span>
                                </button>

                                <button type="button" class="btn btn-lg social google-plus" style="margin-bottom: 4px">
                                    <span>Google+</span>
                                </button>

                                <button type="button" class="btn btn-lg social instagram" style="margin-bottom: 4px">
                                    <span>Instagram</span>
                                </button>

                                <button type="button" class="btn btn-lg social pinterest" style="margin-bottom: 4px">
                                    <span>Pinterest</span>
                                </button>

                                <button type="button" class="btn btn-lg social vk" style="margin-bottom: 4px">
                                    <span>VK</span>
                                </button>

                                <button type="button" class="btn btn-lg social yahoo" style="margin-bottom: 4px">
                                    <span>Yahoo</span>
                                </button>

                                <button type="button" class="btn btn-lg social behance" style="margin-bottom: 4px">
                                    <span>Behance</span>
                                </button>

                                <button type="button" class="btn btn-lg social dropbox" style="margin-bottom: 4px">
                                    <span>Dropbox</span>
                                </button>

                                <button type="button" class="btn btn-lg social reddit" style="margin-bottom: 4px">
                                    <span>Reddit</span>
                                </button>

                                <button type="button" class="btn btn-lg social spotify" style="margin-bottom: 4px">
                                    <span>Spotify</span>
                                </button>

                                <button type="button" class="btn btn-lg social vine" style="margin-bottom: 4px">
                                    <span>Vine</span>
                                </button>

                                <button type="button" class="btn btn-lg social foursquare" style="margin-bottom: 4px">
                                    <span>Forsquare</span>
                                </button>

                                <button type="button" class="btn btn-lg social vimeo" style="margin-bottom: 4px">
                                    <span>Vimeo</span>
                                </button>


                            </p>
                        </div>
                    </div>
                </div>

            </div><!-- .animated -->
        </div><!-- .content -->


    </div><!-- /#right-panel -->

    <!-- Right Panel -->


    <script src="assets/js/vendor/jquery-2.1.4.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/main.js"></script>


</body>
</html>