Skip to content

Instantly share code, notes, and snippets.

@EmmanuelDemey

EmmanuelDemey/index.html

Last active May 27, 2024 13:41
Show Gist options
  • Save EmmanuelDemey/5bba72cc8cd517d7e112292396327517 to your computer and use it in GitHub Desktop.
Save EmmanuelDemey/5bba72cc8cd517d7e112292396327517 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="body">
<header>Header</header>
<nav>Menu</nav>
<main>Main</main>
<aside>Right</aside>
<footer>Footer</footer>
</div>
</body>
</html>
Raw
solution.css
#body {
height: 100vh;
display: grid;
grid-template-rows: 5% 1fr 20%;
grid-template-columns: 20% 1fr 1fr 20%;
grid-gap: 5px;
grid-template-areas:
"header header header header"
"nav nav main sidebar"
"nav nav footer footer";
}
header {
background-color: #2196f3;
grid-area: header;
}
nav {
background-color: red;
grid-area: nav;
}
main {
background-color: cyan;
grid-area: main;
}
aside {
background-color: yellow;
grid-area: sidebar;
}
footer {
background-color: green;
grid-area: footer;
}
Raw
style.css
#body {
height: 100vh;
}
header {
background-color: #2196f3;
}
nav {
background-color: red;
}
main {
background-color: cyan;
}
aside {
background-color: yellow;
}
footer {
background-color: green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment