"v4 - Article Cards (2)"
Bootstrap 3.3.0 Snippet by explotter

<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(); });

Related: See More


Questions / Comments: