<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<!-- Wrap all page content here -->
<div id="wrap">
<header class="masthead">
<h1 class="text-center">Hello Bootstrap 3.</h1>
</header>
<!-- Fly-in navbar -->
<div class="navbar navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#section2">Profile</a></li>
<li><a href="#section3">Projects</a></li>
<li><a href="#section4">Location</a></li>
<li><a href="#section5">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
<!-- Begin page content -->
<div class="divider" id="section1"></div>
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="page-header text-center">
<h1>Since 2013</h1>
</div>
<p class="lead text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<hr>
<div class="divider"></div>
</div>
</div>
<div class="divider"></div>
<section class="bg-1">
<div class="col-sm-6 col-sm-offset-3 text-center"></div>
</section>
<div class="divider" id="section2"></div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h1>Profile</h1>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</p>
<hr>
<div class="divider"></div>
</div><!--/col-->
</div><!--/container-->
<div class="divider"></div>
<section class="bg-3">
<div class="col-sm-6 col-sm-offset-3 text-center"><h2>Clients & Partners</h2></div>
</section>
<div class="divider" id="section3"></div>
<div class="bg-4">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/444/F8F8F8" class="img-responsive"></a></div>
<div class="panel-body">
<p>Renovations</p>
<p></p>
</div>
</div><!--/panel-->
</div><!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/454545/FFF" class="img-responsive"></a></div>
<div class="panel-body">
<p>Projects</p>
<p></p>
</div>
</div><!--/panel-->
</div><!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a href="#" title="Interiors"><img src="//placehold.it/600x400/555/F2F2F2" class="img-responsive"></a></div>
<div class="panel-body">
<p>Interiors</p>
<p></p>
</div>
</div><!--/panel-->
</div><!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/555/FFF" class="img-responsive"></a></div>
<div class="panel-body">
<p>Design</p>
<p></p>
</div>
</div><!--/panel-->
</div><!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/555/EEE" class="img-responsive"></a></div>
<div class="panel-body">
<p>Site Planning</p>
<p></p>
</div>
</div><!--/panel-->
</div><!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a href="#"><img src="//placehold.it/600x400/666/F4F4F4" class="img-responsive"></a></div>
<div class="panel-body">
<p>More</p>
<p></p>
</div>
</div><!--/panel-->
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->
</div>
<div class="divider" id="section4"></div>
<div class="row">
<div class="col-md-8 col-md-offset-1">
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h1>Location</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<hr>
</div><!--/row-->
<div class="divider" id="section5"></div>
<div class="row">
<hr>
<div class="col-sm-9 col-sm-offset-1">
<div class="row form-group">
<div class="col-md-12">
<h1>Contact Us</h1>
</div>
<div class="col-xs-4">
<input class="form-control" id="firstName" name="name" placeholder="Your Name" type="text">
</div>
<div class="col-xs-6">
<input class="form-control" id="organization" name="organization" placeholder="Company or Organization" type="text">
</div>
</div>
<div class="row form-group">
<div class="col-xs-5">
<input class="form-control" name="email" placeholder="Email" type="text">
</div>
<div class="col-xs-5">
<input class="form-control" name="phone" placeholder="Phone" type="text">
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<textarea class="form-control" placeholder="Comments"></textarea>
</div>
</div>
<div class="row form-group">
<div class="col-xs-10">
<button class="btn btn-default pull-right">Contact Us</button>
</div>
</div>
</div>
</div><!--/row-->
<div class="container">
<div class="col-sm-8 col-sm-offset-2 text-center">
<ul class="list-inline center-block">
<li><a href="http://facebook.com/bootply"><img src="/assets/example/soc_fb.png"></a></li>
<li><a href="http://twitter.com/bootply"><img src="/assets/example/soc_tw.png"></a></li>
<li><a href="http://google.com/+bootply"><img src="/assets/example/soc_gplus.png"></a></li>
<li><a href="http://pinterest.com/in1"><img src="/assets/example/soc_pin.png"></a></li>
</ul>
</div><!--/col-->
</div><!--/container-->
</div><!--/wrap-->
<div id="footer">
<div class="container">
<p class="text-muted">Copyright ©2014 ACME, Inc.</p>
</div>
</div>
<ul class="nav pull-right scroll-top">
<li><a href="#" title="Scroll to top"><i class="glyphicon glyphicon-chevron-up"></i></a></li>
</ul>
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div id="modalCarousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
html,
body {
height: 100%;
padding-top:50px;
}
.row {
margin-left:0px;
margin-right:0px;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
margin-top:50px;
padding-top:20px;
padding-bottom:20px;
}
header {
height:100%;
min-height:500px;
}
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer {
background-color:#414141;
}
#footer a {
color:#efefef;
}
#topNav {
z-index:-1;
}
#nav {
width: 100%;
}
#nav.affix-top {
position: absolute;
top:0;
left:0;
z-index:10;
height:54px;
background-color:transparent;
border:0;
}
#nav.affix {
position: fixed;
top: 0;
z-index:10;
-webkit-transition: all .6s ease-in-out;
}
#footer > .container {
}
@media (min-width: 767px) {
.navbar-nav.nav-justified > li{
float:none;
}
}
.navbar-nav {
margin: 1px 1px;
}
.navbar-toggle {
outline:0;
}
.divider {
height:50px;
}
.panel {
border-width:0;
}
@media (max-width: 768px) {
header {
}
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #f2f3f2;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
section {
color: #ffffff;
min-height: 400px;
height: auto !important;
height: 100%;
padding-top:100px;
}
/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},1000);
})
/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
var link = $(this).attr('href');
var posi = $(link).offset().top;
$('body,html').animate({scrollTop:posi},700);
});
