TheOdinProject · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022
diff --git a/flex/01-flex-center/style.css b/flex/01-flex-center/style.css
@@ -3,6 +3,9 @@
   border: 4px solid midnightblue;
   width: 400px;
   height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .box {

diff --git a/flex/02-flex-header/style.css b/flex/02-flex-header/style.css
@@ -1,6 +1,10 @@
 .header  {
-  font-family: monospace;
+  font-family: FreeMono, monospace;
   background: papayawhip;
+  /* from here */
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
 }
 
 .logo {
@@ -9,11 +13,32 @@
   color: tomato;
   background: white;
   padding: 4px 32px;
+  /* from here */
+  text-align: center;
+  flex: 2 1 0;
 }
 
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
+  /* from here */
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.left-links,
+.right-links {
+  display: flex;
+}
+
+.left-links {
+  justify-content: flex-start;
+}
+
+.right-links {
+  justify-content: flex-end;
 }
 
 a {

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 class="to-the-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="to-the-right">
+      <button class="notifications">
+        1 new notification
+      </button>
+      <div class="profile-image"></div>
     </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>
-    <button class="notifications">
-      1 new notification
-    </button>
-    <div class="profile-image"></div>
   </div>
 </body>
 </html>
diff --git a/flex/03-flex-header-2/style.css b/flex/03-flex-header-2/style.css
@@ -46,3 +46,45 @@ a {
 ul {
   list-style-type: none;
 }
+
+/* solution */
+
+.header {
+  margin: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  margin: 10px;
+}
+
+.to-the-left,
+.to-the-right {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+}
+
+.to-the-left {
+}
+
+.to-the-right {
+  justify-content: flex-end;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+li {
+  margin: 0 10px;
+}
+
+button {
+  margin: 10px;
+}
diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html
@@ -10,17 +10,27 @@
 <body>
   <div class="title">Information!</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="barberry">
+      <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="chilli">
+      <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="pepper">
+      <img src="./images/pepper.png" alt="pepper">
+      <div class="text">We have so many plants. Yay plants.</div>
+    </div>
 
-  <img src="./images/saffron.png" alt="saffron">
-  <div class="text">I'm running out of things to say about plants.</div>
+    <div class="saffron">
+      <img src="./images/saffron.png" alt="saffron">
+      <div class="text">I'm running out of things to say about plants.</div>
+    </div>
+  </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
@@ -1,5 +1,6 @@
 body {
   font-family: 'Courier New', Courier, monospace;
+  text-align: center;
 }
 
 img {
@@ -23,4 +24,22 @@ img {
   align-items: center;
   justify-content: center;
   background: #eee;
+}
+
+/* solution */
+
+.title {
+  margin-bottom: 32px;
+}
+
+.plants {
+  display: flex;
+  gap: 52px;
+}
+
+.barberry,
+.chilli,
+.pepper,
+.saffron {
+  max-width: 200px;
 }
diff --git a/flex/05-flex-modal/style.css b/flex/05-flex-modal/style.css
@@ -63,4 +63,36 @@ button.cancel {
   background: white;
   border: 1px solid #ddd;
   color: royalblue;
+}
+
+/* solution */
+
+.modal {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.header {
+  font-size: large;
+  font-weight: bold;
+  flex: 20;
+}
+
+.icon {
+  margin: 10px;
+}
+
+.close-button {
+  margin: 10px;
+  align-items: flex-start;
+  justify-self: flex-end;
+}
+
+.text {
+  padding: 0 10px 0 62px;
+}
+
+button.continue {
+  margin: 20px 10px 20px 62px;
 }
diff --git a/flex/06-flex-layout/style.css b/flex/06-flex-layout/style.css
@@ -25,3 +25,45 @@ input {
   width: 400px;
   margin-bottom: 16px;
 }
+
+/* solution */
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.header,
+.footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+ul,
+il {
+  list-style: none;
+  display: flex;
+  margin: 15px;
+  padding: 0;
+  gap: 10px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer {
+  background-color: #eee;
+}
+
+button {
+  padding: 10px;
+}
diff --git a/flex/07-flex-layout-2/index.html b/flex/07-flex-layout-2/index.html
@@ -12,22 +12,26 @@
     MY AWESOME WEBSITE
   </div>
 
-  <div class="sidebar">
-    <ul>
-      <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>
-      <li><a href="google.com">👌🏽 - link four</a></li>
-    </ul>
+  <div class="content">
+    <div class="sidebar">
+      <ul>
+        <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>
+        <li><a href="google.com">👌🏽 - link four</a></li>
+      </ul>
+    </div>
+
+    <div class="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="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="footer">
     The Odin Project ❤️
   </div>

diff --git a/flex/07-flex-layout-2/style.css b/flex/07-flex-layout-2/style.css
@@ -25,4 +25,64 @@ body {
   border: 1px solid #eee;
   box-shadow: 2px 4px 16px rgba(0,0,0,.06);
   border-radius: 4px;
+}
+
+/* solution */
+
+body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  font-size: 24px;
+  color: white;
+}
+
+.header {
+  display: flex;
+  font-size: 32px;
+  font-weight: 900;
+  padding-left: 16px;
+  align-items: center;
+}
+
+.content {
+  display: flex;
+}
+
+.sidebar {
+  min-width: 300px;
+  padding: 16px;
+}
+
+.cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 32px;
+  justify-content: space-around;
+  align-content: center;
+  padding: 32px;
+}
+
+.card {
+  min-width: 200px;
+  max-width: 300px;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/foundations/01-css-methods/index.html b/foundations/01-css-methods/index.html
@@ -3,12 +3,20 @@
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="stylesheet" href="./style.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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,7 @@
+div {
+    background-color: red;
+    color: white;
+    font-size: 32px;
+    text-align: center;
+    font-weight: 900;
+}
diff --git a/foundations/02-class-id-selectors/index.html b/foundations/02-class-id-selectors/index.html
@@ -9,9 +9,9 @@
 </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>
+  <div class="second">Number 2 - I'm one ID.</div>
+  <p class="third">Number 3 - I'm a class, but cooler!</p>
+  <div class="fourth">Number 4 - I'm another ID.</div>
   <p>Number 5 - I'm a class!</p>
 </body>
 </html>
diff --git a/foundations/02-class-id-selectors/style.css b/foundations/02-class-id-selectors/style.css
@@ -0,0 +1,19 @@
+p {
+    background-color: rgb(226, 60, 87);
+    font-family: Verdana, 'DejaVu Sans', Geneva, Tahoma, sans-serif
+}
+
+.second {
+    color: blue;
+    font-size: 36px;
+}
+
+.third {
+    font-size: 24px;
+}
+
+.fourth {
+    background-color: rgb(119, 214, 119);
+    font-size: 24px;
+    font-weight: bold;
+}
diff --git a/foundations/03-grouping-selectors/index.html b/foundations/03-grouping-selectors/index.html
@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <button>Click Me!</button>
-  <button>No, Click Me!</button>
+  <button class="button one">Click Me!</button>
+  <button class="button two">No, Click Me!</button>
 </body>
 </html>
diff --git a/foundations/03-grouping-selectors/style.css b/foundations/03-grouping-selectors/style.css
@@ -0,0 +1,13 @@
+.button {
+    font-size: 28px;
+    font-family: Arial, Helvetica, 'Times New Roman', sans-serif;
+}
+
+.one {
+    background-color: black;
+    color: white;
+}
+
+.two {
+    background-color: yellow;
+}
diff --git a/foundations/04-chaining-selectors/style.css b/foundations/04-chaining-selectors/style.css
@@ -0,0 +1,9 @@
+.avatar.proportioned {
+    width: 300px;
+    height: auto;
+}
+
+.avatar.distorted {
+    width: 200px;
+    height: 400px;
+}
diff --git a/foundations/05-descendant-combinator/style.css b/foundations/05-descendant-combinator/style.css
@@ -0,0 +1,6 @@
+.container .text {
+    background-color: yellow;
+    color: red;
+    font-size: 20px;
+    text-align: center;
+}
diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css
@@ -3,15 +3,15 @@
   color: hsl(0, 100%, 50%);
 }
 
-.small-para {
-  font-size: 12px;
-}
-
 .para {
   font-size: 22px;
 }
 
-.confirm {
+.small-para {
+  font-size: 12px;
+}
+
+#confirm-button.confirm {
   background: green;
   color: white;
   font-size: 20px;
@@ -24,7 +24,7 @@
   font-size: 20px;
 }
 
-.child {
+.text > .child {
   color: red;
   font-size: 14px;
 }

diff --git a/margin-and-padding/margin-and-padding-1/style.css b/margin-and-padding/margin-and-padding-1/style.css
@@ -7,22 +7,22 @@ body {
   background: pink;
   border: 3px solid blue;
   /* CHANGE ME */
-  padding: 0px;
-  margin: 0px;
+  padding: 32px;
+  margin: 12px;
 }
 
 .two {
   background: lightblue;
   border: 3px solid purple;
   /* CHANGE ME */
-  margin-bottom: 0px;
+  margin-bottom: 48px;
 }
 
 .three {
   background: peachpuff;
   border: 3px solid brown;
   width: 200px;
   /* CHANGE ME */
-  padding: 0px;
-  margin-left: 0px;
+  padding: 32px;
+  margin-left: auto;
 }
diff --git a/margin-and-padding/margin-and-padding-2/style.css b/margin-and-padding/margin-and-padding-2/style.css
@@ -7,21 +7,32 @@ body {
   width: 400px;
   background: #fff;
   margin: 16px auto;
+  padding: 8px;
 }
 
 .title {
   background: #e3f4ff;
+  margin: 8px;
+  font-size: 16px;
+  padding: 8px;
 }
 
 .content {
   background: #e3f4ff;
+  margin: 8px;
+  padding: 18px 6px;
 }
 
 .button-container {
   background: #e3f4ff;
+  margin: 8px;
+  padding: 8px;
+  text-align: center;
 }
 
 button {
   background: white;
   border: 1px solid #eee;
+  display: block;
+  margin: 0 auto;
 }