<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section style="background:#efefe9;">
<div class="container">
<div class="row">
<div class="board">
<!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
<div class="board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="active">
<a href="#facebook" data-toggle="tab" title="facebook">
<span class="round-tabs one">
<i class="fa fa-facebook"></i>
</span>
</a></li>
<li><a href="#twitter" data-toggle="tab" title="twitter">
<span class="round-tabs two">
<i class="fa fa-twitter"></i>
</span>
</a>
</li>
<li><a href="#google" data-toggle="tab" title="google-plus">
<span class="round-tabs three">
<i class="fa fa-google-plus"></i>
</span> </a>
</li>
<li><a href="#pinterest" data-toggle="tab" title="pinterest">
<span class="round-tabs four">
<i class="fa fa-pinterest"></i>
</span>
</a></li>
<li><a href="#instagram" data-toggle="tab" title="instagram">
<span class="round-tabs five">
<i class="fa fa-instagram"></i>
</span> </a>
</li>
<li><a href="#youtube" data-toggle="tab" title="youtube">
<span class="round-tabs six">
<i class="fa fa-youtube"></i>
</span> </a>
</li>
<li><a href="#tumblr" data-toggle="tab" title="tumblr">
<span class="round-tabs seven">
<i class="fa fa-tumblr"></i>
</span> </a>
</li>
<li><a href="#medium" data-toggle="tab" title="medium">
<span class="round-tabs eight">
<i class="fa fa-medium"></i>
</span> </a>
</li>
</ul></div>
<div class="tab-content">
<div class="tab-pane fade in active" id="facebook">
<h3 class="head text-center">Like Us #SparkkTV</span></h3>
<p class="narrow text-center">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=504857196331442";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><center><div class="fb-page" data-href="https://www.facebook.com/sparkktv/" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/sparkktv/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/sparkktv/">Sparkk TV</a></blockquote></div></center>
</p>
</div>
<div class="tab-pane fade" id="twitter">
<h3 class="head text-center">Create a Bootsnipp<sup>™</sup> Profile</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-outline-rounded btn-twitter"> #Tweet Us on Twitter <span style="margin-left:10px;" class="fa fa-twitter-square"></span></a>
</p>
</div>
<div class="tab-pane fade" id="google">
<h3 class="head text-center">Bootsnipp goodies</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="pinterest">
<h3 class="head text-center">Drop comments!</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="instagram">
<div class="text-center">
<i class="img-intro icon-checkmark-circle"></i>
</div>
<h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/
.board{width: 75%;margin: 60px auto;height: 500px;background: #fff;/*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/}
.board .nav-tabs {position: relative;/* border-bottom: 0; *//* width: 80%; */margin: 40px auto;margin-bottom: 0;box-sizing: border-box;}
.board > div.board-inner{background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png);background-size: 30%;}
p.narrow{width: 60%;margin: 10px auto;}
.liner{height: 2px;background: #ddd;position: absolute;width: 80%;margin: 0 auto;left: 0;right: 0;top: 50%;z-index: 1;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {color: #555555;cursor: default;/* background-color: #ffffff; */border: 0;border-bottom-color: transparent;}
span.round-tabs{width: 70px;height: 70px;line-height: 70px;display: inline-block;border-radius: 100px;background: white;z-index: 2;position: absolute;left: 0;text-align: center;font-size: 25px;}
span.round-tabs.one{color: #3b5998;border: 2px solid #3b5998;}
li.active span.round-tabs.one{background: #fff !important;border: 2px solid #ddd;color: #3b5998;}
span.round-tabs.two{color: #1da1f2;border: 2px solid #1da1f2;}
li.active span.round-tabs.two{background: #fff !important;border: 2px solid #ddd;color: #1da1f2;}
span.round-tabs.three{color: #dd4b39;border: 2px solid #dd4b39;}
li.active span.round-tabs.three{background: #fff !important;border: 2px solid #ddd;color: #dd4b39;}
span.round-tabs.four{color: #bd081c;border: 2px solid #bd081c;}
li.active span.round-tabs.four{background: #fff !important;border: 2px solid #ddd;color: #bd081c;}
span.round-tabs.five{color: #405de6;border: 2px solid #405de6;}
li.active span.round-tabs.five{background: #fff !important;border: 2px solid #ddd;color: #405de6;}
span.round-tabs.six{color: #cd201f;border: 2px solid #cd201f;}
li.active span.round-tabs.six{background: #fff !important;border: 2px solid #ddd;color: #cd201f;}
span.round-tabs.seven{color: #35465c;border: 2px solid #35465c;}
li.active span.round-tabs.seven{background: #fff !important;border: 2px solid #ddd;color: #35465c;}
span.round-tabs.eight{color: #00ab6c;border: 2px solid #00ab6c;}
li.active span.round-tabs.eight{background: #fff !important;border: 2px solid #ddd;color: #00ab6c;}
.btn-facebook {background-color:#3b5998;}
.btn-twitter {background-color:#1da1f2;}
a {color:#fff !important;}
.nav-tabs > li.active > a span.round-tabs{background: #fafafa;}
.nav-tabs > li {width: 12.5%;}
/*li.active:before {content: " ";position: absolute;left: 45%;opacity:0;margin: 0 auto;bottom: -2px;border: 10px solid transparent;border-bottom-color: #fff;z-index: 1;transition:0.2s ease-in-out;}*/
.nav-tabs > li:after {content: " ";position: absolute;left: 40%;opacity:0;margin: 0 auto;bottom: 0px;border: 5px solid transparent;border-bottom-color: #ddd;transition:0.1s ease-in-out;}
.nav-tabs > li.active:after {content: " ";position: absolute;left: 40%;opacity:1;margin: 0 auto;bottom: 0px;border: 10px solid transparent;border-bottom-color: #ddd;}
.nav-tabs > li a{width: 70px;height: 70px;margin: 20px auto;border-radius: 100%;padding: 0;}
.nav-tabs > li a:hover{background: transparent;}
.tab-content{}
.tab-pane{position: relative;padding-top: 50px;}
.tab-content .head{font-family: 'Roboto Condensed', sans-serif;font-size: 25px;text-transform: uppercase;padding-bottom: 10px;}
.btn-outline-rounded{padding: 10px 40px;margin: 20px 0;border: 2px solid transparent;border-radius: 25px;}
.btn.green{background-color:#5cb85c;/*border: 2px solid #5cb85c;*/color: #ffffff;}
@media( max-width : 585px ){
.board {width: 90%;height:auto !important;}
span.round-tabs {font-size:16px;width: 50px;height: 50px;line-height: 50px;}
.tab-content .head{font-size:20px;}
.nav-tabs > li a {width: 50px;height: 50px;line-height:50px;}
.nav-tabs > li.active:after {content: " ";position: absolute;left: 35%;}
.btn-outline-rounded {padding:12px 20px;}
}
$(function(){
$('a[title]').tooltip();
});
