/* Everything but the jumbotron gets side spacing for mobile-first views */
.masthead,
.marketing,
.footer{
padding-left:15px;
padding-right:15px;
}
/* Custom page header */
.masthead{
border-bottom:1pxsolid#e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.mastheadh3{
margin-top:0;
margin-bottom:0;
line-height:40px;
padding-bottom:19px;
}
/* Custom container */
.container-narrow{
margin:0auto;
max-width:700px;
}
.container-narrow>hr{
margin:30px0;
}
/* Main marketing message and sign up button */
.jumbotron{
text-align:center;
}
.jumbotronh1{
font-size:72px;
line-height:1;
}
.jumbotron.btn{
font-size:21px;
padding:14px24px;
}
/* Supporting marketing content */
.marketing{
margin:40px0;
}
.marketingp+h4{
margin-top:28px;
}
/* Responsive: Portrait tablets and up */
@mediascreenand(min-width:768px){
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer{
padding-left:0;
padding-right:0;
}
/* Space out the masthead */
.masthead{
margin-bottom:30px;
}
}
</style>
</head>
<body>
<divclass="container-narrow">
<divclass="masthead">
<ulclass="nav nav-pills pull-right">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>
<h3class="muted">Project name</h3>
</div>
<divclass="jumbotron">
<h1>Super awesome marketing speak!</h1>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><aclass="btn btn-large btn-success"href="#">Sign up today</a></p>
</div>
<divclass="row marketing">
<divclass="span6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<divclass="span6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
/* Everything but the jumbotron gets side spacing for mobile-first views */
.masthead,
.marketing,
.footer{
padding-left:15px;
padding-right:15px;
}
/* Custom page header */
.masthead{
border-bottom:1pxsolid#e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.mastheadh3{
margin-top:0;
margin-bottom:0;
line-height:40px;
padding-bottom:19px;
}
/* Custom container */
.container-narrow{
margin:0auto;
max-width:700px;
}
.container-narrow>hr{
margin:30px0;
}
/* Main marketing message and sign up button */
.jumbotron{
text-align:center;
}
.jumbotronh1{
font-size:72px;
line-height:1;
}
.jumbotron.btn{
font-size:21px;
padding:14px24px;
}
/* Supporting marketing content */
.marketing{
margin:40px0;
}
.marketingp+h4{
margin-top:28px;
}
/* Responsive: Portrait tablets and up */
@mediascreenand(min-width:768px){
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer{
padding-left:0;
padding-right:0;
}
/* Space out the masthead */
.masthead{
margin-bottom:30px;
}
}
</style>
<divclass="container-narrow">
<divclass="masthead">
<ulclass="nav nav-pills pull-right">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
</ul>
<h3class="muted">Project name</h3>
</div>
<divclass="jumbotron">
<h1>Super awesome marketing speak!</h1>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><aclass="btn btn-large btn-success"href="#">Sign up today</a></p>
</div>
<divclass="row marketing">
<divclass="span6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<divclass="span6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<pclass="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to <ahref="./sticky-footer.html">the default sticky footer</a> minus the navbar.</p>
</div>
<divid="push"></div>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<divid="footer">
<divclass="container">
<pclass="muted credit">Example courtesy <ahref="http://martinbean.co.uk">Martin Bean</a> and <ahref="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
<pclass="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Back to <ahref="./sticky-footer.html">the default sticky footer</a> minus the navbar.</p>
</div>
<divid="push"></div>
</div>
<divid="footer">
<divclass="container">
<pclass="muted credit">Example courtesy <ahref="http://martinbean.co.uk">Martin Bean</a> and <ahref="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
