Holy Grail CSS Grid

plb18001 · Mar 25, 2022 · 98db034 · 98db034
1 parent 71897a3
commit 98db034
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 0 deletions.
diff --git a/week-9/index.html b/week-9/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Responsive Holy Grail</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+    <article id="container">
+        <header id="header">
+            <h1>HEADER</h1>
+        </header>
+
+        <section id="menu">
+            <h3 id="menu-title">MENU</h3>
+            <h3>ITEM 1</h3>
+            <h3>ITEM 2</h3>
+            <h3>ITEM 3</h3>
+            <h3>ITEM 4</h3>
+            <h3>ITEM 5</h3>
+        </section>
+
+        <section id="content">
+            <h1>CONTENT</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </section>
+
+        <section id="ad">
+            <h1>AD</h1>
+            <h1>AD</h1>
+        </section>
+
+        <footer id="footer">
+            <h1>FOOTER</h1>
+        </footer>
+    </article>
+</body>
+</html>
diff --git a/week-9/main.css b/week-9/main.css
@@ -0,0 +1,37 @@
+header, footer{
+    background-color: aqua;
+}
+#menu, #ad {
+    background-color:blueviolet;
+}
+#content{
+    background-color: lightcoral;
+}
+
+
+
+@media (min-width: 600px) {
+    #container {
+        display: grid;
+        height: 100vh;
+        grid-template-columns: 1fr 2fr 1fr;
+        grid-template-rows: 1fr 3fr 1fr;
+    }
+    #header, #footer {
+        grid-column: 1 / span 3;
+    }
+}
+
+h1, h3, p {
+    text-align: center;
+}
+h1{
+    font-size: 2em;
+}
+p {
+    font-size: 1.5em;
+}
+
+header, section, footer {
+    border: solid;
+}