<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-lg-8 no-gutters" style="background:lime">
<div id="headlineCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/1920x1080" alt="" class="thumb">
</a>
<div class="block-title">
<div class="category1">Americas</div>
<h2>Lorem ipsum dolor asit amet</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet nisi sit amet lectus mollis, non vestibulum diam porttitor posuere.</h4>
</div>
</div>
</div>
<div class="item">
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/1920x1080" alt="" class="thumb">
</a>
<div class="block-title">
<div class="category1">Americas</div>
<h2>Lorem ipsum dolor asit amet</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet nisi sit amet lectus mollis, non vestibulum diam porttitor posuere.</h4>
</div>
</div>
</div>
<div class="item">
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/1920x1080" alt="" class="thumb">
</a>
<div class="block-title">
<div class="category1">Americas</div>
<h2>Lorem ipsum dolor asit amet</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet nisi sit amet lectus mollis, non vestibulum diam porttitor posuere.</h4>
</div>
</div>
</div>
<div class="item">
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/1920x1080" alt="" class="thumb">
</a>
<div class="block-title">
<div class="category1">Americas</div>
<h2>Lorem ipsum dolor asit amet</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet nisi sit amet lectus mollis, non vestibulum diam porttitor posuere.</h4>
</div>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#headlineCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#headlineCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="col-lg-4 no-gutters" style="background:orange;height:439px;">
<ul class="nav nav-pills nav-justified" data-target="#headlineCarousel">
<li data-target="#headlineCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a>
</li>
<li data-target="#headlineCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a>
</li>
<li data-target="#headlineCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a>
</li>
<li data-target="#headlineCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a>
</li>
</ul>
</div>
<div class="col-xs-12">
<!-- Carousel indicators -->
<ol class="carousel-indicators" data-target="#headlineCarousel">
<li data-target="#headlineCarousel" data-slide-to="0" class="active"></li>
<li data-target="#headlineCarousel" data-slide-to="1"></li>
<li data-target="#headlineCarousel" data-slide-to="2"></li>
<li data-target="#headlineCarousel" data-slide-to="3"></li>
</ol>
</div>
</div>
<div class="container">
<div class="row">
<hr/>
</div>
<div class="row hide">
<div class="col-lg-8 no-gutters" style="background:lime">
<!-- artigo em destaque -->
<div class="featured-article">
<a href="#">
<img src="http://placehold.it/1920x1080" alt="" class="thumb">
</a>
<div class="block-title">
<div class="category1">Americas</div>
<h2>Lorem ipsum dolor asit amet</h2>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet nisi sit amet lectus mollis, non vestibulum diam porttitor posuere.</h4>
</div>
</div>
<!-- /.featured-article -->
</div>
<div class="col-lg-4 no-gutters" style="background:orange;height:439px;display:table;">
<ul class="media-list" style="display:table-cell;vertical-align:middle;padding:30px">
<li>
<div>Featured</div>
</li>
<li>
<div>
<div class="category1">Americas</div>
<div class="timing">49 MINUTES AGO</div>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at nullam.</h5>
</div>
</li>
<li>
<div>
<div class="category1">Americas</div>
<div class="timing">49 MINUTES AGO</div>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at nullam.</h5>
</div>
</li>
<li>
<div>
<div class="category1">Americas</div>
<div class="timing">49 MINUTES AGO</div>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at nullam.</h5>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="container hide">
<div class="row">
<hr/>
</div>
</div>
<div class="container hide">
<div class="row">
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit ame</p>
</div>
</div>
<div class="col-xs-6">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">51 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit ame</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">51 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">51 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">51 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit ame</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">51 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit ame</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<a class="boxlink" href="#"></a>
<span class="video"></span>
<div class="indiv">
<div class="caption">
<p>Lorem ipsum dolor sit ame</p>
</div>
<div class="time">51 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="indiv">
<div class="time">50 MINUTES AGO</div>
<div class="category">Americas</div>
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit ame</p>
</div>
</div>
</div>
<div class="row" STYLE="DISPLAY:NONE">
<div class="col-xs-4">
<div class="thumbnail">
<div class="time">49 MINUTES AGO</div>
<div class="category">Americas</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit ame</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="time">49 MINUTES AGO</div>
<div class="category">Americas</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="time">49 MINUTES AGO</div>
<div class="category">Americas</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="time">49 MINUTES AGO</div>
<div class="category">Americas</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="time">49 MINUTES AGO</div>
<div class="category">Americas</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="caption">
<h4>Product title</h4>
<p>na aliquam erat volutpat.</p>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<div class="time">49 MINUTES AGO</div>
<div class="category">Americas</div>
<img class="img-responsive" src="http://placehold.it/1920x1080/000/fff" alt="" />
</div>
<div class="caption">
<h4>Product title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">RIGHT COLUMN</div>
</div>
</div>
.hide {
display:none;
}
ol.carousel-indicators {
border:1px solid red !important;
background:blue;
}
/* image thumbnail */
.thumbnail .indiv {
background: rgba(255,0,0,.5);
position: absolute;
bottom: 0;
width: 100%;
}
span.video {
width: 100%;
height: 100%;
position: absolute;
background: url("https://douglasgreen.com/demo/responsive-video-play-button/img/play-btn.png") no-repeat;
background-position: 50% 50%;
background-size: 300%;
border:1px solid red;
z-index:0;
}
.boxlink {
display: block;
position: absolute;
height: 100%;
width: 100%;
z-index:1;
}
.time {
background:tomato;
display:inline-block;
}
.thumbnail {
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
position:relative;
}
.thumb {
display: block;
width: 100%;
margin: 0;
}
.timing {
display:inline-block;
}
.category1 {
border-radius:4px;
background:turquoise;
display:inline-block;
}
.category {
border-radius:4px;
background:turquoise;
display:inline-block;
padding: 2px 4px;
float:right;
}
.featured-article .block-title {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
border: 1px solid tomato;
padding: .5em;
width: 100%;
color: #fff;
}
.media-list li {
padding: 1.1em 0;
border-bottom: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
}
.no-gutters {
padding-left:0;
padding-right:0;
}
#headlineCarousel .nav a small {
display:block;
}
#headlineCarousel .nav {
background:#eee;
}
#headlineCarousel .nav a {
border-radius:0px;
}
$(document).ready( function() {
function initCarouselIndicators() {
$(".carousel-indicators[data-target]").each(function (i, indicators) {
var targetId = indicators.dataset.target;
if (targetId != "") {
var $carousel = $(targetId);
$carousel.bind('slide.bs.carousel', function (e) {
var $targetSlide = $(e.relatedTarget);
var index = $targetSlide.index();
$('.carousel-indicators2[data-target="' + targetId + '"] li').removeClass('active')
$('.carousel-indicators[data-target="' + targetId + '"] li:nth-child(' + (index + 1) + ')').addClass('active');
$('.nav-justified[data-target="' + targetId + '"] li').removeClass('active')
$('.nav-justified[data-target="' + targetId + '"] li:nth-child(' + (index + 1) + ')').addClass('active');
});
}
});
}
initCarouselIndicators();
});
