<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="container full-bg">
<header class="main-header">
<div class="row">
<div class="col-xs-12 col-sm-4" style="background:#285A8D; min-height:52px">
<!-- company name or logo -->
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="col-xs-12 col-sm-8" style="background:#CCCCCC; padding:0; margin:0px;">
<!-- Fixed navbar -->
<nav class="navbar navbar-default">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
</header>
<section>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<div class="row">
<div class="col-xs-12 col-sm-4 tower">
<h4 class="text-center header">Contact us</h4>
<p>Lorem ipsum dolor sit amet, suavitate philosophia eum id, sed id voluptua principes dignissim, ne verear aperiam eum. Nibh omnium legendos pri te. Mea labore accusamus an, doming conceptam eum ut. Te his sint eloquentiam. Pro simul iudico singulis ne.
Ei sed mazim ornatus honestatis. Eu erant putant appareat eum. Duo ubique commune petentium ea, in eam quas diceret periculis. Eu eum causae verterem explicari, graeci animal voluptatibus ne vim. Cum an case brute mentitum, cum facer affert suavitate no, ne mel eius viderer vulputate.
In solum imperdiet vis, ei mei mazim timeam gloriatur. Has eu nonumes disputando, nec no periculis euripidis. Ad facete iisque definitionem nam, usu ad idque scripta interpretaris. Nostro doctus efficiantur ius ea, sed in omittam intellegebat. Ut eum munere principes delicatissimi. Quas ridens explicari eos te.</p>
</div>
<div class="col-xs-12 col-sm-4 tower">
<div class="col-xs-12">
<form class="form-horizontal" method="post">
<fieldset>
<legend class="text-center header">Contact us</legend>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
<div class="col-md-8">
<input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
<div class="col-md-8">
<input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
<div class="col-md-8">
<textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, suavitate philosophia eum id, sed id voluptua principes dignissim, ne verear aperiam eum. Nibh omnium legendos pri te. Mea labore accusamus an, doming conceptam eum ut. Te his sint eloquentiam. Pro simul iudico singulis ne.
Ei sed mazim ornatus honestatis. Eu erant putant appareat eum. Duo ubique commune petentium ea, in eam quas diceret periculis. Eu eum causae verterem explicari, graeci animal voluptatibus ne vim. Cum an case brute mentitum, cum facer affert suavitate no, ne mel eius viderer vulputate.
In solum imperdiet vis, ei mei mazim timeam gloriatur. Has eu nonumes disputando, nec no periculis euripidis. Ad facete iisque definitionem nam, usu ad idque scripta interpretaris. Nostro doctus efficiantur ius ea, sed in omittam intellegebat. Ut eum munere principes delicatissimi. Quas ridens explicari eos te.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 tower">
<p>Lorem ipsum dolor sit amet, suavitate philosophia eum id, sed id voluptua principes dignissim, ne verear aperiam eum. Nibh omnium legendos pri te. Mea labore accusamus an, doming conceptam eum ut. Te his sint eloquentiam. Pro simul iudico singulis ne.
Ei sed mazim ornatus honestatis. Eu erant putant appareat eum. Duo ubique commune petentium ea, in eam quas diceret periculis. Eu eum causae verterem explicari, graeci animal voluptatibus ne vim. Cum an case brute mentitum, cum facer affert suavitate no, ne mel eius viderer vulputate.
In solum imperdiet vis, ei mei mazim timeam gloriatur. Has eu nonumes disputando, nec no periculis euripidis. Ad facete iisque definitionem nam, usu ad idque scripta interpretaris. Nostro doctus efficiantur ius ea, sed in omittam intellegebat. Ut eum munere principes delicatissimi. Quas ridens explicari eos te.</p>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
z-index:-1;
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
.main-header {
min-height:100%;
}
.navbar {
margin-bottom:0px;
}
.tower {
min-height:720px;
}
