ch. 97: Building a Web Application Layout - Part 1

FrankGecko · FrankGecko · commit 4d99d8e3ce4d · 2024-05-14T16:30:57.000+02:00
diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>App Layout</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: sans-serif;
+            color: #343a40;
+            font-size: 24px;
+            display: grid;
+            height: 100vh;
+            grid-template-columns: 80px 400px 1fr 250px;
+            grid-template-rows: 80px 1fr;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        nav,
+        menu,
+        section,
+        main,
+        aside {
+            padding-top: 24px;
+        }
+
+        nav {
+            background-color: #343a40;
+            color: #fff;
+            grid-row: 1 / -1;
+        }
+
+        menu {
+            background-color: #7048e8;
+            color: #fff;
+            grid-column: 2 / -1;
+        }
+
+        section {
+            background-color: #e9ecef;
+        }
+
+        aside {
+            background-color: #e9ecef;
+        }
+    </style>
+</head>
+
+<body>
+    <nav>Nav</nav>
+    <menu>Menu</menu>
+    <section>Inbox</section>
+    <main>Email view</main>
+    <aside>Additional info</aside>
+</body>
+
+</html>
