<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">
<div class="col-xs-12">
<div class="page-header">
<h3>Today's story</h3>
<p>January 2, 2017</p>
</div>
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://www.afghanlive.tv/wp-content/uploads/2014/09/tolo_news.png" alt=""></a>
</div>
<div class="caption">
<h4>New News</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://thebottomlinenews.com/wp-content/uploads/2016/05/Community-News-360x240.jpg" alt=""></a>
</div>
<div class="caption">
<h4>Beaking News</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://s.hswstatic.com/gif/24-hour-news-society-1.jpg" alt=""></a>
</div>
<div class="caption">
<h4>24 Hrs News</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="https://i2.wp.com/neurosciencenews.com/files/2016/12/lrk2-parkinsons-neurosciencenews-public.jpg?resize=360%2C240" alt=""></a>
</div>
<div class="caption">
<h4>New Technology</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide1 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://www.ainonline.com/sites/default/files/styles/ain30_listing_thumb/public/uploads/2017/01/maxviewkit.jpg?itok=BH0L_1AI" alt=""></a>
</div>
<div class="caption">
<h4>Heli. landed in Mountain</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://www.space.com/images/i/000/042/469/original/india-mars-orbiter-mars-dust-storm-photo.jpg?interpolation=lanczos-none&fit=around%7C360:240&crop=360:240;*,*" alt=""></a>
</div>
<div class="caption">
<h4>News from Mars</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://www.ainonline.com/sites/default/files/styles/ain30_listing_thumb/public/uploads/2017/02/2-2017-4_leonardo_aw101_from_website.jpg?itok=woIIt5TI" alt=""></a>
</div>
<div class="caption">
<h4>New Equipment for Navy</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://www.kia.com/content/dam/kwcms/au/en/images/news/Kia-Stinger-EyesOnDesign-award-newsthumbnail.jpg" alt=""></a>
</div>
<div class="caption">
<h4>New Car Release</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide2 -->
<div class="item">
<ul class="thumbnails">
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://www.roguevalleymessenger.com/wp-content/uploads/2017/01/04.02.NEWS2_-1-360x240.jpg" alt=""></a>
</div>
<div class="caption">
<h4>Retire Bus</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://theheureka.com/wp-content/uploads/2017/02/fly-drones-flying-camera-360x240.jpg" alt=""></a>
</div>
<div class="caption">
<h4>New Drones Coming Out</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="http://www.wilo.com/fileadmin/_processed_/csm_WILO1108_Showerhead_0b733e141b.gif" alt=""></a>
</div>
<div class="caption">
<h4>Did You Save Water Today?</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
<li class="col-sm-3">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="https://www.commentarymagazine.com/wp-content/uploads/2017/02/iceberg-360x240.jpg" alt=""></a>
</div>
<div class="caption">
<h4>The South Pole Trip</h4>
<p>Click for more information</p>
<a class="btn btn-mini" href="#">» Read More</a>
</div>
</div>
</li>
</ul>
</div><!-- /Slide3 -->
</div>
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
/* Global */
img { max-width:100%; }
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
opacity: 0.6;
text-decoration: none;
}
body{
border-top:0;
background:#c4e17f;
background-image:-webkit-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-moz-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:-o-linear-gradient(left,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4);background-image:linear-gradient(to right,#c4e17f,#c4e17f 12.5%,#f7fdca 12.5%,#f7fdca 25%,#fecf71 25%,#fecf71 37.5%,#f0776c 37.5%,#f0776c 50%,#db9dbe 50%,#db9dbe 62.5%,#c49cde 62.5%,#c49cde 75%,#669ae1 75%,#669ae1 87.5%,#62c2e4 87.5%,#62c2e4)
}
.thumbnails li> .fff .caption {
background:#fff !important;
padding:10px
}
/* Page Header */
.page-header {
background: #f9f9f9;
margin: -30px -40px 40px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #999;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #000;
}
ul.thumbnails {
margin-bottom: 0px;
}
/* Thumbnail Box */
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
/* Carousel Control */
.control-box {
text-align: right;
width: 100%;
}
.carousel-control{
background: #666;
border: 0px;
border-radius: 0px;
display: inline-block;
font-size: 34px;
font-weight: 200;
line-height: 18px;
opacity: 0.5;
padding: 4px 10px 0px;
position: static;
height: 30px;
width: 15px;
}
/* Mobile Only */
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
li { list-style-type:none;}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
})
});
