<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 ---------->
<!-- Slider start -->
<div class="slider">
<div class="slider-wrap">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="mogo-slider" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner text-center" role="listbox">
<div class="item active">
<div class="slider-content">
<p class="slider-caption">
Creative Template
</p>
<h3 class="slider-titile text-uppercase">
Welcome <br> to mogo
</h3>
<span class="verticle-bar"></span>
<div class="btn-action">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-content">
<p class="slider-caption">
Creative Template
</p>
<h3 class="slider-titile text-uppercase">
Welcome <br> to mogo
</h3>
<span class="verticle-bar"></span>
<div class="btn-action">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-content">
<p class="slider-caption">
Creative Template
</p>
<h3 class="slider-titile text-uppercase">
Welcome <br> to mogo
</h3>
<span class="verticle-bar"></span>
<div class="btn-action">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-content">
<p class="slider-caption">
Creative Template
</p>
<h3 class="slider-titile text-uppercase">
Welcome <br> to mogo
</h3>
<span class="verticle-bar"></span>
<div class="btn-action">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mogo-slider" data-slide-to="0" class="active">
<div class="indicator-inner">
<span class="number">01</span>
<span class="text text-uppercase">Intro</span>
</div>
</li>
<li data-target="#mogo-slider" data-slide-to="1">
<div class="indicator-inner">
<span class="number">02</span>
<span class="text text-uppercase">Work</span>
</div>
</li>
<li data-target="#mogo-slider" data-slide-to="2">
<div class="indicator-inner">
<span class="number">03</span>
<span class="text text-uppercase">About</span>
</div>
</li>
<li data-target="#mogo-slider" data-slide-to="3">
<div class="indicator-inner">
<span class="number">04</span>
<span class="text text-uppercase">Contracts</span>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of slider -->
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Montserrat:400,700');
/* Mogo slider */
.slider {
background: url("https://raw.githubusercontent.com/raazon/raazon.github.io/master/HTML/mogo/img/slider-bg.jpg") no-repeat center / cover;
position: relative;
}
.slider:after {
content: "";
opacity: 0.8;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: -moz-linear-gradient(top, #e68282 0%, #f0d68a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e68282 0%, #f0d68a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e68282 0%, #f0d68a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e68282', endColorstr='#f0d68a', GradientType=0); /* IE6-9 */
}
/* Carousel */
.slider .carousel {
z-index: 1;
padding: 100px 0 50px 0;
}
.slider .carousel-inner {
}
.slider .slider-content p {
color: #fff;
font-size: 72px;
line-height: 140px;
font-family: 'Kaushan Script', cursive;
}
.slider .slider-content h3 {
color: #fff;
font-size: 150px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
}
.slider .slider-content .btn {
color: #fff;
font-size: 14px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
padding: 8px 30px;
margin-bottom: 120px;
text-transform: uppercase;
background: transparent;
border-radius: 0;
border: 2px solid #ffffff;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.slider .slider-content .btn:hover {
background: #f38181;
border: 2px solid #f38181;
}
/* Carousel indicator */
.slider .carousel-indicators {
width: 100%;
margin: 0;
padding: 0;
left: 0;
}
.slider .carousel-indicators li {
text-indent: initial;
width: 22%;
height: 5px;
margin: 0 2% 0 0;
border-radius: 0;
background: #ffffff;
border: none;
opacity: 0.6;
}
.slider .carousel-indicators li:last-child {
margin: 0;
}
.slider .carousel-indicators li.active {
opacity: 1;
position: relative;
}
.slider .carousel-indicators li.active:after {
content: "";
width: 30%;
height: 5px;
top: 0;
left: 0;
position: absolute;
background: #f38181;
}
.slider .carousel-indicators li:hover{
opacity: 1;
}
.slider .indicator-inner {
padding-top: 25px;
text-align: left;
}
.slider .indicator-inner span {
font-family: 'Montserrat', sans-serif;
color: #fff;
font-size: 17px;
font-weight: 400;
}
.slider .indicator-inner span.number {
font-size: 23px;
font-weight: 500;
margin-right: 10px;
}
/* Media query for 959px */
@media only screen and (max-width: 959px) {
/* Main slider section */
.slider .carousel {
padding: 70px 0 50px 0;
}
.slider .slider-content .btn {
margin-bottom: 60px;
padding: 6px 18px;
font-size: 12px;
}
}
/* Media query for 768px */
@media only screen and (max-width: 768px) {
/* Main slider section */
.slider .slider-content p {
font-size: 35px;
line-height: 70px;
}
.slider .indicator-inner {
padding-top: 10px;
}
.slider .slider-content h3 {
font-size: 35px;
}
.slider .indicator-inner span {
font-size: 10px;
}
.slider .indicator-inner span.number {
font-size: 10px;
margin-right: 0;
}
}
/* Media query for 420px */
@media only screen and (max-width: 420px) {
/* Main slider section */
.slider .carousel {
padding: 50px 0 50px 0;
}
.slider .slider-content p {
font-size: 35px;
line-height: 70px;
}
.slider .indicator-inner {
padding-top: 10px;
}
.slider .slider-content h3 {
font-size: 35px;
}
.slider .indicator-inner span {
font-size: 7px;
}
.slider .indicator-inner span.number {
font-size: 7px;
margin-right: 0;
}
}
jQuery('#mogo-slider').carousel({
interval: 5000
})
