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;
}