<div class="container-fluid px-0">
<header>
<div class="shape"></div> <!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-transparent"> <a class="navbar-brand" href="#">SPORT SHOES</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">MEN</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">WOMEN</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">KIDS</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">BOYS</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">GIRLS</a> </li>
</ul>
</div>
</nav> <!-- ./ end of navbar -->
<div class="container">
<div class="row">
<div class="col-md-6 left-side"> <img src="https://i.imgur.com/jrRBTai.png" class="w-100"> </div>
<div class="col-md-6 right-side">
<h1>SPORTS SHOES</h1>
<p>FREE DELIVERY</p>
<div class="text-center"> <button class="btn order-button">ORDER NOW</button> </div>
</div>
</div>
</div>
</header>
</div>
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
body {
background: #cecece
}
header {
background: #000;
color: #fff
}
.left-side,
.right-side {
height: 100vh
}
.navbar-transparent {
background: transparent
}
.navbar-nav>li>a {
color: #fff
}
.navbar-nav>li:hover {
border-bottom: 1px solid #fff
}
.navbar-nav>.active {
border-bottom: 1px solid #fff
}
.navbar-brand {
font-family: 'Allerta Stencil', sans-serif;
color: #83ff00
}
.navbar-brand:hover {
color: #fff
}
.left-side img {
padding-top: 100px
}
.shape {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #ce0000, #7A0800 70%);
position: absolute;
-webkit-clip-path: ellipse(500px 500px at 10% 5%)
}
.right-side {
padding-top: 150px
}
.right-side h1 {
font-family: 'Allerta Stencil', sans-serif;
font-size: 2.4em;
text-align: center
}
.right-side p {
font-size: 1.5em;
text-align: center;
font-weight: bold
}
.btn.order-button {
background: transparent;
border: 2px solid #83ff00;
color: #83ff00;
border-radius: 30%;
transition: 0.7s
}
.btn.order-button:hover {
border: 2px solid #ce0000;
color: #ce0000
}