<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 ---------->
<div class="container">
<br>
<div class="row-fluid">
<div class="span10 offsetHalf">
<i class="icon-screenshot icon-5x" style="color:#ee1111;"></i>
</div>
</div>
<br><br><br>
<div class="row-fluid">
<h1 class="pull-center"><strong>BOOTSTRAP FIXED BACKGROUND</strong></h1>
<p class="lead pull-center">A scrolling one page example layout</p>
</div>
<br><br><br><br>
<div class="row-fluid">
<div class="span5 offsetHalf block">
<div class="pull-center">
<h1>Responsive Design</h1>
Take a look at what we mixed up in our Bootstrap test labs.
Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. <br>
<h1><i class="icon-beaker icon-4x"></i></h1>
<button class="btn btn-primary btn-flat">Go Here<i class="pull-right icon-chevron-right icon-large"></i></button>
</div>
</div>
<div class="span5 block">
<div class="pull-center">
<h1>2013 Trends</h1>
With all of the front-end frameworks at hand, why does Bootstrap lead?
Aliquam mauris arcu, tristique a, condimentum feugiat justo.<br>
<h1><i class="icon-fire icon-4x"></i></h1>
<button class="btn btn-primary btn-flat">Go There<i class="pull-right icon-chevron-right icon-large"></i></button>
</div>
</div>
</div>
<br><br><br>
<div class="row-fluid">
<h3 class="pull-center">Featuring</h3>
</div>
<br><br>
<div class="row-fluid">
<div class="span12">
<div class="span3 block block-sm offsetHalf1">
<h2>Build</h2>
Bootply is a playground for Twitter Bootstrap.
</div>
<div class="span3 block block-sm">
<h2>Design</h2>
Use Bootply to design, prototype, extend the Bootstrap framework.
</div>
<div class="span3 block block-sm">
<h2>Test</h2>
Use Bootply to test and debud Bootstrap designs.
</div>
</div>
</div>
</div><!---/cont---->
<br><br>
<h4 class="pull-center">A Mini Carousel</h4>
<br><br>
<div class="container">
<!-- Slider -->
<div class="row-fluid">
<div class="span9 offsetHalf1" id="slider">
<!-- Top part of the slider -->
<div class="row-fluid">
<div id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0"><img class="img-rounded" src="http://lorempixel.com/300/250"></div>
<div class="item" data-slide-number="1"><img class="img-rounded" src="http://lorempixel.com/300/250/technics/1"></div>
<div class="item" data-slide-number="2"><img class="img-rounded" src="http://lorempixel.com/300/250/business/1"></div>
<div class="item" data-slide-number="3"><img class="img-rounded" src="http://lorempixel.com/300/250/city"></div>
<div class="item" data-slide-number="4"><img class="img-rounded" src="http://lorempixel.com/300/250/city/1"></div>
<div class="item" data-slide-number="5"><img class="img-rounded" src="http://lorempixel.com/300/250"></div>
</div>
</div>
<!-- Carousel nav -->
<div class="carousel-controls-mini">
<a href="#myCarousel" data-slide="prev">‹</a>
<a href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="span4" id="carousel-text"></div>
<div style="display:none;" id="slide-content">
<div id="slide-content-0">
<h5>Slide One</h5>
<p>This is mini slider / carousel with Bootstrap. Blah blah, blah, blah blah. Lorem dolor?</p>
<small>October 13 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-1">
<h5>Slide Two</h5>
<p>Mini carousel with Bootstrap</p>
<small>October 15 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-2">
<h5>Slider Three</h5>
<p>Facebook-style paged image slider</p>
<small>October 19 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-3">
<h5>Slider Four</h5>
<p>Lorem Ipsum Dolor</p>
<small>October 22 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-4">
<h5>Slider Five</h5>
<p>Lorem Ipsum Dolor</p>
<small>October 25 2013 - <a href="#">Read more</a></small>
</div>
<div id="slide-content-5">
<h5>Slider Six</h5>
<p>Lorem Ipsum Dolor</p>
<p class="sub-text">October 24 2012 - <a href="#">Read more</a></p>
</div>
</div>
</div>
</div>
</div> <!--/Slider-->
<br>
<br>
<br>
<div class="row-fluid hidden-phone" id="slider-thumbs">
<div class="span12">
<!-- Bottom switcher of slider -->
<ul class="thumbnails">
<li class="span2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five">
</a>
</li>
<li class="span2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six">
</a>
</li>
</ul>
</div>
</div>
<br><br>
<div class="row-fluid">
<a href="#" title="Bootstrap playground">Play with this on Bootply</a>
<div class="pull-right">
<a href="#"><i class="icon-facebook icon-3x"></i> </a>
<a href="#"><i class="icon-twitter icon-3x"></i></a>
<a href="#"><i class="icon-pinterest icon-3x"></i></a>
</div>
</div>
<br><br>
</div>
@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300');
body {
background: url('http://s.bootply.com/assets/64531/green_suburb.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#fff;
background-color:#333;
font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
}
a:link, a:visited {
color:#eee;
}
.block {
background-color:rgba(0,0,0,0.2);
height:370px;
padding-left:12px;
padding-right:12px;
}
.block-sm {
height:180px;
}
.btn-flat {
font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
border-radius:0px;
border-width:0;
background-image:none;
padding:16px;
margin:0 auto;
margin-top:15px;
width:70%;
font-size:20pt;
}
/* mini carousel */
.carousel-inner img {
width:100%;
height:100%;
}
#myCarousel {
font-size:90%;
}
.carousel-controls-mini {
margin-left:42%;
}
.carousel-controls-mini > a {
border:1px solid #eee;
margin:1px;
width:20px;
display:block;
float:left;
text-align:center;
}
#carousel-bounding-box {
margin:0 auto;
width:300px;
}
