TheOdinProject · Nov 8, 2021 · Nov 8, 2021 · Nov 9, 2021 · Nov 9, 2021 · Nov 11, 2021
diff --git a/flex/01-flex-center/style.css b/flex/01-flex-center/style.css
@@ -12,4 +12,10 @@
   border: 6px solid maroon;
   width: 80px;
   height: 80px;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/flex/02-flex-header/style.css b/flex/02-flex-header/style.css
@@ -1,6 +1,11 @@
 .header  {
   font-family: monospace;
   background: papayawhip;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: bold;
+
 }
 
 .logo {
@@ -9,11 +14,20 @@
   color: tomato;
   background: white;
   padding: 4px 32px;
+  margin: 10px;
+
 }
 
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+}
+
+li {
+  display: inline;
 }
 
 a {
@@ -22,4 +36,6 @@ a {
   padding: 8px;
   /* this removes the line under the links */
   text-decoration: none;
-}
+}
+
+
diff --git a/flex/03-flex-header-2/index.html b/flex/03-flex-header-2/index.html
@@ -9,18 +9,22 @@
 </head>
 <body>
   <div class="header">
-    <div class="logo">
-      LOGO
-    </div>
-    <ul class="links">
-      <li><a href="google.com">link-one</a></li>
-      <li><a href="google.com">link-two</a></li>
-      <li><a href="google.com">link-three</a></li>
-    </ul>
+    <div class="left">
+      <div class="logo">
+        LOGO
+      </div>
+      <ul class="links">
+        <li><a href="google.com">link-one</a></li>
+        <li><a href="google.com">link-two</a></li>
+        <li><a href="google.com">link-three</a></li>
+      </ul>
+  </div>
+  <div class="right">
     <button class="notifications">
       1 new notification
     </button>
     <div class="profile-image"></div>
   </div>
+  </div>
 </body>
 </html>
diff --git a/flex/03-flex-header-2/style.css b/flex/03-flex-header-2/style.css
@@ -12,6 +12,10 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
 }
 
 .profile-image {
@@ -45,4 +49,25 @@ a {
 
 ul {
   list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
+
+.left ul {
+  display: flex;
+  gap: 8px;
+
+}
+
+.right {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html
@@ -8,19 +8,34 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <div class="title">Information!</div>
+  <div class="container">
+    <div class="header">
+      <div class="title">Information!</div>
+    </div>
 
-  <img src="./images/barberry.png" alt="barberry">
-  <div class="text">This is a type of plant. We love this one.</div>
+  <div class="plants">
+    <div class="plant1">
+      <img src="./images/barberry.png" alt="barberry">
+      <div class="text">This is a type of plant. We love this one.</div>
+    </div>
 
-  <img src="./images/chilli.png" alt="chili">
-  <div class="text">This is another type of plant. Isn't it nice</div>
+    <div class="plant2">
+      <img src="./images/chilli.png" alt="chili">
+      <div class="text">This is another type of plant. Isn't it nice</div>
+    </div>
 
-  <img src="./images/pepper.png" alt="pepper">
-  <div class="text">We have so many plants. Yay plants.</div>
+    <div class="plant3">
+      <img src="./images/pepper.png" alt="pepper">
+      <div class="text">We have so many plants. Yay plants.</div>
+    </div>
+
+    <div class="plant4">
+      <img src="./images/saffron.png" alt="saffron">
+      <div class="text">I'm running out of things to say about plants.</div>
+    </div>
+  </div>
+  </div>
 
-  <img src="./images/saffron.png" alt="saffron">
-  <div class="text">I'm running out of things to say about plants.</div>
 
   <!-- disregard this section, it's here to give attribution to the creator of these icons -->
   <div class="footer">

diff --git a/flex/04-flex-information/style.css b/flex/04-flex-information/style.css
@@ -23,4 +23,21 @@ img {
   align-items: center;;
   justify-content: center;
   background: #eee;
+}
+
+.container {
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+}
+
+.plants {
+  display: flex;
+  gap: 52px;
+}
+
+.plants div {
+  max-width: 200px;
+  text-align: center;
 }
diff --git a/flex/05-flex-modal/index.html b/flex/05-flex-modal/index.html
@@ -10,11 +10,17 @@
 <body>
   <div class="modal">
     <div class="icon">!</div>
-    <div class="header">Are you sure you want to do that?</div>
-    <div class="close-button">✖</div>
-    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
-    <button class="continue">Continue</button>
-    <button class="cancel">Cancel</button>
+    <div class=middle">
+    <div class="top-header">
+      <div class="header">Are you sure you want to do that?</div>
+      <div class="close-button">✖</div>
+    </div>
+    <div class="message">
+      <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
+      <button class="continue">Continue</button>
+      <button class="cancel">Cancel</button>
+    </div>
+  </div>
   </div>
 </body>
 </html>
diff --git a/flex/05-flex-modal/style.css b/flex/05-flex-modal/style.css
@@ -63,4 +63,30 @@ button.cancel {
   background: white;
   border: 1px solid #ddd;
   color: royalblue;
+}
+
+
+.modal {
+  display: flex;
+  padding: 16px;
+}
+
+.header {
+  font-weight: bold;
+  font-size: 1.2em;
+  padding-bottom: 8px;
+}
+
+.icon {
+  min-width: 40px;
+  margin-right: 16px;
+}
+
+.message .text {
+  margin-bottom: 1em;
+}
+
+.top-header {
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/flex/07-flex-layout-2/index.html b/flex/07-flex-layout-2/index.html
@@ -11,7 +11,7 @@
   <div class="header">
     MY AWESOME WEBSITE
   </div>
-
+  <div class="content">
   <div class="sidebar">
     <ul>
       <li><a href="google.com">⭐ - link one</a></li>
@@ -20,14 +20,15 @@
       <li><a href="google.com">👌🏽 - link four</a></li>
     </ul>
   </div>
-
-  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
-  <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
-  <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
-  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
-  <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
-  <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
-
+  <div class="content-cards">
+    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
+    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
+    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
+    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
+    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
+    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
+  </div>
+  </div>
   <div class="footer">
     The Odin Project ❤️
   </div>

diff --git a/flex/07-flex-layout-2/style.css b/flex/07-flex-layout-2/style.css
@@ -8,6 +8,9 @@ body {
   height: 72px;
   background: darkmagenta;
   color: white;
+  display: flex;
+  align-items: center;
+  padding-left: 1em;
 }
 
 .footer {
@@ -25,4 +28,58 @@ body {
   border: 1px solid #eee;
   box-shadow: 2px 4px 16px rgba(0,0,0,.06);
   border-radius: 4px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+}
+
+.header {
+  font-size: 32px;
+  font-weight: 900;
+}
+
+.content-cards {
+  margin: 32px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  flex: 1;
+}
+
+.card {
+  padding: 1em;
+  width: 300px;
+  height: 300px;
+}
+
+
+ul {
+  list-style: none;
+  margin: 1em;
+  padding: 0;
+}
+
+ul * + * {
+  margin-top: 8px;
+}
+
+ul a {
+  color: white;
+  text-decoration: none;
+  font-size: 1.6em;
+  font-weight: 500;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/foundations/01-css-methods/index.html b/foundations/01-css-methods/index.html
@@ -4,11 +4,19 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="style.css" rel="stylesheet">
   <title>Methods for Adding CSS</title>
+  <style>
+    p {
+      background-color: green;
+      color: white;
+      font-size: 18px;
+    }
+  </style>
 </head>
 <body>
   <div>Style me via the external method!</div>
   <p>I would like to be styled with the internal method, please.</p>
-  <button>Inline Method</button>
+  <button style="background-color: orange; font-size: 18px">Inline Method</button>
 </body>
 </html>
diff --git a/foundations/01-css-methods/style.css b/foundations/01-css-methods/style.css
@@ -0,0 +1,8 @@
+div {
+    background-color: red;
+    font-size: 32px;
+    color: white;
+    text-align: center;
+    font-weight: bold;
+}
+
diff --git a/foundations/02-class-id-selectors/index.html b/foundations/02-class-id-selectors/index.html
@@ -8,10 +8,10 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <p>Number 1 - I'm a class!</p>
-  <div>Number 2 - I'm one ID.</div>
-  <p>Number 3 - I'm a class, but cooler!</p>
-  <div>Number 4 - I'm another ID.</div>
-  <p>Number 5 - I'm a class!</p>
+  <p class="odd">Number 1 - I'm a class!</p>
+  <div id="second">Number 2 - I'm one ID.</div>
+  <p class="odd large">Number 3 - I'm a class, but cooler!</p>
+  <div id="fourth">Number 4 - I'm another ID.</div>
+  <p class="odd">Number 5 - I'm a class!</p>
 </body>
 </html>