<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 ---------->
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/bootswatch/2.3.0/amelia/bootstrap.min.css" rel="stylesheet">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
<form class="navbar-form pull-right">
<input name="textinput1" type="email" placeholder="Email" class="span2">
<input name="textinput2" type="password" placeholder="Password" class="span2">
<button class="btn">
Sign in
</button>
</form>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<div>
<h1>
Hello, world!
</h1>
<p>
This is a template for a simple marketing or informational website. It
includes a large callout called the hero unit and three supporting pieces
of content. Use it as a starting point to create something more unique.
</p>
</div>
<a class="btn btn-primary" href="#">
Learn more »
</a>
</div>
<div class="row">
<div class="span4">
<div>
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
odio dui.
</p>
</div>
<a class="btn" href="#">
View details »
</a>
</div>
<div class="span4">
<div>
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
odio dui.
</p>
</div>
<a class="btn" href="#">
View details »
</a>
</div>
<div class="span4">
<div>
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
odio dui.
</p>
</div>
<a class="btn" href="#">
View details »
</a>
</div>
</div>
<hr>
<div>
© Company 2012
</div>
</div>
html {
position: relative
}
html:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
@include background-size(1em);
@include background-image(linear-gradient(top, rgba(249,252,247,0) 92%,rgba(249,252,247,.2) 95%,rgba(249,252,247,.2) 99%,rgba(94,93,91,.2) 100%));
}
