"Tri-Hero 2"
Bootstrap 3.3.0 Snippet by sparkktv

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="carousel slide-one" id="homepageHeroCarousel" style="touch-action: pan-y; -moz-user-select: none;">
<div class="carousel-wrapper">
<div class="slide">
<div class="slide-left">
<h6>Hot on Netflix</h6>
<h3><a href="https://media.netflix.com/en/only-on-netflix/188817">My Next Guest Needs No Introduction with David Letterman is now streaming</a></h3>
<p><a href="https://media.netflix.com/en/only-on-netflix/188817">Read More <i class="fa fa-angle-right"></i></a>
</p>
</div>
<div class="slide-right">
<a href="https://media.netflix.com/en/only-on-netflix/188817">
<img src="https://d2ygrtdi28m8fp.cloudfront.net/homepage/Homepage_Letterman_Obama_010918.jpg" alt="My Next Guest Needs No Introduction with David Letterman is now streaming">
</a>
</div>
</div>
<div class="slide">
<div class="slide-left">
<h6>Hot on Netflix</h6>
<h3><a href="https://media.netflix.com/en/only-on-netflix/81188">One Day at a Time premieres on January 26th</a></h3>
<p><a href="https://media.netflix.com/en/only-on-netflix/81188">Read More <i class="fa fa-angle-right"></i></a>
</p>
</div>
<div class="slide-right">
<a href="https://media.netflix.com/en/only-on-netflix/81188">
<img src="https://d2ygrtdi28m8fp.cloudfront.net/homepage/Homepage_ODAAT_S2_010918.jpg" alt="One Day at a Time premieres on January 26th">
</a>
</div>
</div>
<div class="slide">
<div class="slide-left">
<h6>Hot on Netflix</h6>
<h3><a href="https://media.netflix.com/en/only-on-netflix/183986">Altered Carbon premieres on February 2nd</a></h3>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.carousel {width: 100%;overflow: hidden;border-bottom: 3px solid #e50914;margin-bottom: 1rem;background: #221f1f;}
.carousel.slide-one .carousel-wrapper {margin-left: 0;}
.carousel .carousel-wrapper {display:flex;width: 300%;transition: all 0.65s 0s cubic-bezier(0.075, 0.82, 0.165, 1);}
.carousel .slide {width: 33.333333%;display: flex;box-align: center;flex-align: center;align-items: center;}
.carousel .slide-left {padding-left: 2em;padding-right: 1em;}
.carousel .slide-right {padding-left: 2em;padding-right: 1em;}
.carousel .slide-left, .carousel .slide-right {width: 50%;padding-top: 2em;padding-bottom: 2em;}
.carousel .slide h6 {color: #8c8c8c;margin-bottom: 10px;}
.carousel .slide h6, .carousel .slide p {font-size: 1.6em;font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 400;font-style: normal;margin: 0;margin-bottom: 0px;}
.carousel .slide h3 {font-size: 2.5em;font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 400;font-style: normal;margin: 0;margin-bottom: 0px;margin-bottom: 10px;}
.carousel .slide h3 a {text-decoration: none;color: #fff;}
.carousel .carousel-navigation {list-style: none;padding: 0;margin: 0 0 10px;display: flex;flex-line-pack: center;align-content: center;box-pack: center;flex-pack: center;justify-content: center;}
.carousel .carousel-navigation li.active {color: #e50914;}
.carousel .carousel-navigation li {color: rgba(255,255,255,0.2);margin-right: 10px;font-size: 1.5em;transition: color 0.25s 0s linear;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Responsive bs-carousel with hero headers
Hero Widgets

Questions / Comments: