<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<divclass="carousel-caption">
<aclass="btn btn-large btn-primary"href="#">Sign up today</a>
<h1>Example headline.</h1>
</div>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<aclass="btn btn-large btn-primary"href="#">Sign up today</a>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<pclass="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<h2class="featurette-heading">First featurette headling. <spanclass="muted">It'll blow your mind.</span></h2>
<pclass="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<h2class="featurette-heading">Oh yeah, it's that good. <spanclass="muted">See for yourself.</span></h2>
<pclass="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<h2class="featurette-heading">And lastly, this one. <spanclass="muted">Checkmate.</span></h2>
<!-- Three columns of text below the carousel -->
<pclass="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<h2class="featurette-heading">First featurette headling. <spanclass="muted">It'll blow your mind.</span></h2>
<pclass="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<h2class="featurette-heading">Oh yeah, it's that good. <spanclass="muted">See for yourself.</span></h2>
<pclass="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<h2class="featurette-heading">And lastly, this one. <spanclass="muted">Checkmate.</span></h2>
<pclass="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<hrclass="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<pclass="pull-right"><ahref="#">Back to top</a></p>
/* Make the masthead heading the same height as the navigation */
<style>
.mastheadh3{
/* Space out content a bit */
margin-top:0;
body{
margin-bottom:0;
padding-top:20px;
line-height:40px;
padding-bottom:20px;
padding-bottom:19px;
}
}
/* Everything but the jumbotron gets side spacing for mobile-first views */
/* Custom container */
.masthead,
.container-narrow{
.marketing,
margin:0auto;
.footer{
max-width:700px;
padding-left:15px;
}
padding-right:15px;
.container-narrow>hr{
}
margin:30px0;
}
/* Custom page header */
.masthead{
/* Main marketing message and sign up button */
border-bottom:1pxsolid#e5e5e5;
.jumbotron{
}
text-align:center;
/* Make the masthead heading the same height as the navigation */
}
.mastheadh3{
.jumbotronh1{
margin-top:0;
font-size:72px;
margin-bottom:0;
line-height:1;
line-height:40px;
}
padding-bottom:19px;
.jumbotron.btn{
}
font-size:21px;
padding:14px24px;
/* Custom container */
}
.container-narrow{
margin:0auto;
/* Supporting marketing content */
max-width:700px;
.marketing{
}
margin:40px0;
.container-narrow>hr{
}
margin:30px0;
.marketingp+h4{
}
margin-top:28px;
}
/* Main marketing message and sign up button */
.jumbotron{
/* Responsive: Portrait tablets and up */
text-align:center;
@mediascreenand(min-width:768px){
}
/* Remove the padding we set earlier */
.jumbotronh1{
.masthead,
font-size:72px;
.marketing,
line-height:1;
.footer{
}
padding-left:0;
.jumbotron.btn{
padding-right:0;
font-size:21px;
}
padding:14px24px;
/* Space out the masthead */
}
.masthead{
margin-bottom:30px;
/* Supporting marketing content */
}
.marketing{
}
margin:40px0;
</style>
}
.marketingp+h4{
margin-top:28px;
}
<divclass="container-narrow">
<divclass="masthead">
/* Responsive: Portrait tablets and up */
<ulclass="nav nav-pills pull-right">
@mediascreenand(min-width:768px){
<liclass="active"><ahref="#">Home</a></li>
/* Remove the padding we set earlier */
<li><ahref="#">About</a></li>
.masthead,
<li><ahref="#">Contact</a></li>
.marketing,
</ul>
.footer{
<h3class="muted">Project name</h3>
padding-left:0;
</div>
padding-right:0;
}
<divclass="jumbotron">
/* Space out the masthead */
<h1>Super awesome marketing speak!</h1>
.masthead{
<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>
margin-bottom:30px;
<p><aclass="btn btn-large btn-success"href="#">Sign up today</a></p>
}
</div>
}
</style>
<divclass="row marketing">
</head>
<divclass="span6">
<h4>Subheading</h4>
<body>
<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>
<divclass="container-narrow">
<divclass="masthead">
<h4>Subheading</h4>
<ulclass="nav nav-pills pull-right">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<liclass="active"><ahref="#">Home</a></li>
</div>
<li><ahref="#">About</a></li>
<li><ahref="#">Contact</a></li>
<divclass="span6">
</ul>
<h4>Subheading</h4>
<h3class="muted">Project name</h3>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
<h4>Subheading</h4>
<divclass="jumbotron">
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<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>
<h4>Subheading</h4>
<p><aclass="btn btn-large btn-success"href="#">Sign up today</a></p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
</div>
<divclass="row marketing">
<divclass="span6">
<hr>
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<!-- Main jumbotron for a primary marketing message or call to action -->
<divclass="container">
<divclass="jumbotron">
<h1>Hello, world!</h1>
<!-- Main jumbotron for a primary marketing message or call to action -->
<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>
<divclass="jumbotron">
<p><aclass="btn btn-primary btn-large">Learn more »</a></p>
<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>
<p><aclass="btn btn-primary btn-large">Learn more »</a></p>
</div>
<divclass="body-content">
<!-- Example row of columns -->
<divclass="row">
<divclass="span4">
<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>
<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>
<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>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<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>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<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.</p>
}
<p><aclass="btn btn-large btn-success"href="#">Get started today</a></p>
/* Make the nav on the same line */
</div>
}
</style>
<divclass="body-content">
</head>
<!-- Example row of columns -->
<body>
<divclass="row">
<divclass="span4">
<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>
<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>
<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.</p>
</div>
<p><aclass="btn btn-large btn-success"href="#">Get started today</a></p>
<divclass="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<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>
<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>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</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>
</div>
</div>
<divid="footer">
<!-- Begin page content -->
<divclass="container">
<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>
<divclass="page-header">
</div>
<h1>Sticky footer with fixed navbar</h1>
</div>
</div>
<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>
@@ -175,56 +175,56 @@ description: Overview of the project, its contents, and how to get started with
...
@@ -175,56 +175,56 @@ description: Overview of the project, its contents, and how to get started with
<pclass="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<pclass="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
