Amazon nav bar
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="you.css">
<title>amazon</title>
</head>
<body>
<header>
<div class="navbar">
<div class="nav-logo border">
<div class="logo" >
<!-- logo end -->
</div>
</div>
<div class="nav-address border">
<pc class="add-1">deliver</p>
<div class="add-icon">
<i class="fa-solid fa-location-dot"></i>
<p class="add-2">India</p>
</div>
<!-- logo end -->
</div>
<div class="nav-search">
<select class="search-select">
<option value=""> ALL</option>
</select>
<input placeholder="search amazon" class="search-input">
<div class="search-icon">
<i class="fa-solid fa-magnifying-glass"></i>
<!-- icon-search -->
</div>
<!-- search -->
</div>
<div class="nav-signin border">
<p><span>Hello, sign.in</span></p>
<p class="add-2">Account & List </p>
</div>
<div class="nav-return border">
<p><span>return</span></p>
<p class="add-2"> & Order </p>
</div>
<div class="nav-cart">
<i class="fa-solid fa-cart-shopping"></i>
cart
</div>
<!-- nav end -->
</div>
</header>
</body>
</html>
CSS
*{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
border: border-box;
}
.navbar{
height: 60px;
background-color:#0f1111 ;
color: white;
display: flex;
align-items: center;
justify-content:space-evenly;
}
.logo{
background-image: url("amazon_logo.png");
height: 12px;
width: 100%;
background-size: cover;
}
.nav-logo{
height: 50;
width: 100px;
}
.border{
border: 1.5px solid transparent;
}
.border:hover{
border: 1.5px solid white;
}
.nav-search:hover{
border: 2px solid orange;
}
/* adds/ */
.add-1{
color: #cccccc;
font-size: 3px ;
margin-left: 15px;
}
.add-2{
font-size: 2px ;
margin-left: 3px;
}
.add-icon{
display: flex;
justify-content: space-evenly;
}
.nav-search{
display: flex;
justify-content: space-evenly;
background-color: red;
width: 250px;
height: 40px;
border-radius: 3px;
}
.search-select{
background-color: #f3f3f3;
width: 50px;
text-align: center;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border: none;
}
.search-input{
width:100%;
font-size: 1rem;
border:none;
}
.search-icon{
width: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
background-color: #febd68;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: #0f1111;
}
span{
font-size:3px ;
}
.nav-scend{
font-size: 0.85rem;
font-weight: 700;
}
.nav-cart i{
font-size: 15px;
}
.nav-cart{
font-size: 0.85rem;
font-weight: 700;
}
0 Comments