<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 ---------->
<div class="row" >
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem
ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum
dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum
dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum
dolor sit</small></a></li>
</ul>
</div>
<!-- End Carousel -->
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="page-header">
<h1>How Its Works</h1>
</div>
<div class="container">
<div class="row pricing">
<div class="col-md-6">
<div class="well">
<h3><b>Looking For An EMPLOYEE?</b></h3>
<hr>
<p><b>Create an employer account. It's easy.</b></p>
<hr>
<p><b>Choose yourindustry and Job Title</b></p>
<hr>
<p><b>Tell us the candidate you’re looking for.</b></p>
<hr>
<p><b>Tell us where you want your candidates delivered.</b></p>
<hr>
<p><b>Only pay when someone applies. No more waste.</b></p>
<hr>
<a href="#" class="btn btn-default btn-block">Post A job</a>
</div>
</div>
<div class="col-md-6">
<div class="well">
<h3><b>Looking For A JOB?</b></h3>
<hr>
<p><b>Create your account. It’s free.</b></p>
<hr>
<p><b>Join the millions of Job Seekers using JobHubLk.</b></p>
<hr>
<p><b>Tell us about yourself.</b></p>
<hr>
<p><b>Tell us how you want to learn about new job openings.</b></p>
<hr>
<p><b>One Click Apply to jobs anytime. Anywhere.</b></p>
<hr>
<a href="#" class="btn btn-default btn-block">JoinNow!</a>
</div>
</div>
</div>
</div>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/jquery-1.9.1.min.js"></script>
/*Slider*/
#myCarousel .nav a small
{
display: block;
}
#myCarousel .nav
{
background: #eee;
}
.nav-justified > li > a
{
border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }
/*Jumbotron*/
.jumbotron{
margin-bottom:20px;
margin-top:20px;
position:center;
}
.pricing {
text-align: center;
}
/*Page Header*/
.page-header{
text-align:center;
}
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function () {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function (e) {
if (!clickEvent) {
var count = $('.nav').children().length - 1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if (count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
