You could’ve made your question better by at least showing your code attempt(s), so someone can help you with the exact thing you are stuck at.
I did think this challenge might be interesting to have a go at so here’s my attempt (also at my CodePen):
body {
margin: 0;
border: 0;
padding: 0;
width: 1360px;
height: 760px;
display: flex;
flex-direction: row;
font-size: 25px;
font-family: monospace;
}
nav {
padding: 8px;
border: 0;
margin: 0;
width: 20%;
height: 104.5%;
box-sizing: content-box;
display: flex;
flex-direction: column;
background-color: grey;
}
div {
padding: 0;
border: 0;
margin: 0;
width: 100%;
height: 100%;
flex-direction: column;
}
header {
padding: 8px;
border: 0;
margin: 0;
width: inherit;
height: 25%;
flex-direction: column;
background-color: indianred;
}
article {
padding: 8px;
border: 0;
margin: 0;
width: inherit;
height: 50%;
flex-direction: column;
background-color: sandybrown;
}
footer {
padding: 8px;
border: 0;
margin: 0;
width: inherit;
height: 25%;
flex-direction: column;
background-color: salmon;
}<body>
<nav>
Nav!
</nav>
<div>
<header>
Header!
</header>
<article>
Article!
</article>
<footer>
Footer!
</footer>
</div>
</body>
</html>