Markup
<div class="header-area"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="logo"> <a href=""><img src="assets/img/target-logo.png"></a> </div> </div> <div class="col-md-9"> <div class="mainmenu"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Pages</a></li> <li><a href="">Project</a></li> <li><a href="">Features</a></li> <li><a href="">Blog</a></li> <li><a href="">Contact</a></li> <li><a href=""><i class="fa fa-search"></i></a></li> </ul> </div> </div> </div> </div> </div> <div class="homepage-slides"> <div class="single-slide-item"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="slide-text"> <h2>I won't be making any friends <br />in the corporate suites</h2> <p>Lorem ipsum is simply dummy of the printing and typesetting industry. dummy text ever since the when an unknown printer took.</p> <a href="" class="bordered-btn">Read more <i class="fa fa-angle-right"></i></a> </div> </div> <img class="slide-image" src="assets/img/target-man-1.png" alt="Target Man"> </div> </div> </div> <div class="single-slide-item"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="slide-text"> <h2>I won't be making any friends <br />in the corporate suites</h2> <p>Lorem ipsum is simply dummy of the printing and typesetting industry. dummy text ever since the when an unknown printer took.</p> <a href="" class="bordered-btn">Read more <i class="fa fa-angle-right"></i></a> </div> </div> <img class="slide-image" src="assets/img/target-man-1.png" alt="Target Man"> </div> </div> </div> <div class="single-slide-item"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="slide-text"> <h2>I won't be making any friends <br />in the corporate suites</h2> <p>Lorem ipsum is simply dummy of the printing and typesetting industry. dummy text ever since the when an unknown printer took.</p> <a href="" class="bordered-btn">Read more <i class="fa fa-angle-right"></i></a> </div> </div> <img class="slide-image" src="assets/img/target-man-1.png" alt="Target Man"> </div> </div> </div> <div class="single-slide-item"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="slide-text"> <h2>I won't be making any friends <br />in the corporate suites</h2> <p>Lorem ipsum is simply dummy of the printing and typesetting industry. dummy text ever since the when an unknown printer took.</p> <a href="" class="bordered-btn">Read more <i class="fa fa-angle-right"></i></a> </div> </div> <img class="slide-image" src="assets/img/target-man-1.png" alt="Target Man"> </div> </div> </div> </div>
Style
/* Base CSS */ .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: 700; } body { } a:hover { text-decoration: none } .mainmenu ul { list-style: outside none none; margin: 0; padding: 0; text-align: right; } .mainmenu li { display: inline-block; } .mainmenu li a { color: #fff; display: block; font-size: 16px; padding: 10px 0 10px 20px; transition: 0.3s; } .mainmenu li a:hover { color: #dca521; } .single-slide-item { background-color: #263238; color: #fff; font-size: 16px; line-height: 32px; } .slide-image { bottom: 0; max-height: 550px; position: absolute; right: 15px; width: auto !important; } .slide-text { padding: 180px 0 150px; } .single-slide-item .row { position: relative; } .slide-text h2 { color: #dca521; font-size: 40px; font-weight: 300; line-height: 55px; } .bordered-btn { border: 1px solid #fff; border-radius: 5px; color: #dca521; display: inline-block; margin-top: 20px; padding: 10px 30px; transition: 0.3s; } .bordered-btn:hover { border: 1px solid #dca521; color: #fff; } .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: #dca521; } .homepage-slides .owl-nav div { background: transparent; color: #263238; display: inline-block; font-size: 20px; height: 35px; line-height: 35px; margin-left: 5px; margin-right: 5px; text-align: center; width: 40px; transition: 0.5s; } .homepage-slides:hover .owl-nav div { color: #dca521; } .homepage-slides .owl-nav { left: 0; position: absolute; right: 0; top: 50%; } .homepage-slides .owl-nav .owl-next { float: right; } .homepage-slides .owl-nav .owl-prev { float: left; } .header-area { left: 0; margin: 30px 0; position: absolute; top: 0; width: 100%; z-index: 9; }