i am trying to clone an amazon website with just html and css for just now but i having problems
with border when hovering it to the nav-address
the html code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="nav-logo border">
<div class="logo"></div>
</div>
<div class="nav-address border">
<p class="add-first">delivery to</p>
<div class="add-icon">
<i class="fa-solid fa-location-dot"></i>
<p class="add-second">India</p>
</div>
</div>
</div>
</body>
</html>
the css part
margin: 0px;
font-family: Arial;
border: border-box;
}
.navbar{
height: 60px;
background-color: #0f1111;
color: white;
display: flex;
align-items: center;
}
.nav-logo{
height: 50px;
width: 113px;
}
.logo{
background-image: url("amazon_logo.png");
height: 50px;
width: 100%;
background-size: cover;
}
.border{
border: 2px solid transparent;
}
.border :hover{
border: 2px solid white;
}
/*box 2*/
.add-first{
color: #cccccc;
font-size: 1rem;
margin-left: 15px;
}
.add-second{
font-size: 1rem;
margin-left: 3px;
}
.add-icon{
display: flex;
align-items: center;
}
i want to have only a single border instead of so many borders in nav address,there is a separate border for each div and paragraph in the div nav address,i dont want tht instead i just want a single border on juts nav address
New contributor
Retro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.