"Pixel - back to top"
Bootstrap 3.0.3 Snippet by andrewbsc

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <div class="container"> <div class="row"> <div class="col-sm-6"> <h1><a href="#" title="Bootstrap Template">Happy Scroll</a> <p class="lead">{A Bootstrap Template}</p></h1> </div> <div class="col-sm-6"> <div class="pull-right hidden-xs"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><h3><i class="glyphicon glyphicon-cog"></i></h3></a> <ul class="dropdown-menu"> <li><a href="#"><i class="glyphicon glyphicon-chevron-right"></i> Link</a></li> <li><a href="#"><i class="glyphicon glyphicon-user"></i> Link</a></li> <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Link</a></li> <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Link</a></li> </ul> </div> </div> </div> </div> </header> <!-- Fixed navbar --> <div class="navbar navbar-custom 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 nav-justified"> <li><a href="#">Home</a></li> <li><a href="#section2">Product</a></li> <li><a href="#section3">News</a></li> <li class="active"><a href="#section1"><strong>Big Brand</strong></a></li> <li><a href="#section4">About</a></li> <li><a href="#section5">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </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>Sticky Footer with Fly-in Navbar</h1> </div> <p class="lead text-center"> Twitter Bootstrap is a front-end toolkit to rapidly build web applications. </p> <p class="text-center"> Bootstrap is a framework that uses some of the latest browser techniques to provide you with stylish typography, navigation, buttons, tables, etc. One of the primary changes in Bootstrap 3 is an emphasis on Mobile-First responsive design. The goal is to elevate the mobile experience to a first-class citizen of the design process, because several billion mobile users is quite a large market to tap into. So, sites built with the current Bootstrap version target mobile devices and scale for larger screens depending on screen size. </p> </div> </div> <div class="divider" id="section2"></div> <section class="bg-1"> <div class="col-sm-6 col-sm-offset-3 text-center"><h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Try and Tweak Different Layouts</h2></div> </section> <div class="divider"></div> <div class="container" id="section3"> <div class="col-sm-8 col-sm-offset-2 text-center"> <h1>Mobile-first + Responsive</h1> <p> Instead of creating a unique version of the webpage for each desktop, mobile & tablet, you can now create one design that works on all devices, browsers & resolutions. Your designs will be future ready when a new table or phone size comes in the market, your designs will adapt itself and fit to the new screen size. </p> <hr> <img src="/assets/example/bg_smartphones.jpg" class="img-responsive"> <hr> </div><!--/col--> </div><!--/container--> <div class="divider"></div> <section class="bg-3" id="section4"> <div class="col-sm-6 col-sm-offset-3 text-center"><h2 style="padding:20px;background-color:rgba(5,5,5,.8)">Leverage Snippets & Examples</h2></div> </section> <div class="continer bg-4"> <div class="row"> <div class="col-sm-4 col-xs-6"> <div class="panel panel-default"> <div><img src="//placehold.it/450X250/565656/eee" class="img-responsive"></div> <div class="panel-body"> <p class="lead">Hacker News</p> <p>120k Followers, 900 Posts</p> <p> <img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" height="28px" width="28px"> </p> </div> </div><!--/panel--> </div><!--/col--> <div class="col-sm-4 col-xs-6"> <div class="panel panel-default"> <div class="panel-thumbnail"><img src="//placehold.it/450X250/ffcc33/444" class="img-responsive"></div> <div class="panel-body"> <p class="lead">Bootstrap Templates</p> <p>902 Followers, 88 Posts</p> <p> <img src="https://lh5.googleusercontent.com/-AQznZjgfM3E/AAAAAAAAAAI/AAAAAAAAABA/WEPOnkQS_20/s28-c-k-no/photo.jpg" height="28px" width="28px"> </p> </div> </div><!--/panel--> </div><!--/col--> <div class="col-sm-4 col-xs-6"> <div class="panel panel-default"> <div class="panel-thumbnail"><img src="//placehold.it/450X250/f16251/444" class="img-responsive"></div> <div class="panel-body"> <p class="lead">Social Media</p> <p>19k Followers, 789 Posts</p> <p> <img src="https://lh4.googleusercontent.com/-eSs1F2O7N1A/AAAAAAAAAAI/AAAAAAAAAAA/caHwQFv2RqI/s28-c-k-no/photo.jpg" height="28px" width="28px"> <img src="https://lh4.googleusercontent.com/-9Yw2jNffJlE/AAAAAAAAAAI/AAAAAAAAAAA/u3WcFXvK-g8/s28-c-k-no/photo.jpg" height="28px" width="28px"> </p> </div> </div><!--/panel--> </div><!--/col--> </div><!--/row--> </div><!--/container--> <div class="divider" id="section5"></div> <div class="row"> <h1 class="text-center">Where In The World?</h1> <div id="map-canvas"></div> <hr> <div class="col-sm-8"> <div class="row form-group"> <div class="col-xs-3"> <input class="form-control" id="firstName" name="firstName" placeholder="First Name" required="" type="text"> </div> <div class="col-xs-3"> <input class="form-control" id="middleName" name="firstName" placeholder="Middle Name" required="" type="text"> </div> <div class="col-xs-4"> <input class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="" type="text"> </div> </div> <div class="row form-group"> <div class="col-xs-5"> <input class="form-control" name="email" placeholder="Email" required="" type="email"> </div> <div class="col-xs-5"> <input class="form-control" name="phone" placeholder="Phone" required="" type="email"> </div> </div> <div class="row form-group"> <div class="col-xs-10"> <input class="form-control" placeholder="Website URL" required="" type="homepage"> </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 class="col-sm-3 pull-right"> <address> <strong>Iatek, LLC.</strong><br> 795 Folsom Ave, Suite 600<br> Newport, RI 94107<br> P: (123) 456-7890 </address> <address> <strong>Email Us</strong><br> <a href="mailto:#">first.last@example.com</a> </address> </div> </div><!--/row--> <div class="container"> <div class="col-sm-8 col-sm-offset-2 text-center"> <h2>Beautiful Bootstrap Templates</h2> <hr> <h4> We love templates. We love Bootstrap. </h4> <p>Get more free templates like this at the <a href="http://bootply.com">Bootstrap Playground</a>, Bootply.</p> <hr> <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">This Bootstrap Example courtesy <a href="http://www.bootply.com">Bootply.com</a></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>
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700); html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ -webkit-font-smoothing: antialiased; font: normal 14px arial,sans-serif; } .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; margin-top:50px; padding-top:20px; padding-bottom:20px; } /* Custom page CSS -------------------------------------------------- */ #wrap > .container { padding: 60px 15px 0; } .container .credit { margin: 20px 0; } #footer { background-color:#414141; } #footer a { color:#efefef; } h1,h2,h3,h4 { font-family: 'Kreon', serif; vertical-align:middle; } header { background: #f16251; height:550px; color:#000000; } header h1,header h2,header h3 a,header a,header a:hover { color:#101010; font-weight:800; text-decoration:none; } header h3 { font-family: 'Kreon', serif; background: #ffcc33; padding:10px; border-radius:3px; font-size:34px; padding:12px 10px 6px 10px; } header .dropdown-menu { top:74px; background: #ffcc33; border-width:0; } h1 { font-size:50px; } #nav { width: 100%; position:static; top:-32px; } #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; } /* customize nav style */ .navbar-custom { background-color: #2e2e2e; font-weight:700; text-transform:uppercase; border-width:0; } .navbar-custom .navbar-nav>li>a { color: #ddd; } .navbar-custom .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a { background-color: #000; } .navbar-custom .dropdown-menu{ right:0; } .navbar-custom .navbar-nav>.dropdown>a .caret { border-top-color: #999; border-bottom-color: #999; } .navbar-collapse.in { /*3.0.2 bug workaround*/ overflow-y: visible; } .navbar-toggle { outline:0; } .divider { height:100px; } .panel { border-width:0; } @media (max-width: 768px) { header { height: 95px; } } #map-canvas { width: 100%; height: 300px; margin: 0; padding: 15px; } .scroll-top { position:fixed; bottom:0; right:6%; z-index:100; background: #ffcc33; 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; } .bg-1 { background: url('http://www.bootply.com/assets/example/bg_4.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bg-2 { background: url('http://www.bootply.com/assets/example/bg_5.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bg-3 { background: url('http://www.bootply.com/assets/example/bg_6.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bg-4 { padding-top:30px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,0.2)),to(rgba(255,255,255,0)), color-stop(1,#000)); }
/* 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+20; $('body,html').animate({scrollTop:posi},700); }) /* google maps */ // enable the visual refresh google.maps.visualRefresh = true; var map; function initialize() { var mapOptions = { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: 'Location found using HTML5.' }); map.setCenter(pos); }, function() { handleNoGeolocation(true); }); } else { // browser doesn't support geolocation handleNoGeolocation(false); } } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = 'Error: The Geolocation service failed.'; } else { var content = 'Error: Your browser doesn\'t support geolocation.'; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } google.maps.event.addDomListener(window, 'load', initialize);

Related: See More


Questions / Comments: