A header typically located at the top of a webpage or section, containing essential information like the site title, logo, and navigation links..
<header class="c-header">
<a href="#" class="c-header__logo">Logo</a>
<nav class="c-header__nav">
<ul>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
</ul>
</nav>
</header>
.c-header {
display: flex;
justify-content: space-between;
padding: 20px;
border: 1px solid #fff;
}
.c-header__logo {
color: #fff;
}
.c-header__logo:hover {
color: #ff3c26;
}
.c-header__nav ul {
display: flex;
list-style: none;
column-gap: 20px;
}
.c-header__nav a {
color: #fff;
}
.c-header__nav a:hover {
color: #ff3c26;
}
.c-header {
display: flex;
justify-content: space-between;
padding: 20px;
border: 1px solid #fff;
&__logo {
color: #fff;
&:hover {
color: #ff3c26;
}
}
&__nav {
ul {
display: flex;
list-style: none;
column-gap: 20px;
}
a {
color: #fff;
&:hover {
color: #ff3c26;
}
}
}
}