<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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 bhoechie-tab-container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-2 bhoechie-tab-menu">
<div class="list-group">
<a href="#" class="list-group-item active text-center certification windows"> <!--style="background-color:#008cce;-->
<h3><i class="fa fa-windows"></i></h3><br/>Windows
</a>
<a href="#" class="list-group-item text-center windows-server"> <!--style="background-color:#2b3385;"-->
<h3><i class="fa fa-windows"></i></h3><br/>Windows Server
</a>
<a href="#" class="list-group-item text-center office365"> <!--style="background-color:#ef1f26;"-->
<h3><i class="fa fa-paperclip"></i></h3><br/>Office 365
</a>
<a href="#" class="list-group-item text-center certification sql"> <!-- style="background-color:#535a5a;"-->
<h3><i class="fa fa-database"></i></h3><br/>SQL Server
</a>
<a href="#" class="list-group-item text-center azure" style="height:33.33%;"> <!-- style="background-color:#01aef0;"-->
<h3 class="fa fa-cloud"></h3><br/>Azure
</a>
<a href="#" class="list-group-item text-center certification dev"> <!-- style="background-color:#613095;"-->
<h3><i class="fa fa-code"></i></h3><br/>Development paths
</a>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab">
<!-- flight section -->
<div class="bhoechie-tab-content active">
<center>
<h1 class="glyphicon glyphicon-plane" style="font-size:14em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">Windows</h3>
</center>
</div>
<!-- train section -->
<div class="bhoechie-tab-content">
<center>
<h1 class="" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a"></h2>
<h3 class="certification" style="margin-top: 0;color:#55518a">Windows Server</h3>
</center>
<div class="row">
<div class="process">
<div class="process-row nav nav-tabs">
<div class="process-step">
<button type="button" class="btn btn-info btn-circle" data-toggle="tab" href="#menu1"><i class="glyphicon glyphicon-ok"></i></button>
<p><small>20410</small></p>
</div>
<div class="process-step">
<button type="button" class="btn btn-default btn-circle" data-toggle="tab" href="#menu2"><i class="glyphicon glyphicon-ok"></i></button>
<p><small>20411</small></p>
</div>
<div class="process-step">
<button type="button" class="btn btn-default btn-circle" data-toggle="tab" href="#menu3"><i class="glyphicon glyphicon-ok"></i></button>
<p><small>2012</small></p>
</div>
<div class="process-step">
<button type="button" class="btn btn-default btn-circle" data-toggle="tab" href="#menu4"><i class="glyphicon glyphicon-ok"></i></button>
<p><small>MCSA</small></p>
</div>
<div class="process-step">
<button type="button" class="btn btn-default btn-circle" data-toggle="tab" href="#menu5"><i class="glyphicon glyphicon-ok"></i></button>
<p><small>20413</small></p>
</div>
</div>
</div>
<div class="tab-content">
<div id="menu1" class="tab-pane fade active in">
<h3>Installing and Configuring Windows Server® 2012</h3>
<p>This course is part one in a series of three courses that provides the skills and knowledge necessary to implement a core Windows Server 2012 infrastructure in an existing enterprise environment.</p>
<ul class="list-unstyled list-inline pull-right">
<li><button type="button" class="btn btn-info next-step">Next <i class="fa fa-chevron-right"></i></button></li>
</ul>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Administering Windows Server® 2012</h3>
<p>This course is part two in a series of three courses that provides the skills and knowledge necessary to implement a core Windows Server 2012 infrastructure in an existing enterprise environment.</p>
<ul class="list-unstyled list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step"><i class="fa fa-chevron-left"></i> Back</button></li>
<li><button type="button" class="btn btn-info next-step">Next <i class="fa fa-chevron-right"></i></button></li>
</ul>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Configuring Advanced Windows Server® 2012 Services</h3>
<p>This course is part three in a series of three courses that provides the skills and knowledge necessary to implement a core Windows Server 2012 infrastructure in an existing enterprise environment.</p>
<ul class="list-unstyled list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step"><i class="fa fa-chevron-left"></i> Back</button></li>
<li><button type="button" class="btn btn-info next-step">Next <i class="fa fa-chevron-right"></i></button></li>
</ul>
</div>
<div id="menu4" class="tab-pane fade">
<h3>Menu 4</h3>
<p>Some content in menu 2.</p>
<ul class="list-unstyled list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step"><i class="fa fa-chevron-left"></i> Back</button></li>
<li><button type="button" class="btn btn-info next-step">Next <i class="fa fa-chevron-right"></i></button></li>
</ul>
</div>
<div id="menu5" class="tab-pane fade">
<h3>Menu 5</h3>
<p>Some content in menu 2.</p>
<ul class="list-unstyled list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step"><i class="fa fa-chevron-left"></i> Back</button></li>
<li><button type="button" class="btn btn-success"><i class="fa fa-check"></i> Done!</button></li>
</ul>
</div>
</div>
</div>
</div>
<!-- hotel search -->
<div class="bhoechie-tab-content">
<center>
<h1 class="glyphicon glyphicon-home" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">Office 365</h3>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<h1 class="glyphicon glyphicon-cutlery" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">SQL Server</h3>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<h1 class="glyphicon glyphicon-credit-card" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">Microsoft Azure</h3>
</center>
</div>
<div class="bhoechie-tab-content">
<center>
<h1 class="glyphicon glyphicon-credit-card" style="font-size:12em;color:#55518a"></h1>
<h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2>
<h3 style="margin-top: 0;color:#55518a">Development Paths</h3>
</center>
</div>
</div>
</div>
</div>
</div>
/* bhoechie tab */
div.bhoechie-tab-container{
z-index: 10;
background-color: #ffffff;
padding: 0 !important;
border-radius: 4px;
-moz-border-radius: 4px;
border:1px solid #ddd;
margin-top: 20px;
margin-left: 50px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
}
div.bhoechie-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
a.list-group-item {
color: #939393;
}
div.bhoechie-tab-menu div.list-group{
margin-bottom: 0;
}
div.list-group h3{
color: #fff;
font-size: 50px;
margin: 0 24px;
font-weight: 300;
}
div.bhoechie-tab-menu div.list-group>a{
margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a.windows .glyphicon,
div.bhoechie-tab-menu div.list-group>a.windows .fa-windows {
color: rgb(0,126,185);
}
div.bhoechie-tab-menu div.list-group>a.windows-server .glyphicon,
div.bhoechie-tab-menu div.list-group>a.windows-server .fa {
color: rgb(43, 51, 133);
}
div.bhoechie-tab-menu div.list-group>a.office365 .glyphicon,
div.bhoechie-tab-menu div.list-group>a.office365 .fa {
color: rgb(229,126,0);
}
div.bhoechie-tab-menu div.list-group>a.sql .glyphicon,
div.bhoechie-tab-menu div.list-group>a.sql .fa {
color: rgb(196,71,69);
}
div.bhoechie-tab-menu div.list-group>a.azure .glyphicon,
div.bhoechie-tab-menu div.list-group>a.azure .fa {
color: rgb(0,156,216);
}
div.bhoechie-tab-menu div.list-group>a.dev .glyphicon,
div.bhoechie-tab-menu div.list-group>a.dev .fa {
color: rgb(96,47,149);
}
div.bhoechie-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
}
/*div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
background-color: #1980CF;
background-image: #1980CF;
color: #ffffff;
}*/
div.bhoechie-tab-menu div.list-group>a.windows.active,
div.bhoechie-tab-menu div.list-group>a.windows.active.glyphicon,
div.bhoechie-tab-menu div.list-group>a.windows.active .fa{
background-color: rgb(0,126,185);
background-image: rgb(0,126,185);
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.windows-server.active,
div.bhoechie-tab-menu div.list-group>a.windows-server.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.windows-server.active .fa{
background-color: rgb(38,45,119);
background-image: rgb(38,45,119);
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.office365.active,
div.bhoechie-tab-menu div.list-group>a.office365.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.office365.active .fa{
background-color: rgb(255,140,0);
background-image: rgb(255,140,0);
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.sql.active,
div.bhoechie-tab-menu div.list-group>a.sql.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.sql.active .fa{
background-color: rgb(196,71,69);
background-image: rgb(196,71,69);
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.azure.active,
div.bhoechie-tab-menu div.list-group>a.azure.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.azure.active .fa{
background-color: rgb(1,174,240);
background-image: rgb(1,174,240);
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.dev.active,
div.bhoechie-tab-menu div.list-group>a.dev.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.dev.active .fa{
background-color: rgb(96,47,149);
background-image: rgb(96,47,149);
color: #ffffff;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #1980CF; /*Right arrow*/
}
div.bhoechie-tab-menu div.list-group>a.windows.active:after{
border-left: 10px solid rgb(0,126,185); /*Right arrow*/
}
div.bhoechie-tab-menu div.list-group>a.windows-server.active:after{
border-left: 10px solid rgb(38,45,119); /*Right arrow*/
}
div.bhoechie-tab-menu div.list-group>a.office365.active:after{
border-left: 10px solid rgb(255,140,0); /*Right arrow*/
}
div.bhoechie-tab-menu div.list-group>a.sql.active:after{
border-left: 10px solid rgb(196,71,69); /*Right arrow*/
}
div.bhoechie-tab-menu div.list-group>a.azure.active:after{
border-left: 10px solid rgb(0,156,216); /*Right arrow*/
}
div.bhoechie-tab-menu div.list-group>a.dev.active:after{
border-left: 10px solid rgb(96,47,149); /*Right arrow*/
}
div.bhoechie-tab-content{
background-color: #ffffff;
/* border: 1px solid #eeeeee; */
padding-left: 20px;
padding-top: 10px;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}
/*Process*/
.process-step .btn:focus{outline:none}
.process{display:table;width:100%;position:relative}
.process-row{display:table-row}
.process-step button[disabled]{opacity:1 !important;filter: alpha(opacity=100) !important}
.process-row:before{top:40px;bottom:0;position:absolute;content:" ";width:100%;height:1px;background-color:#ccc;z-order:0}
.process-step{display:table-cell;text-align:center;position:relative}
.process-step p{margin-top:4px}
.btn-circle{width:70px;height:70px;text-align:center;font-size:20px;border-radius:50%}
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
});
$(function(){
$('.btn-circle').on('click',function(){
$('.btn-circle.btn-info').removeClass('btn-info').addClass('btn-default');
$(this).addClass('btn-info').removeClass('btn-default').blur();
});
$('.next-step, .prev-step').on('click', function (e){
var $activeTab = $('.tab-pane.active');
$('.btn-circle.btn-info').removeClass('btn-info').addClass('btn-default');
if ( $(e.target).hasClass('next-step') )
{
var nextTab = $activeTab.next('.tab-pane').attr('id');
$('[href="#'+ nextTab +'"]').addClass('btn-info').removeClass('btn-default');
$('[href="#'+ nextTab +'"]').tab('show');
}
else
{
var prevTab = $activeTab.prev('.tab-pane').attr('id');
$('[href="#'+ prevTab +'"]').addClass('btn-info').removeClass('btn-default');
$('[href="#'+ prevTab +'"]').tab('show');
}
});
});
