<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 id="wrap">
<header class="masthead">
<h1 class="text-center">Hello This is Smaple web.</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">
<div class="navbar-brand">Project Name</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#section1">Home</a></li>
<li><a href="#section2">About</a></li>
<li><a href="#section3">Services</a></li>
<li><a href="#section4">Location</a></li>
<li><a href="#section5">Contact</a></li>
<li>
<a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2" id="close-signin" onclick="changeClose()">Sign in</a>
</li>
</ul>
<div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse2">
<form class="navbar-form navbar-right form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="Email">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email" autofocus required />
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password" required />
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
</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>Home</h1>
</div>
<p class="lead text-center">
klads kajsdbac ;jbasdou . a;dsofn ;josdabn
</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>About</h1>
<hr>
<p>
bkjFW FUfu wevbakjdlsgf hr;eiog qir;hkadjshgfuia areu . tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor fkjewgrf riu we gn 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-xs-12">
<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-6">
<input class="form-control" name="email" placeholder="Email" type="text">
</div>
<div class="col-xs-6">
<input class="form-control" name="phone" placeholder="Phone" type="text">
</div>
</div>
<div class="row form-group">
<div class="col-xs-12">
<textarea class="form-control" placeholder="Comments"></textarea>
</div>
</div>
<div class="row form-group">
<div class="col-xs-12">
<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">
</div><!--/col-->
</div><!--/container-->
</div><!--/wrap-->
<div id="footer">
<div class="container">
</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;
}
#nav.affix-top {
background-color: #080808;
}
/* 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:#E4D736;
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;
}
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }
.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-nav.navbar-right .btn:not(.collapsed) {
background-color: rgb(111, 84, 153);
border-color: rgb(111, 84, 153);
color: rgb(255, 255, 255);
}
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
height: auto !important;
transition: transform 0.3s;
transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
@media screen and (max-width: 767px) {
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; }
.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
transform: translate(-100%,0px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
.navbar.navbar-default .nav-collapse.slide-down,
.navbar.navbar-inverse .nav-collapse.slide-down {
transform: translate(0px,-100%);
}
.navbar.navbar-default .nav-collapse.in.slide-down,
.navbar.navbar-inverse .nav-collapse.in.slide-down {
transform: translate(0px,0px);
}
}
$(document).ready(function() {
/* 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);
});
});
var i = 0;
function changeClose() {
if(i === 0) {
document.getElementById("close-signin").innerHTML = "Close";
i = 1;
}
else {
document.getElementById("close-signin").innerHTML = "Sign in";
i = 0;
}
}