<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="carousel fade-carousel slide" data-ride="carousel" data-interval="5000" id="bs-carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="herocar">
<hgroup>
<h2>12 Month Warranty</h2>
<h3>All parts and labor that we provide are covered by a 12 Month warranty. If your repaired device seems to be having issues after a repair, please visit Expresstech right away for warranty diagnostics. We will be happy to diagnose and replace any defective parts that were used during the original repair. Please keep in mind that the warranty does not cover physical damage (such as broken screen) or water damage done to the device after the initial repair.</h3>
</hgroup>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="herocar">
<hgroup>
<h2>Customer Support</h2>
<h3>You, the Customer, are the most important aspect of our business at Expresstech. From our friendly, well-trained staff at each location to a dedicated Customer Consultant Team, rest assured your satisfaction is our number one priority.</h3>
</hgroup>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="herocar">
<hgroup>
<h2>We are amazing</h2>
</hgroup>
</div>
</div>
</div>
</div>
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 400px;
}
.fade-carousel .carousel-inner .item {
height: 400px;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #0c9eef;
border-color: #0c9eef;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.herocar {
font-family:"ProximaNova", "Helvetica Neue", "helvetica", "arial", "sans-serif";
position: absolute;
font-weight: 200;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.herocar h2 {
font-family:"ProximaNova", "Helvetica Neue", "helvetica", "arial", "sans-serif";
font-size: 50px;
font-weight: 300;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .herocar {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .herocar {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-herocar,
.btn.btn-herocar:hover,
.btn.btn-herocar:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 400px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(https://cdn.shopify.com/s/files/1/0714/6655/files/iphone-6-repair_f8f56f60-aabb-4d6e-b0a6-a011c7a54806.jpg?5242737971197934775);
}
.fade-carousel .slides .slide-2 {
background-image: url(https://cdn.shopify.com/s/files/1/0714/6655/files/ipad-air-repair.jpg?5242737971197934775);
}
.fade-carousel .slides .slide-3 {
background-image: url(https://cdn.shopify.com/s/files/1/0714/6655/files/samsung-galxaxy-s6-repair.jpg?5242737971197934775);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.herocar { width: 980px; }
}
@media screen and (max-width: 640px){
.herocar h1 { font-size: 4em; }
}
