<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);
