ch. 98: Building a Web Application - Part 2

FrankGecko · FrankGecko · commit cfece9d1d407 · 2024-05-14T16:45:41.000+02:00
diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html
@@ -25,7 +25,6 @@
         }
 
         nav,
-        menu,
         section,
         main,
         aside {
@@ -40,12 +39,45 @@
 
         menu {
             background-color: #7048e8;
-            color: #fff;
             grid-column: 2 / -1;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 0 40px;
+        }
+
+        button:last-child {
+            background-color: #d6336c;
+            margin-left: auto;
+        }
+
+        button {
+            display: inline-block;
+            font-size: 16px;
+            font-weight: bold;
+            background-color: #5f3dc4;
+            border: none;
+            cursor: pointer;
+            color: #fff;
+            padding: 8px 12px;
         }
 
         section {
             background-color: #e9ecef;
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 40px;
+            overflow: scroll;
+        }
+
+        .email {
+            background-color: #adb5bd;
+            height: 96px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
         }
 
         aside {
@@ -56,8 +88,25 @@
 
 <body>
     <nav>Nav</nav>
-    <menu>Menu</menu>
-    <section>Inbox</section>
+    <menu>
+        <button>New</button>
+        <button>Reply</button>
+        <button>Forward</button>
+        <button>Mark Unread</button>
+        <button>Trash</button>
+    </menu>
+    <section>
+        <div class="email">Email 1</div>
+        <div class="email">Email 2</div>
+        <div class="email">Email 3</div>
+        <div class="email">Email 4</div>
+        <div class="email">Email 5</div>
+        <div class="email">Email 6</div>
+        <div class="email">Email 7</div>
+        <div class="email">Email 8</div>
+        <div class="email">Email 9</div>
+        <div class="email">Email 10</div>
+    </section>
     <main>Email view</main>
     <aside>Additional info</aside>
 </body>
