<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="myTab1">
<div class="liner"></div>
<li class="active">
<a href="#home" data-toggle="tab" title="welcome">
<span class="round-tabs one">
<i class="glyphicon glyphicon-book"></i>
</span>
</a></li>
<li class="disabled"><a href="#profile" data-toggle="tab" title="profile">
<span class="round-tabs two">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li class="disabled"><a href="#messages" data-toggle="tab" title="bootsnipp goodies">
<span class="round-tabs three">
<i class="glyphicon glyphicon-gift"></i>
</span> </a>
</li>
<li class="disabled"><a href="#settings" data-toggle="tab" title="blah blah">
<span class="round-tabs four">
<i class="glyphicon glyphicon-comment"></i>
</span>
</a></li>
<li class="disabled"><a href="#doner" data-toggle="tab" title="completed">
<span class="round-tabs five">
<i class="glyphicon glyphicon-ok"></i>
</span> </a>
</li>
</ul></div>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<h3 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></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>
<form class="form-horizontal text-center" id="home_form" name="home_form" role="form">
<fieldset>
<button type="submit" href="#profile" name="home_form" class="btn-submit btn btn-success btn-outline-rounded green"> Next tab <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></button>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="profile">
<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>
<form class="form-horizontal text-center" id="profile_form" name="profile_form" role="form">
<fieldset>
<button type="submit" href="#messages" name="profile_form" class="btn-submit btn btn-success btn-outline-rounded green"> Next tab <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></button>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="messages">
<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>
<form class="form-horizontal text-center" id="messages_form" name="messages_form" role="form">
<fieldset>
<button type="submit" href="#settings" name="messages_form" class="btn-submit btn btn-success btn-outline-rounded green"> Next tab <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></button>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="settings">
<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>
<form class="form-horizontal text-center" id="settings_form" name="settings_form" role="form">
<fieldset>
<button type="submit" href="#doner" name="settings_form" class="btn-submit btn btn-success btn-outline-rounded green"> Next tab <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></button>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="doner">
<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>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/
body{
background-color:#333;
}
.round-tabs
{
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
transition-duration: 1.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.round-tabs:hover{
transform:rotate(720deg)scale(1.5);
-ms-transform:rotate(720deg)scale(1.5); /* IE 9 */
-webkit-transform:rotate(720deg)scale(1.5);
}
.board{
width: 75%;
margin: 60px auto;
height: 500px;
background: #000;
/*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;
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{
background-color:rgb(34, 194, 34);
color: #fff;border: 2px solid rgb(34, 194, 34);
}
li.active span.round-tabs.one{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(34, 194, 34);
}
span.round-tabs.two{
background-color:#febe29;
color: #fff;border: 2px solid #febe29;
}
li.active span.round-tabs.two{
background: #fff !important;
border: 2px solid #ddd;
color: #febe29;
}
span.round-tabs.three{
background-color:#3e5e9a;
color: #fff;border: 2px solid #3e5e9a;
}
li.active span.round-tabs.three{
background: #fff !important;
border: 2px solid #ddd;
color: #3e5e9a;
}
span.round-tabs.four{
background-color:#f1685e;
color: #fff;border: 2px solid #f1685e;
}
li.active span.round-tabs.four{
background: #fff !important;
border: 2px solid #ddd;
color: #f1685e;
}
span.round-tabs.five{
background-color:#999;
color: #fff;border: 2px solid #999;
}
li.active span.round-tabs.five{
background: #fff !important;
border: 2px solid #ddd;
color: #999;
}
.nav-tabs > li.active > a span.round-tabs{
background: #fafafa;
}
.nav-tabs > li {
width: 20%;
}
li:after {
content: " ";
position: absolute;
left: 45%;
opacity:0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #ddd;
transition:0.1s ease-in-out;
}
li.active:after {
content: " ";
position: absolute;
left: 45%;
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;
}
li.active:after {
content: " ";
position: absolute;
left: 35%;
}
.btn-outline-rounded {
padding:12px 20px;
}
}
$(function(){
$('a[title]').tooltip();
$('.btn-submit').on('click', function(e) {
var formname = $(this).attr('name');
var tabname = $(this).attr('href');
if ($('#' + formname)[0].checkValidity()) { /* Only works in Firefox/Chrome need polyfill for IE9, Safari. http://afarkas.github.io/webshim/demos/ */
e.preventDefault();
$('ul.nav li a[href="' + tabname + '"]').parent().removeClass('disabled');
$('ul.nav li a[href="' + tabname + '"]').trigger('click');
}
});
$('ul.nav li').on('click', function(e) {
if ($(this).hasClass('disabled')) {
e.preventDefault();
return false;
}
});
});
