I am learning how to create header and I have problem with proper link href. My logo-box wraps image(logo) and name of the company but in order to align them with display flex it covers full width. I want that href only works when I hover logo or name not whole box. I don't know how to solve this problem.
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="container">
<div class="logo-block">
<a href="" class="logo-block-link">
<img src="logo.png" alt="" class="logo">
<h3 class="logo-tittle">Company</h3>
</a>
</div>
<ul class="nav-list">
<li><a href="">About</a></li>
<li><a href="">Projects</a></li>
<li><a href="">Team</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
nav{
background-color: salmon;
}
.container{
padding: 15px 0;
background-color: #fdcb9e;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1140px;
margin: 0 auto;
}
.logo-block{
flex:1;
border:1px solid gold;
}
.logo-block-link{
display: flex;
border:1px solid black;
}
.logo{
width: 50px;
height: 50px;
}
.nav-list{
flex:1;
display: flex;
justify-content: space-between;
}
.logo-tittle{
font-size:20px;
color:#3f3f44;
text-transform: uppercase;
letter-spacing: 2px;
font-family: monospace;
margin-left: 10px;
}
.nav-list li a{
font-size:16px;
color:#3f3f44;
font-family: monospace;
}
Aucun commentaire:
Enregistrer un commentaire