You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
2.1 KiB
118 lines
2.1 KiB
2 years ago
|
<!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: 1 1 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
main > columns left,
|
||
|
|
main > columns right {
|
||
|
|
display: flex;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
main > columns left {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
main > columns right {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
background-color: hsl(0, 0%, 70%);
|
||
|
|
}
|
||
|
|
|
||
|
|
main > columns left info {
|
||
|
|
flex: 0 1 400px;
|
||
|
|
border: 1px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
main > columns right info {
|
||
|
|
flex: 0 1 400px;
|
||
|
|
border: 1px solid black;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<header>
|
||
|
|
<h1>Header</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<columns>
|
||
|
|
<left>
|
||
|
|
<info>
|
||
|
|
<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>
|
||
|
|
</info>
|
||
|
|
</left>
|
||
|
|
|
||
|
|
<right>
|
||
|
|
<info>
|
||
|
|
<h1>Right</h1>
|
||
|
|
<h1>Right</h1>
|
||
|
|
<h1>Right</h1>
|
||
|
|
<h1>Right</h1>
|
||
|
|
</info>
|
||
|
|
</right>
|
||
|
|
</columns>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<h1>Footer</h1>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|