"Social Test"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row text-center"> <img class="img-responsive apps-header-image" src="#"/> <div class="col-md-10 col-md-offset-1"> <h1>Sparkk TV on Social Media</h1> <div class="btn-wrapper text-center"> <p>Like, Follow, Add, Pin, Snap, Watch, View, Blog!<p> <p>Sparkk TV has a Social Media outlet that you will enjoy and want to follow on every platform.<p> <p>From posting Breaking News, to Blogging to just that new picture or teaser of a new series.<p> <center><a href="https://twitter.com/intent/tweet?button_hashtag=SparkkTV" class="twitter-hashtag-button" data-size="large" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>  <iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.sparkktv.com&layout=button&size=large&mobile_iframe=true&appId=504857196331442&width=73&height=28" width="73" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></center> </div> </div> </div> <div class="row underlay bg-grey"> </div> <div class="facebook card col-sm-4"> <h1><i class="fa fa-facebook-official fa-fw"></i>Facebook</h1> <p>7.8K Followers</p> <a href="https://facebook.com/sparkktv"><button>Like Us</button></a> </div> <div class="twitter card col-sm-4"> <h1><i class="fa fa-twitter-square fa-fw"></i>Twitter</h1> <p>360 Followers</p> <a href="http://twitter.com/sparkktv"><button>Tweet Us</button></a> </div> <div class="instagram card col-sm-4"> <h1><i class="fa fa-instagram fa-fw"></i>Instagram</h1> <p>80 Followers</p> <a href="https://instagram.com/sparkktv"><button>Snap Us</button></a> </div> <div class="google card col-sm-4"> <h1><i class="fa fa-google-plus-square fa-fw"></i>Google Plus</h1> <p>30 Followers</p> <a href="https://plus.google.com/+sparkktvnow"><button>Add Us</button></a> </div> <div class="pinterest card col-sm-4"> <h1><i class="fa fa-pinterest-square fa-fw"></i>Pinterest</h1> <p>15 Followers</p> <a href="https://pinterest.com/sparkktv"><button>Pin Us</button></a> </div> <div class="youtube card col-sm-4"> <h1><i class="fa fa-youtube-square fa-fw"></i>Youtube</h1> <p>25 Subscribers</p> <a href="https://youtube.com/sparkknow"><button>Watch Us</button></a> </div> <div class="tumblr card col-sm-4"> <h1><i class="fa fa-tumblr-square fa-fw"></i>Tumblr</h1> <p>10 Followers</p> <a href="http://sparkktv.tumblr.com/"><button>Blog With Us</button></a> </div> <div class="medium card col-sm-4"> <h1><i class="fa fa-medium fa-fw"></i>Medium</h1> <p>20 Followers</p> <a href="https://medium.com/sparkktv"><button>Come See Us</button></a> </div> <div class="flickr card col-sm-4"> <h1><i class="fa fa-flickr fa-fw"></i>Flickr</h1> <p>20 Followers</p> <a href="http://flickr.com/sparkk-tv"><button>View Us</button></a> </div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); @import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700'); body {font-family: 'Ubuntu', Arial;padding: 0;margin: 0;width:100%;} .heading {text-align:center;padding:10px;color:#666;background:#EEE;margin-bottom:60px;} .card {overflow:hidden;padding:20px;cursor:default;color:#fff;text-align:center;width:25%;height:auto;margin-right:auto;margin-left:auto;display:block;} .facebook {background-color:#3b5999;} .instagram {background-color:#405de6;} .twitter {background-color:#1da1f2;} .google {background-color:#dd4b39;} .pinterest {background-color:#bd081c;} .youtube {background-color:#ff0000;} .tumblr {background-color:#35465c;} .medium {background-color:#00ab6c;} .flickr {background-color:#ff0084;} .card h1, .card p {transition:all 0.5s ease-in-out;} .card p {float:left;width:5%;padding:5px;} .card button {float:right;width:50%;margin-top:26px;background:transparent;border:2px solid #EEE;color:#fff;padding:5px;transition:all 0.5s ease-in-out;cursor:pointer;} .card button:hover {background-color:#EEE;color:#666;} .card:hover h1{transform:scale(1.1);} @media(max-width: 768px) { .card {width:100%;margin-left:0;margin-right:0;padding:0;padding-top:5px;padding-bottom:5px;} .card button {margin-right: 5px;}} .apps-header-image {margin:70px auto;} .row h2, .row h1 {color:#111;letter-spacing:-1px;font-weight:700;} .btn-wrapper {width: 100%;text-align: center;} p {margin: 0 0 10px;font-size: 18px;font-weight: 300;} .bg-grey {background-color: #d3d3d3 !important;} .underlay {height: 490px;margin-top: -448px;}

Related: See More


Questions / Comments: