<div class="wrapper">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>
header, nav, main, aside, footer {
  border: 4px solid;
  padding: 20px;
  text-align: center;
}

header {
  border-color: hsl(360deg 100% 50%);
  background-color: hsl(360deg 100% 50% / 0.2);
}

nav {
  border-color: hsl(30deg 100% 50%);
  background-color: hsl(30deg 100% 50% / 0.2);
}

main {
  border-color: hsl(180deg 100% 30%);
  background-color: hsl(180deg 100% 30% / 0.2);
}

aside {
  border-color: hsl(210deg 100% 50%);
  background-color: hsl(210deg 100% 50% / 0.2);
}

footer {
  border-color: hsl(300deg 100% 50%);
  background-color: hsl(300deg 100% 50% / 0.2);
}

body {
  padding: 0;
}

html, body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.