<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="navbar">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">Refinancing</a></li>
<li><a href="#">About US</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="navbar">
<img src="https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg">
</div>
</div>
<div class="col-md-5">
<div class="navbar">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Calculators</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!--=======================strting-Baner==============================-->
<section id="baner">
<div class="baner-image">
<img src="https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg">
<div class="text-center">
<div class="baner-text">
<h3>Your</h3>
<h1>Home</h1>
<h4>FOR-LOAN</h4>
<a href="#">READ MORE</a>
</div>
</div> </div>
</section>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800');
@import url(http://allfont.net/allfont.css?fonts=lincoln);
@import url('https://fonts.googleapis.com/css?family=Charmonman:400,700');
body{font-family: 'Montserrat', sans-serif;margin:0; font-size: 15px;}
h1, h2, h3, h4, h5, h6{ font-family: 'Lincoln', arial;}
h1{font-size:180px; font-weight: 400;}
h2{font-size:58px; font-weight: 400;}
h3{font-size:40px; font-weight: 400;}
h4{font-size:35px; font-weight: 400;}
ul, ol{padding-left:0; margin-top:0; margin-bottom:0;}
li{list-style: none;}
a{text-decoration: none;}
a:hover{text-decoration: none;}
p, a, samp, span, li{font-family:'Montserrat', sans-serif;}
a{font-size: 14px; font-weight:300;}
/**======================header===========================**/
header {
position: absolute;
left: 0;
right: 0;
z-index: 999;
}
.navbar ul li {
display: inline-block;
}
.navbar ul li a:hover {
color: black !important;
text-decoration: navajowhite;
border-bottom: solid 2px;
transition: all ease-out 1s;
}
.navbar ul li a {
padding: 0px 24px;
position: relative;
top: 16px;
color:black;
font-weight: 600;
text-transform: uppercase;
border-top: solid 2px transparent;
transition: all ease-in 1s;
background-repeat:no-repeat;
}
.navbar img {
width: 100%;
margin-left: 41px;
position: relative;
left: -40px;
}
/**======================Baner===========================**/
#baner {
display: block;
overflow: hidden;
width: 100%;
}
.baner-image img {
width: 100%;
height: auto;
}
baner-image{ position: relative;}
.baner-text {
position: absolute;
top: 27%;
transform: translateX(80%);
}
.slick-arrow {
position: absolute;
top: 50%;
transform: translatey(-50%);
}
#baner button {
background: transparent;
border: navajowhite;
}
.back-arrow.slick-arrow {
z-index: 9;
}
.next-arrow.slick-arrow {
right: 0;
}
.baner-text h3 {
color: #ffff;
font-family: 'Charmonman', cursive;
font-size: 50px;
}
.baner-text h1 {
color: white;
text-transform: uppercase;
}
.baner-text h4 {
color: white;letter-spacing: 10px;position: relative;
}
.baner-text h3::after {
position: absolute;
content: "";
background: #ffff;
width: 122px;
height: 1px;
left: 21px;
top: 22px;
}
.baner-text h3::before {
position: absolute;
content: "";
background: white;
width: 122px;
height: 1px;
right: 43px;
top: 27px;
}
.baner-text h4::after {
position: absolute;
content: "";
background: #ffff;
width: 92px;
height: 1px;
left: 24px;
bottom: 26px;
}
.baner-text h4::before {
position: absolute;
content: "";
background: white;
width: 92px;
height: 1px;
right: 0;
top: 19px;
}
.baner-text::after {
position: absolute;
content: "";
background: white;
width: 100%;
height: 1px;
left: 0;
bottom: 85px;
}
.back-arrow.slick-arrow, .next-arrow.slick-arrow {
cursor: pointer;
}
.baner-text a {
color: white;
border: solid 1px;
padding: 12px 60px;
margin-top: 50px;
display: inline-block;
overflow: hidden;
}
.baner-text a::after {
po: ;
position: absolute;
width: 212px;
height: 48px;
content: "";
border: solid 1px;
right: -14px;
z-index: -1;
left: 0;
margin: auto;
bottom: -2px;
}
