<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<body>
<div class="container"><!--start slider container-->
<div class="main-slider">
<div class="slide1"><!--start slide-->
<div class="background-img">
<div class="overlay"></div>
</div>
<section class="content-holder">
<div class="title left">
<h3>welcome</h3>
<h2>aliquid interpretaris</h2>
<h5>mea vocibus eloquentiam voluptatibus</h5>
<button><a href="#">read</a> </button>
<button><a href="#">descover</a></button>
</div>
<div class="desc right">
<p>
Eius senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem, mea vocibus eloquentiam voluptatibus ne. Ad has dicunt erant aperiri sapientem deterruisset consequuntur ...
</p>
<div class="post-details">
<i class="fa fa-heart"></i>
<div>
<span class="author-img"></span>
<span>by admin</span>
</div>
</div>
</div>
</section>
</div><!--end slide-->
<div class="slide2"><!--start slide-->
<div class="background-img">
<div class="overlay"></div>
</div>
<section class="content-holder">
<div class="title left">
<h3>welcome</h3>
<h2>aperiri sapientem</h2>
<h5>Eius senserit quo etsen</h5>
<button><a href="#">read</a> </button>
<button><a href="#">descover</a></button>
</div>
<div class="desc right">
<p>
Ad has dicunt deterruisset Eius senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem, mea vocibus erant aperiri sapientem eloquentiam voluptatibus ne consequuntur ...
</p>
<div class="post-details">
<i class="fa fa-heart"></i>
<div>
<span class="author-img"></span>
<span>by admin2</span>
</div>
</div>
</div>
</section>
</div><!--end slide-->
<div class="slide3"><!--start slide-->
<div class="background-img">
<div class="overlay"></div>
</div>
<section class="content-holder">
<div class="title left">
<h3>welcome</h3>
<h2>mea vocibus eloquentiam voluptatibus</h2>
<h5>aliquid interpretari</h5>
<button><a href="#">read</a> </button>
<button><a href="#">descover</a></button>
</div>
<div class="desc right">
<p>
vocibus eloquentiam Ad has dicunt deterruisset Eius senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem, mea voluptatibus ne consequuntur ...
</p>
<div class="post-details">
<i class="fa fa-heart"></i>
<div>
<span class="author-img"></span>
<span>by admin</span>
</div>
</div>
</div>
</section>
</div><!--end slide-->
<div class="slide4"><!--start slide-->
<div class="background-img">
<div class="overlay"></div>
</div>
<section class="content-holder">
<div class="title left">
<h3>welcome</h3>
<h2>Sea aliquid interpretaris</h2>
<h5>Ad has dicunt</h5>
<button><a href="#">read</a> </button>
<button><a href="#">descover</a></button>
</div>
<div class="desc right">
<p>
Eius senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem, mea vocibus eloquentiam voluptatibus ne. Ad has dicunt deterruisset consequuntur ...
</p>
<div class="post-details">
<i class="fa fa-heart"></i>
<div>
<span class="author-img"></span>
<span>by admin</span>
</div>
</div>
</div>
</section>
</div><!--end slide-->
<div class="slide5"><!--start slide-->
<div class="background-img">
<div class="overlay"></div>
</div>
<section class="content-holder">
<div class="title left">
<h3>welcome</h3>
<h2>aliquid interpretaris</h2>
<h5>mea vocibus eloquentiam voluptatibus</h5>
<button><a href="#">read</a> </button>
<button><a href="#">descover</a></button>
</div>
<div class="desc right">
<p>
erant aperiri sapientem senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem, mea vocibus eloquentiam voluptatibus ne. Ad has dicunt deterruisset consequuntur ...
</p>
<div class="post-details">
<i class="fa fa-heart"></i>
<div>
<span class="author-img"></span>
<span>by admin2</span>
</div>
</div>
</div>
</section>
</div><!--end slide-->
<div class="slide6"><!--start slide-->
<div class="background-img">
<div class="overlay"></div>
</div>
<section class="content-holder">
<div class="title left">
<h3>welcome</h3>
<h2>erant aperiri</h2>
<h5>interpretaris te</h5>
<button><a href="#">read</a> </button>
<button><a href="#">descover</a></button>
</div>
<div class="desc right">
<p>
erant aperiri sapientem Eius senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem, mea vocibus eloquentiam voluptatibus ne. Ad has dicunt deterruisset consequuntur ...
</p>
<div class="post-details">
<i class="fa fa-heart"></i>
<div>
<span class="author-img"></span>
<span>by admin</span>
</div>
</div>
</div>
</section>
</div><!--end slide-->
</div>
</div><!--end slider container-->
</body>
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
text-decoration: none;
}
html, body {
width:100%;
height: 100%;
}
.container {
width: 1300px;
height: 80%;
position: relative;
margin: auto;
}
.main-slider {
width: 100%;
height: 400px;
position: absolute;
background-color: aliceblue;
margin: auto;
margin-top: 40px;
border: 1px solid #eee;
}
div[class^="slide"] {
width: 100%;
min-width: 800px;
height: 100%;
position: absolute;
opacity: 0;
z-index: -9999999
}
.main-slider .background-img {
width: 100%;
height: 100%;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-size:cover;
background-repeat: no-repeat;
overflow: hidden
}
.main-slider .slide1 .background-img {
background-image: url(http://www.wallpaperup.com/uploads/wallpapers/2015/04/06/657389/dc511e0569295f439c5d12d5a91e1cbd.jpg);
}
.main-slider .slide2 .background-img {
background-image: url(http://www.wallpaperup.com/uploads/wallpapers/2013/03/21/56144/big_thumb_a733f9ee07a3e08f0047ab2b68d6568c.jpg);
background-size:100% 130%;
}
.main-slider .slide3 .background-img {
background-image: url(http://www.wallpaperup.com/uploads/wallpapers/2012/11/13/21969/big_thumb_e3f508fb8ebe3b917de57deeacb1129d.jpg);
}
.main-slider .slide4 .background-img {
background-image: url(http://www.wallpaperup.com/uploads/wallpapers/2012/08/04/8056/big_thumb_c5aa6b8e515bdc67e36ee00974e82270.jpg);
background-size:100% 100%;
}
.main-slider .slide5 .background-img {
background-image: url(http://eskipaper.com/images/beautiful-cityscape-wallpaper-1.jpg);
}
.main-slider .slide6 .background-img {
background-image: url(https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/S3VM4C4P1X.jpg);
background-size:100% 100%;
}
.main-slider .background-img .overlay {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.1);
}
.main-slider .content-holder {
position: absolute;
width: 90%;
height: 370px;
margin: 2% 65px;
padding-top: 35px;
}
/* slide title left*/
.main-slider .content-holder .title {
width: 575px;
height: 300px;
position: absolute;
left: 0;
background-color: rgba(0,0,0,.7);
padding-right: 0px;
-webkit-clip-path: polygon(0 0, 575px 0, 430px 300px , 0 300px);
text-transform: capitalize;
font-family: serif;
}
.main-slider .content-holder .title h3 {
margin-top: 30px;
padding-left: 40px;
line-height: 200%;
color: #e1e1e1;
font-size: 30px;
}
.main-slider .content-holder .title h2 {
position: relative;
padding-left: 50px;
color: #fff;
font-size: 40px;
font-style: italic;
}
.main-slider .content-holder .title h2:before {
content: '';
display: block;
width: 4px;
height: 55%;
position: absolute;
top: 25%;
left: 35px;
background-color: #fff
}
.main-slider .content-holder .title h5 {
color: #e1e1e1;
font-size: 20px;
padding-left: 40px;
line-height: 200%;
font-weight: 100;
}
.main-slider .content-holder .title button {
border: none;
outline: none;
position: relative;
background-color: transparent;
margin-top: 20px;
border-radius: 20px;
cursor: pointer;
text-transform: uppercase;
font-size: 13px;
font-weight: 700
}
.main-slider .content-holder .title button a {
display: inline-block;
padding: 7px 20px;
border-radius: 20px;
color: rgba(255,255,255,.8);
letter-spacing: 1px;
border: 2px solid;
transition: all 300ms ease;
font-family: 'serif';
}
.main-slider .content-holder .title button:nth-of-type(1) a {
margin-left: 40px;
margin-right: 10px;
border-color: #f1f1f1;
}
.main-slider .content-holder .title button:nth-of-type(1):hover a {
background-color: dodgerblue;
border-color: dodgerblue;
}
.main-slider .content-holder .title button:nth-of-type(2) a {
background-color: dodgerblue;
border-color: transparent;
}
.main-slider .content-holder .title button:nth-of-type(2):hover a {
background-color: transparent;
color: dodgerblue;
border-color: dodgerblue;
}
/* slide description right */
.main-slider .content-holder .desc {
width: 740px;
height: 250px;
position: absolute;
right: 0;
left: 37%;
margin-top: 25px;
padding: 60px 10px 70px 150px;
background-color: rgba(0,0,0,.7);
-webkit-clip-path: polygon(135px 0 , 740px 0, 750px 250px, 0 280px);
}
.main-slider .content-holder .desc p {
position: relative;
margin-top: 20px;
margin-bottom: 40px;
color: #fff;
font-family: '';
font-size: 17px;
line-height: 1.em;
letter-spacing: 1px;
}
.main-slider .content-holder .desc p:before {
content: '';
width: 4px;
height: 90%;
position: absolute;
left: -15px;
top: 5%;
background-color: rgba(255,255,255,.9);
border-radius: 20%;
}
.main-slider .content-holder .desc p:after {
content: '';
position: absolute;
left: 5%;
bottom: -40%;
width: 80%;
height: 4px;
border-radius: 20%;
background-color: rgba(255,255,255,.4);
}
.main-slider .content-holder .desc .post-details {
width: 100%;
height: 40px;
margin-left: -10px;
margin-top: 20px;
}
.main-slider .content-holder .desc .post-details > i:first-child {
float: right;
padding-top: 10px;
padding-right: 60px;
font-size: 20px;
color: #e80931;
cursor: pointer;
}
.main-slider .content-holder .desc .post-details div {
width: 150px;
height: 40px;
}
.main-slider .content-holder .desc .post-details div .author-img {
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background-size: 36px 36px;
border: 2px solid #fff;
}
/* change below to ur authors */
.main-slider .slide1 .author-img {
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ1URblsvQq7L0FY87DfuTUF1H04aRCvma9Nbr5wQmvKnA20L10);
}
.main-slider .slide2 .author-img {
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ1URblsvQq7L0FY87DfuTUF1H04aRCvma9Nbr5wQmvKnA20L10);
}
.main-slider .slide3 .author-img {
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ1URblsvQq7L0FY87DfuTUF1H04aRCvma9Nbr5wQmvKnA20L10);
}
.main-slider .slide4 .author-img {
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ1URblsvQq7L0FY87DfuTUF1H04aRCvma9Nbr5wQmvKnA20L10);
}
.main-slider .slide5 .author-img {
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ1URblsvQq7L0FY87DfuTUF1H04aRCvma9Nbr5wQmvKnA20L10);
}
.main-slider .slide6 .author-img {
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ1URblsvQq7L0FY87DfuTUF1H04aRCvma9Nbr5wQmvKnA20L10);
}
.main-slider .content-holder .desc .post-details div span:nth-of-type(2) {
padding-left: 10px;
color: rgba(255,255,255,.7);
font-size: 11px;
font-weight: 700;
line-height: 50px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* ======= start fade in/out slides ======== */
.slide1 {
animation: fadeInOut1 26s ease reverse forwards infinite;
}
.slide2 {
animation: fadeInOut2 26s ease reverse forwards infinite;
}
.slide3 {
animation: fadeInOut3 26s ease reverse forwards infinite;
}
.slide4 {
animation: fadeInOut4 26s ease reverse forwards infinite;
}
.slide5 {
animation: fadeInOut5 26s ease reverse forwards infinite;
}
.slide6 {
animation: fadeInOut6 26s ease reverse forwards infinite;
}
@keyframes fadeInOut1 {
0% { opacity: 0 }
5% { opacity: 1; z-index: 999999 }
16% { opacity: 1; z-index: 999999 }
18% { opacity: 0; z-index: -10 }
}
@keyframes fadeInOut2 {
0% { opacity: 0 }
16% { opacity: 0 }
18% { opacity: 1; z-index: 999999 }
32% { opacity: 1; z-index: 999999 }
34% { opacity: 0; z-index: -10 }
}
@keyframes fadeInOut3 {
0% { opacity: 0 }
32% { opacity: 0 }
34% { opacity: 1; z-index: 999999 }
47% { opacity: 1; z-index: 999999 }
49% { opacity: 0; z-index: -10 }
}
@keyframes fadeInOut4 {
0% { opacity: 0 }
47% { opacity: 0 }
49% { opacity: 1; z-index: 999999 }
66% { opacity: 1; z-index: 999999 }
68% { opacity: 0; z-index: -10 }
}
@keyframes fadeInOut5 {
0% { opacity: 0 }
66% { opacity: 0 }
68% { opacity: 1; z-index: 999999 }
80% { opacity: 1; z-index: 999999 }
82% { opacity: 0; z-index: -10 }
}
@keyframes fadeInOut6 {
0% { opacity: 1; z-index: 999999 }
4% { opacity: 1; z-index: 999999 }
6% { opacity: 0 }
80% { opacity: 0; z-index: -10 }
82% { opacity: 1; z-index: 999999 }
99% { opacity: 1; z-index: 999999 }
100% { opacity: 1; z-index: 999999 }
}
