A Pen by Alan Wynn.
.relative {
position: relative;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
font-family: "Open Sans";
height: 300px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 300px;
background-color: #777;
background-image: url("http://yt.ajnergaard.co.uk/wp-content/uploads/2014/02/sliders-01.png");
background-position: center center;
background-repeat: none;
background-size: 100%;
background-size: cover;
}
.carousel .item .carousel-caption .mediumText {
line-height: 1;
font-size: 18px !important;
padding-top: 0;
}
.carousel .item .carousel-caption .bigText {
line-height: 1;
font-size: 40px !important;
position: relative;
padding-top: 5%;
padding-bottom: 0;
margin-bottom: -25px;
}
.carousel .item .carousel-caption .bigText.bigger {
font-size: 60px !important;
margin-bottom: 35px;
}
.carousel .item .carousel-caption .bigText p {
color: #ffffff;
}
.carousel .item .carousel-caption .bigText p:nth-of-type(1) {
margin-top: 10px;
}
.carousel .item .carousel-caption .bigText p:nth-of-type(2) {
color: #858585;
}
.carousel .item .carousel-caption .bigText p:nth-of-type(3) {
color: #f00;
}
.carousel .item .carousel-caption .bigText a.btn {
font-size: 20px;
float: right;
}
.carousel .item .carousel-caption blockquote {
border-left: none;
font-size: 40px;
top: 50%;
margin: 8% 0 0 0;
}
.carousel .item .carousel-caption blockquote footer {
color: #fff;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.carousel {
height: 300px;
}
.carousel .item {
height: 300px;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.carousel {
height: 400px;
}
.carousel .item {
height: 400px;
}
.carousel .item .carousel-caption .mediumText {
line-height: 1;
font-size: 22px !important;
padding-top: 5%;
}
.carousel .item .carousel-caption .bigText {
line-height: 1;
font-size: 60px !important;
position: relative;
padding-top: 0;
padding-bottom: 20px;
margin-bottom: 25px;
}
.carousel .item .carousel-caption .bigText.bigger {
font-size: 100px !important;
margin-bottom: -5%;
}
.carousel .item .carousel-caption .bigText a.btn {
float: none;
position: absolute;
bottom: -40px;
right: -25px;
font-size: 30px;
}
.carousel .item .carousel-caption .row > .bigText.tripleBorder {
border-right: 5px solid #f00;
}
.carousel .item .carousel-caption .row > .bigText.tripleBorder:before {
border-right: 5px solid #fff;
position: absolute;
content: "";
top: 0;
right: 17px;
bottom: 0;
left: 0;
}
.carousel .item .carousel-caption .row > .bigText.tripleBorder:after {
border-right: 5px solid #aeaeae;
position: absolute;
content: "";
top: 0;
right: 6px;
bottom: 0;
left: 0;
}
.carousel .item .carousel-caption blockquote {
font-size: 60px;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.carousel .item .carousel-caption .mediumText {
font-size: 25px !important;
padding-top: 2%;
}
.carousel .item .carousel-caption .bigText.bigger {
font-size: 100px !important;
margin-bottom: 35px;
}
.carousel .item .carousel-caption .bigText a.btn {
bottom: 30px;
right: 10px;
font-size: 30px;
}
.carousel .item .carousel-caption blockquote {
font-size: 60px;
}
}
$(function() {
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300"
}).appendTo("head");
});
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="container">
<div class="carousel-caption">
<div class="bigText text-left">
<p>A New Generation</p>
<p>A New Way of Advertising</p>
<p>It Begins Here</p>
<a class="btn btn-lg btn-primary" href="#" role="button">Launch Youniverse</a>
</div>
</div>
</div>
</div>
<div class="item" style="background-image: url(http://yt.ajnergaard.co.uk/wp-content/uploads/2014/02/sliders-033.png)">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="bigText text-left tripleBorder col-xs-6">
<p>YouTube</p>
<p>Influencer</p>
<p>Network</p>
</div>
<div class="mediumText text-left col-xs-6">
<p>
Target a billion monthly users<br>
Our in-house YouTube Index 100,000 content creators<br>
In over 30 countries Organic new-age marketing Create brand advocates<br>
Interactive Advertising Systems
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<div class="row">
<div class="col-xs-6 text-left">
<h1>From Ideation to Creation</h1>
<p>We can create, distribute, educate. We can work with companies, agencies, YouTubers. We work with and alongside traditional marketing. We understand You- Tube, we understand the eco-system.</p>
<p>How do brands leverage the enormous power of You- Tube? By creating content that doesn’t feel like an ad, this is what we have been doing, let us do it for you! Find out what we do!</p>
</div>
<div class="bigText text-left col-xs-6">
<p>Creation Distribution Education</p>
</div>
</div>
</div>
</div>
</div>
<div class="item" style="background-image: url(http://yt.ajnergaard.co.uk/wp-content/uploads/2014/02/slider_why.png)">
<div class="container">
<div class="carousel-caption">
<blockquote>
<p>The times, they are a changin’</p>
<footer>Bob Dylan</footer>
</blockquote>
</div>
</div>
</div>
<div class="item" style="background-image: url(http://yt.ajnergaard.co.uk/wp-content/uploads/2014/02/sliders-033.png)">
<div class="container">
<div class="carousel-caption">
<div class="bigText bigger">
<p>Make YouTube</p>
<p>work for you</p>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->