<header>
<h2>Header Section</h2>
</header>
<main>
<h2>Main Section</h2>
</main>
<nav>
<h2>Nav Section</h2>
</nav>
<aside>
<h2>Aside Section</h2>
</aside>
<footer>
<h2>Footer Section</h2>
</footer>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
margin: 0;
background-color: #291642;
font-family: "Gochi Hand", sans-serif;
font-size: 100%;
letter-spacing: 0.1rem;
color: #fff;
}
header {
background-color: #2196f3;
min-height: 15vh;
}
main {
background-color: #795548;
color: #fff;
margin: 0 2vh;
}
footer {
min-height: 20vh;
background-color: #222;
}
nav {
background-color: #ff9800;
color: #fff;
}
aside {
background-color: #607d8b;
color: #fff;
}
h2 {
text-align: center;
margin: 2vh 0;
}
//Layout
body {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
main {
grid-area: main;
}
nav {
grid-area: nav;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
@media screen and (max-width: 800px) {
body {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
main {
margin-left: 0;
margin-right: 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.