<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 ----------> <!-- Wrap all page content here --> <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="#">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> </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>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; } /* 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; }

$(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); }); });