Markup
<div class="header-top-area">
<div class="container">
<div class="row">
<div class="col-md-5">
We are seo marketing company.
</div>
<div class="col-md-7 text-right">
<a href="mailto:demomail@gmail.com"><i class="fa fa-envelope"></i> demomail@gmail.com</a>
<i class="fa fa-phone"></i> 019999999999
</div>
</div>
</div>
</div>
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="assets/img/logo-10.png" alt="Ranking">
</div>
<div class="col-md-9 text-right">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="homepage-slides">
<div class="single-homepage-slide">
<div class="container">
<div class="row">
<div class="col-md-7">
<h2>We offer seo for your <br />local Business</h2>
<p>Know where and how to use keywords in your content for maximuma bility content organization the content on your site should been.</p>
<a class="slide-btn" href="">Services <i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="col-md-5 text-right">
<img src="assets/img/slide-icon-1.png" alt="">
</div>
</div>
</div>
</div>
<div class="single-homepage-slide">
<div class="container">
<div class="row">
<div class="col-md-7">
<h2>We offer seo for your <br />local Business</h2>
<p>Know where and how to use keywords in your content for maximuma bility content organization the content on your site should been.</p>
<a class="slide-btn" href="">Services <i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="col-md-5 text-right">
<img src="assets/img/slide-icon-2.png" alt="">
</div>
</div>
</div>
</div>
<div class="single-homepage-slide">
<div class="container">
<div class="row">
<div class="col-md-7">
<h2>We offer seo for your <br />local Business</h2>
<p>Know where and how to use keywords in your content for maximuma bility content organization the content on your site should been.</p>
<a class="slide-btn" href="">Services <i class="fa fa-long-arrow-right"></i></a>
</div>
<div class="col-md-5 text-right">
<img src="assets/img/slide-icon-2.png" alt="">
</div>
</div>
</div>
</div>
</div>
Style
/* Base CSS */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i');
.alignleft {
float: left;
margin-right: 15px;
}
.alignright {
float: right;
margin-left: 15px;
}
.aligncenter {
display: block;
margin: 0 auto 15px;
}
a:focus { outline: 0 solid }
img {
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px;
font-weight: 300;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.7;
}
a:hover { text-decoration: none }
.header-top-area {
background: #218ee6 none repeat scroll 0 0;
padding: 10px 0;
}
.header-top-area, .header-top-area a {
color: #fff;
}
.header-top-area .text-right i.fa {
padding-left: 20px;
}
.header-area ul {
list-style: outside none none;
margin: 0;
padding: 0;
}
.header-area li {
display: inline-block;
}
.header-area li a {
color: #333;
display: block;
padding: 25px 0 25px 50px;
text-transform: uppercase;
}
.header-area li a:hover {
color: #218ee6;
}
.header-area img {
margin: 20px 0;
}
.homepage-slides {
background: #218ee6 none repeat scroll 0 0;
color: #fff;
font-size: 16px;
}
.homepage-slides h2 {
font-size: 50px;
font-weight: 100;
}
.slide-btn {
background: #f9cf25 none repeat scroll 0 0;
border-radius: 4px;
color: #000;
display: inline-block;
font-size: 12px;
font-weight: 400;
margin-top: 31px;
padding: 10px 25px;
text-transform: uppercase;
}
.single-homepage-slide {
padding: 150px 0;
}
.homepage-slides .owl-dots div {
background: #fff none repeat scroll 0 0;
border-radius: 50%;
display: inline-block;
height: 10px;
margin: 5px;
width: 10px;
}
.homepage-slides .owl-dots {
bottom: 20px;
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
.homepage-slides .owl-dots div.active {
background: #f9cf25 none repeat scroll 0 0;
}
