I am trying to design a header similar to OLX.IN, i am trying but it not working as i need.
I am googled and tried to code myself but it not matching the design i am planning.
Design i am trying :
My Code :
.logo {
width: 50px;
margin-right: 20px;
}
.logo img {
width: 100%;
}
.location {}
.location input {
background-color: #fff;
border: 2px #002f34 solid;
border-radius: 5px;
}
.location .ico {
padding: 10px;
height: 100% !important;
background-color: #000 !important;
color: #fff;
border: none;
outline: inherit;
}
.search {}
.search input {
width: 100px;
background-color: #fff;
border: 2px #002f34 solid;
border-radius: 5px;
}
.search .ico {
padding: 10px;
height: 100% !important;
background-color: #000 !important;
color: #fff;
border: none;
outline: inherit;
}
.sell {
padding: 8px 20px;
border: 3px #ffa500 solid;
color: #002f34;
text-align: center;
background: #fff;
border-radius: 30px;
box-shadow: 0px 3px 5px #a9a9a9;
}
.login {
padding-right:10px;
text-decoration: underline;
font-size: 18px;
font-weight: bold;
}
.flex-1{
flex: 1;
}
.flex-2{
flex: 2;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="#">
<img src={require("../ui/logo.png")} />
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-2 pr-3">
<li class="input-group input-group-lg location mr-4 flex-1">
<input type="text" class="form-control" placeholder="Pakistan" />
<div class="input-group-btn">
<button class="fas fa-search ico"></button>
</div>
</li>
<li class="input-group input-group-lg search flex-2">
<input type="text" class="form-control" placeholder="Find Mobile, Car ,laptop" />
<div class="input-group-btn">
<button class="fas fa-search ico"></button>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<h6 class="mr-sm-2 login" >Login</h6>
<button class="my-2 my-sm-0 fas fa-plus sell"> SELL</button>
</form>
</div>
</nav>Can you help me with correct HTML and CSS tag or code to make a design which i want.