<body>
<header class="main-header">
<div class="container">
<a href="#"><img src="images/logo.svg" alt="Manage"></a>
<button class="toggle-button">
<span class="toggle-button__bar"></span>
<span class="toggle-button__bar"></span>
<span class="toggle-button__bar"></span>
</button>
<nav class="main-nav">
<ul role="list" class="main-nav__list">
<li class="main-nav__list--item"><a href="#">Pricing</a></li>
<li class="main-nav__list--item"><a href="#">Product</a></li>
<li class="main-nav__list--item"><a href="#">About Us</a></li>
<li class="main-nav__list--item"><a href="#">Careers</a></li>
<li class="main-nav__list--item"><a href="#">Community</a></li>
</ul>
</nav>
<button class="button button-header">Get Started</button>
</div>
</header>
<script type="module" src="/script/script.js"></script>
/* CSS/SASS code
I do not know why my logo/image is being placed in the middle of the header, instead of
the top left corner of the header. I do not know how to fix this.
If anybody has some nice suggestions, feel free to tell */
@mixin display-flex() {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
@mixin media-min-width($width) {
@media (min-width: $width) {
@content;
}
}
.main-header {
position: relative;
padding: $pad-header 0;
.container {
@include display-flex();
justify-content: space-around;
a {
display: inline-block;
text-decoration: none;
font-size: $fs-nav;
font-weight: $fw-semi-bold;
}
.main-nav {
display: none;
@include media-min-width(50rem) {
display: block;
}
}
.button {
color: hsl(0deg, 0%, 98%);
font-weight: 700;
background: hsl(12deg, 88%, 59%);
padding: 0.7rem 1rem;
border: 0;
border-radius: 100vmax;
&:hover {
cursor: pointer;
}
:focus {
outline: none;
}
}
.button-header {
display: none;
@include media-min-width(50rem) {
display: block;
}
}
.toggle-button {
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
background: transparent;
border: 0;
cursor: pointer;
@include media-min-width(50rem) {
display: none;
}
.toggle-button__bar {
display: block;
background: $clr-secondary;
width: 2rem;
height: 0.3rem;
margin: 0.3rem 0;
&:last-of-type {
margin: 0;
}
}
}
}
}
.main-nav__list {
@include display-flex();
justify-content: center;
gap: clamp(1.7rem, 1.9rem, 2.5rem);
.main-nav__list--item a {
cursor: pointer;
}
}
