<header class="header">
<h1>Vgnly.</h1>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</header>
<div class="nav__extra-background"></div>
<nav class="nav">
<div class="nav__content">
<div class="nav__left">
<div class="nav__links">
<a href="#">Our solutions</a>
<a href="#">Methods</a>
<a href="#">Contact us</a>
</div>
.
.
.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
@font-face {
font-family: 'Ageo Bold';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2479807/ageo-heavy.woff2') format('woff2');
}
@font-face {
font-family: 'Ageo Regular';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2479807/ageo-regular.woff2') format('woff2');
}
body {
font-family: 'Ageo Regular', sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1140px;
margin: 0 auto;
}
.header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
width: 100%;
padding: 0 64px;
z-index: 20;
h1 {
font-size: 16px;
font-family: 'Ageo Bold';
text-transform: uppercase;
}
button {
border: none;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
}
}
.hamburger {
display: flex;
flex-direction: column;
background: none;
border: none;
outline: none;
span {
display: inline-block;
height: 2px;
width: 30px;
background-color: #000;
margin-bottom: 10px;
transition: 0.3s ease transform;
}
&__open {
span:nth-child(1) {
transform: rotate(-45deg) translate(-9px, 6px);
}
span:nth-child(2) {
opacity: 0;
}
span:nth-child(3) {
transform: rotate(45deg) translate(-11px, -8px);
}
}
}
.hero {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
padding: 120px 0;
h1 {
max-width: 700px;
font-size: 32px;
span {
font-family: 'Ageo Bold';
}
}
}
.nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
overflow: hidden;
height: 0%;
width: 100%;
background-color: hsl(209, 63%, 16%);
z-index: 9;
&__extra-background {
position: fixed;
top: 0;
bottom:0;
right:0;
left: 0;
height: 0%;
width: 100%;
background-color: hsl(162, 73%, 74%);
z-index: 2;
}
&__content {
display: flex;
align-items: center;
max-width: 1140px;
height: 100%;
min-height: 100vh;
padding: 120px 0;
margin: 0 auto;
color: hsl(210, 37%, 96%);
}
&__left {
flex: 1;
}
&__right {
max-width: 300px;
}
&__links {
font-size: 80px;
font-family: 'Ageo Bold';
line-height: 1;
margin-bottom: 80px;
a {
display: block;
&:not(:last-child) {
margin-bottom: 32px;
}
&:hover {
color: hsl(162, 72%, 74%);
}
}
}
&__text {
h3 {
font-family: 'Ageo Bold';
}
}
.
.
.
