<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name="description" content="Learn JavaScript the Hard Way">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title>Holy Grail Starter</title>
<style>
:root {
--height-header: 80px;
--height-footer: 200px;
}
body {
margin: 0px;
padding: 0px;
}
footer {
display: flex;
background-color: hsl(0, 0%, 80%);
min-height: var(--height-footer);
}
header {
display: flex;
background-color: hsl(0, 0%, 80%);
height: var(--height-header);
}
main {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--height-header) - var(--height-footer));
}
main > columns {
display: flex;
flex-direction: row;
flex: 1 1 auto;
}
main > columns left,
main > columns right {
display: block;
flex: 1 1 auto;
}
main > columns left {
background-color: hsl(0, 70%, 80%);
}
main > columns right {
background-color: hsl(200, 70%, 80%);
}
@media only screen and (max-width: 700px) {
main > columns {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<main>
<columns>
<left>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
<h1>Left</h1>
</left>
<right>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
<h1>Right</h1>
</right>
</columns>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>