Day 20: Grid Layout

edyoda · Oct 29, 2022 · c46cacd · c46cacd
1 parent cf6ad5a
commit c46cacd
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 3 deletions.
diff --git a/css/Day19/style.css b/css/Day19/style.css
@@ -166,10 +166,10 @@
   margin-top: 20px;
   display: flex;
   flex-wrap: wrap;
+  gap: 20px;
 }
 
 .features-card {
-  margin: 10px;
   flex: 1;
   height: 300px;
   background-image: url("https://www.apple.com/v/home/at/images/promos/apple-watch-ultra/promo_apple_watch_ultra__gnsqulvdc4a6_medium_2x.jpg");
@@ -178,7 +178,7 @@
   border-radius: 4px;
   cursor: pointer;
   min-width: 290px;
-  background-color: red;
+  background-color: lightgray;
   position: relative;
   overflow: hidden;
   max-width: 360px;

diff --git a/css/Day20/grid-layout.html b/css/Day20/grid-layout.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Day20 - Grid</title>
+
+    <style>
+      .container {
+        display: grid;
+        height: 100vh;
+        grid-template-rows: 60px auto 40px;
+        grid-template-columns: 150px 1fr 1fr;
+        grid-template-areas: "head head head" "side main main" "side foot foot";
+      }
+      header {
+        grid-area: head;
+        background-color: gray;
+      }
+      aside {
+        grid-area: side;
+        background-color: gold;
+      }
+      main {
+        grid-area: main;
+        background-color: salmon;
+      }
+      footer {
+        grid-area: foot;
+        background-color: black;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <header>Header</header>
+      <aside>side Bar</aside>
+      <main>Main Section</main>
+      <footer>Footer</footer>
+    </div>
+  </body>
+</html>
diff --git a/css/Day20/grid.html b/css/Day20/grid.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Day20 - Grid</title>
+
+    <style>
+      .container {
+        border: 2px solid brown;
+        display: grid;
+        grid-template-columns: auto auto auto;
+        grid-template-rows: 1fr 1fr 1fr;
+
+        height: 500px;
+      }
+      .item {
+        padding: 20px;
+        text-align: center;
+        background-color: salmon;
+        color: white;
+        border: 1px solid red;
+      }
+      .item-a {
+        grid-row-start: 2;
+        grid-row-end: 4;
+        grid-column-start: 2;
+        grid-column-end: 4;
+      }
+      .item-b {
+        grid-column-start: 1;
+        grid-column-end: -1;
+      }
+      .item-8 {
+        grid-column-start: 1;
+        grid-column-end: 3;
+      }
+      .container :last-child {
+        grid-column: 2 / span 2;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Learn Grid</h1>
+
+    <div class="container">
+      <div class="item item-a">1</div>
+      <div class="item item-b">2</div>
+      <div class="item">3</div>
+      <div class="item">4</div>
+      <div class="item">5</div>
+      <div class="item">6</div>
+      <div class="item">7</div>
+      <div class="item item-8">8</div>
+      <div class="item">9</div>
+      <div class="item">10</div>
+      <div class="item">11</div>
+    </div>
+  </body>
+</html>
diff --git a/html/Day9/flexbox.html b/html/Day9/flexbox.html
@@ -8,7 +8,7 @@
 
         flex-direction: row;
         display: flex;
-
+        align-items: flex-start;
         max-width: 600px;
         margin: 0 auto;
         height: 500px;