Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Avinashullal

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<header id="header" role="banner">
    <div class="container">
        <div id="navbar" class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="navbar-brand" href="index.html">
                    
<img...

CSS

body {
    background: #e5e5e5;
    color: #999;
}
h1, h2, h3, h4, h5, h6 {
    color: #777;
    font-weight: 300;
}
a {
    color: #52b6ec;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}
.btn {
    font-weight: 300;
    border: 0;
}
.btn.btn-primary {
    background-color: #52b6ec;
}
.btn.btn-primary:hover, .btn.btn-primary.active {
    background-color: #1586c3;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
a:hover, a:focus {
    color: #80c9f1;
    text-decoration: none;
    outline: none;
}
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 99999;
}
.navbar-default {
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 0;
    padding: 0;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
    overflow: hidden;
}
.navbar-default .first a {
    border-radius: 0 0 0 5px;
}
.navbar-default .navbar-brand {
    margin-right: 50px;
    margin-left: 20px;
    width: 200px;
    height: 150px;
    background: url(../images/logo.png) no-repeat 0 50%;
}
.navbar-default .navbar-nav > li {
    margin-left: 1px;
}
.navbar-default .navbar-nav > li > a {
    padding: 30px 25px;
    font-size: 16px;
    line-height: 18px;
    color: #999;
}
.navbar-default .navbar-nav > li > a > i {
    display: inline-block;
}
.navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active:focus > a, .navbar-default .navbar-nav > li.active:hover > a, .navbar-default .navbar-nav > li:hover > a, .navbar-default .navbar-nav > li:focus > a, .navbar-default .navbar-nav > li.active > a:focus, .navbar-default .navbar-nav > li.active:focus > a:focus, .navbar-default .navbar-nav > li.active:hover > a:focus, .navbar-default .navbar-nav > li:hover > a:focus, .navbar-default .navbar-nav > li:focus > a:focus {
   ...

JavaScript

$(function () {
	    $('.navbar-nav > li').click(function (event) {
	        event.preventDefault();
	        var target = $(this).find('>a').prop('hash');
	        $('html, body').animate({
	            scrollTop: $(target).offset().top
	        }, 500);
	    });
	});