From fab2f8a03bdd1ff63d723f4c9b3c1b39b1db0a95 Mon Sep 17 00:00:00 2001
From: tlawlor15 <ted_lawlor@mckinsey.com>
Date: Mon, 7 Oct 2024 21:03:16 -0400
Subject: [PATCH] adding all exercises

---
 .github/PULL_REQUEST_TEMPLATE.md              | 32 ---------------
 flex/01-flex-center/style.css                 |  3 ++
 flex/02-flex-header/style.css                 | 11 ++++-
 flex/03-flex-header-2/index.html              | 26 +++++++-----
 flex/03-flex-header-2/style.css               | 13 ++++++
 flex/04-flex-information/index.html           | 33 ++++++++-------
 flex/04-flex-information/style.css            |  7 ++++
 flex/05-flex-modal/index.html                 | 15 ++++---
 flex/05-flex-modal/style.css                  | 23 +++++++++++
 flex/06-flex-layout/style.css                 | 40 ++++++++++++++++++
 flex/07-flex-layout-2/index.html              | 35 ++++++++--------
 flex/07-flex-layout-2/style.css               | 41 +++++++++++++++++++
 foundations/01-css-methods/index.html         | 11 ++++-
 foundations/01-css-methods/styles.css         |  9 ++++
 foundations/02-class-id-selectors/index.html  | 10 ++---
 foundations/02-class-id-selectors/style.css   | 21 ++++++++++
 foundations/03-grouping-selectors/index.html  |  6 +--
 foundations/03-grouping-selectors/style.css   | 14 +++++++
 foundations/04-chaining-selectors/style.css   | 12 +++++-
 .../05-descendant-combinator/style.css        |  6 +++
 foundations/06-cascade-fix/style.css          | 10 ++++-
 .../01-margin-and-padding-1/style.css         | 11 ++---
 .../02-margin-and-padding-2/style.css         | 18 ++++++++
 23 files changed, 310 insertions(+), 97 deletions(-)
 delete mode 100644 .github/PULL_REQUEST_TEMPLATE.md
 create mode 100644 foundations/01-css-methods/styles.css

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index 1edf6010f7e..00000000000
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,32 +0,0 @@
-<!-- Thank you for taking the time to contribute to The Odin Project. In order to get this pull request (PR) merged in a reasonable amount of time, you must complete this entire template. -->
-
-## Because
-<!-- Summarize the purpose or reasons for this PR, e.g. what problem it solves or what benefit it provides. -->
-
-
-## This PR
-<!-- A bullet point list of one or more items describing the specific changes. -->
-
-
-## Issue
-<!--
-If this PR closes an open issue in this repo, replace the XXXXX below with the issue number, e.g. Closes #2013.
-
-If this PR closes an open issue in another TOP repo, replace the #XXXXX with the URL of the issue, e.g. Closes https://github.com/TheOdinProject/curriculum/issues/XXXXX
-
-If this PR does not close, but is related to another issue or PR, you can link it as above without the 'Closes' keyword, e.g. 'Related to #2013'.
--->
-Closes #XXXXX
-
-## Additional Information
-<!-- Any other information about this PR, such as a link to a Discord discussion. -->
-
-
-## Pull Request Requirements
-<!-- Replace the whitespace between the square brackets with an 'x', e.g. [x]. After you create the PR, they will become checkboxes that you can click on. -->
--   [ ] I have thoroughly read and understand [The Odin Project Contributing Guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md)
--   [ ] The title of this PR follows the `location of change: brief description of change` format, e.g. `01-flex-center: Update self check`
--   [ ] The `Because` section summarizes the reason for this PR
--   [ ] The `This PR` section has a bullet point list describing the changes in this PR
--   [ ] If this PR addresses an open issue, it is linked in the `Issue` section
--   [ ] If applicable, I have ensured that the TOP solution files match the Desired Outcome image
diff --git a/flex/01-flex-center/style.css b/flex/01-flex-center/style.css
index e35feacd28d..52dbe94f0a5 100644
--- 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;
+  justify-content: center;
+  align-items: center;
 }
 
 .box {
diff --git a/flex/02-flex-header/style.css b/flex/02-flex-header/style.css
index cb598c93548..07e5f098cf0 100644
--- a/flex/02-flex-header/style.css
+++ b/flex/02-flex-header/style.css
@@ -1,6 +1,10 @@
 .header  {
   font-family: monospace;
   background: papayawhip;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px
 }
 
 .logo {
@@ -9,11 +13,16 @@
   color: tomato;
   background: white;
   padding: 4px 32px;
+  justify-content: center;
 }
 
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 8px;
 }
 
 a {
@@ -22,4 +31,4 @@ a {
   padding: 8px;
   /* this removes the line under the links */
   text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/flex/03-flex-header-2/index.html b/flex/03-flex-header-2/index.html
index 21d56170b0b..5fabc457da0 100644
--- 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="left">
+        <div class="logo">
+          LOGO
+        </div>
+        <ul class="links">
+          <li><a href="https://google.com">link-one</a></li>
+          <li><a href="https://google.com">link-two</a></li>
+          <li><a href="https://google.com">link-three</a></li>
+        </ul>
+      </div>
+      <div class="right">
+        <button class="notifications">
+          1 new notification
+        </button>
+        <div class="profile-image"></div>
       </div>
-      <ul class="links">
-        <li><a href="https://google.com">link-one</a></li>
-        <li><a href="https://google.com">link-two</a></li>
-        <li><a href="https://google.com">link-three</a></li>
-      </ul>
-      <button class="notifications">
-        1 new notification
-      </button>
-      <div class="profile-image"></div>
     </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/flex/03-flex-header-2/style.css b/flex/03-flex-header-2/style.css
index bf4c8af10d4..9193c64faab 100644
--- a/flex/03-flex-header-2/style.css
+++ b/flex/03-flex-header-2/style.css
@@ -12,6 +12,9 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
+  display: flex;
+  padding: 8px;
+  justify-content: space-between;
 }
 
 .profile-image {
@@ -45,4 +48,14 @@ a {
 
 ul {
   list-style-type: none;
+  display: flex;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
 }
+
+.left, .right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
\ No newline at end of file
diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html
index 3cc3efd262a..88d9bb104e6 100644
--- a/flex/04-flex-information/index.html
+++ b/flex/04-flex-information/index.html
@@ -8,20 +8,25 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <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>
-
-    <img src="./images/chilli.png" alt="chili">
-    <div class="text">This is another type of plant. Isn't it nice?</div>
-
-    <img src="./images/pepper.png" alt="pepper">
-    <div class="text">We have so many plants. Yay plants.</div>
-
-    <img src="./images/saffron.png" alt="saffron">
-    <div class="text">I'm running out of things to say about plants.</div>
-
+    <div class="icons">
+      <div class="title">Information!</div>
+      <div class="plant barberry">
+        <img src="./images/barberry.png" alt="barberry">
+        <div class="text">This is a type of plant. We love this one.</div>
+      </div>
+      <div class="plant chili">
+        <img src="./images/chilli.png" alt="chili">
+        <div class="text">This is another type of plant. Isn't it nice?</div>
+      </div>
+      <div class="plant pepper">
+        <img src="./images/pepper.png" alt="pepper">
+        <div class="text">We have so many plants. Yay plants.</div>
+      </div>
+      <div class="plant 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">
       <div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
diff --git a/flex/04-flex-information/style.css b/flex/04-flex-information/style.css
index 80c00fd4bd5..ab7c58de12b 100644
--- a/flex/04-flex-information/style.css
+++ b/flex/04-flex-information/style.css
@@ -12,6 +12,13 @@ img {
   font-weight: 900;
 }
 
+.icons {
+  display: flex;
+  padding: 8px;
+  justify-content: space-between;
+  flex-basis: 200px;
+}
+
 /* do not edit this footer */
 .footer {
   position: fixed;
diff --git a/flex/05-flex-modal/index.html b/flex/05-flex-modal/index.html
index 3b4a06f2bcf..f8f0b535ed6 100644
--- a/flex/05-flex-modal/index.html
+++ b/flex/05-flex-modal/index.html
@@ -10,11 +10,16 @@
   <body>
     <div class="modal">
       <div class="icon">!</div>
-      <div class="header">Are you sure you want to do that?</div>
-      <button class="close-button">✖</button>
-      <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="main">
+        <div class="header">Are you sure you want to do that?
+          <button class="close-button">✖</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>
+        <div class = "buttons">
+          <button class="continue">Continue</button>
+          <button class="cancel">Cancel</button>
+        </div>
+      </div>
     </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/flex/05-flex-modal/style.css b/flex/05-flex-modal/style.css
index 780b355ef3d..aad5c4da2a9 100644
--- a/flex/05-flex-modal/style.css
+++ b/flex/05-flex-modal/style.css
@@ -20,6 +20,15 @@ body {
   width: 480px;
   border-radius: 10px;
   box-shadow: 2px 4px 16px rgba(0,0,0,.2);
+  padding: 16px;
+  gap: 16px;
+  display: flex
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .icon {
@@ -33,6 +42,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .close-button {
@@ -66,4 +76,17 @@ button.cancel {
   background: white;
   border: 1px solid #ddd;
   color: royalblue;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.buttons{
+  display:flex;
+  gap: 8px;
 }
\ No newline at end of file
diff --git a/flex/06-flex-layout/style.css b/flex/06-flex-layout/style.css
index 3777aef335f..1e1766f5bdc 100644
--- a/flex/06-flex-layout/style.css
+++ b/flex/06-flex-layout/style.css
@@ -5,6 +5,9 @@ body {
   margin: 0;
   overflow: hidden;
   font-family: Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 img {
@@ -16,6 +19,7 @@ button {
   border: none;
   border-radius: 8px;
   background: #eee;
+  padding: 8px 16px;
 }
 
 input {
@@ -24,3 +28,39 @@ input {
   padding: 8px 24px;
   width: 400px;
 }
+
+ul {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 16px
+}
+
+.header, .footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+}
+
+.left-links, .right-links {
+  display: flex;
+  gap: 16px;
+}
+
+.footer {
+  background-color: #eeeeee;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+a {
+  text-decoration: none;
+  color: grey;
+}
\ No newline at end of file
diff --git a/flex/07-flex-layout-2/index.html b/flex/07-flex-layout-2/index.html
index 85c1d0b75ca..e8ac751c2b0 100644
--- a/flex/07-flex-layout-2/index.html
+++ b/flex/07-flex-layout-2/index.html
@@ -11,23 +11,24 @@
     <div class="header">
       MY AWESOME WEBSITE
     </div>
-    
-    <div class="sidebar">
-      <ul>
-        <li><a href="#">⭐ - link one</a></li>
-        <li><a href="#">🦸🏽‍♂️ - link two</a></li>
-        <li><a href="#">🖌️ - link three</a></li>
-        <li><a href="#">👌🏽 - 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="middle">
+      <div class="sidebar">
+        <ul>
+          <li><a href="#">⭐ - link one</a></li>
+          <li><a href="#">🦸🏽‍♂️ - link two</a></li>
+          <li><a href="#">🖌️ - link three</a></li>
+          <li><a href="#">👌🏽 - link four</a></li>
+        </ul>
+      </div>
+      <div class="content">
+        <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
index 6caf04c7945..0a7c5bfbf6b 100644
--- a/flex/07-flex-layout-2/style.css
+++ b/flex/07-flex-layout-2/style.css
@@ -2,28 +2,69 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 0;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .header {
   height: 72px;
   background: darkmagenta;
   color: white;
+  font-size: 32px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
 }
 
 .footer {
   height: 72px;
   background: #eee;
   color: darkmagenta;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .sidebar {
   width: 300px;
   background: royalblue;
   box-sizing: border-box;
+  flex-shrink: 0;
+  padding: 16px;
 }
 
 .card {
   border: 1px solid #eee;
   box-shadow: 2px 4px 16px rgba(0,0,0,.06);
   border-radius: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  padding: 16px;
+}
+
+.middle {
+  display: flex;
+  flex-grow: 1;
+}
+
+.content {
+  display: flex;
+  padding: 48px;
+  flex-wrap: wrap;
+  gap: 32px;
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: white;
+  font-size: 24px;
 }
\ No newline at end of file
diff --git a/foundations/01-css-methods/index.html b/foundations/01-css-methods/index.html
index effe3cc3db0..0dd617e7700 100644
--- a/foundations/01-css-methods/index.html
+++ b/foundations/01-css-methods/index.html
@@ -1,14 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="stylesheet" href="styles.css">
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <style>
+      p {
+        color: white;
+        background-color: green;
+        font-size: 18;
+      }
+    </style>
     <title>Methods for Adding CSS</title>
   </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: 18;">Inline Method</button>
   </body>
 </html>
\ No newline at end of file
diff --git a/foundations/01-css-methods/styles.css b/foundations/01-css-methods/styles.css
new file mode 100644
index 00000000000..398dfbb13a4
--- /dev/null
+++ b/foundations/01-css-methods/styles.css
@@ -0,0 +1,9 @@
+/* styles.css */
+
+div {
+    color: white;
+    background-color: red;
+    font-size: 32;
+    text-align: center;
+    font-weight: bold
+}
\ No newline at end of file
diff --git a/foundations/02-class-id-selectors/index.html b/foundations/02-class-id-selectors/index.html
index 263042ae92a..7121aec24e8 100644
--- 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="two">Number 2 - I'm one ID.</div>
+    <p class="odd three">Number 3 - I'm a class, but cooler!</p>
+    <div id="four">Number 4 - I'm another ID.</div>
+    <p class="odd"> 5 - I'm a class!</p>
   </body>
 </html>
\ No newline at end of file
diff --git a/foundations/02-class-id-selectors/style.css b/foundations/02-class-id-selectors/style.css
index e69de29bb2d..6b20cd1b291 100644
--- a/foundations/02-class-id-selectors/style.css
+++ b/foundations/02-class-id-selectors/style.css
@@ -0,0 +1,21 @@
+/* styles.css */
+
+.odd {
+    background-color: pink;
+    font-family: Verdana, 'DejaVu Sans', 'sans-serif';
+}
+
+#two {
+    color: blue;
+    font-size: 36px;
+}
+
+.odd.three {
+    font-size: 24px;
+}
+
+#four {
+    background-color: lightgreen;
+    font-size: 24px;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/foundations/03-grouping-selectors/index.html b/foundations/03-grouping-selectors/index.html
index 796431e53ea..9a66beb15b9 100644
--- a/foundations/03-grouping-selectors/index.html
+++ b/foundations/03-grouping-selectors/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+  <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <button>Click Me!</button>
-    <button>No, Click Me!</button>
+    <button class="one">Click Me!</button>
+    <button class="two">No, Click Me!</button>
   </body>
 </html>
\ No newline at end of file
diff --git a/foundations/03-grouping-selectors/style.css b/foundations/03-grouping-selectors/style.css
index e69de29bb2d..638feec998c 100644
--- a/foundations/03-grouping-selectors/style.css
+++ b/foundations/03-grouping-selectors/style.css
@@ -0,0 +1,14 @@
+.one,
+.two {
+   font-size: 28px; 
+   font-family: Helvetica, 'Times New Roman', sans-serif;
+}
+
+.one {
+    color: white;
+    background-color: black;
+}
+
+.two {
+    background-color: yellow;
+}
\ No newline at end of file
diff --git a/foundations/04-chaining-selectors/style.css b/foundations/04-chaining-selectors/style.css
index d55c2c5c709..810f1299790 100644
--- a/foundations/04-chaining-selectors/style.css
+++ b/foundations/04-chaining-selectors/style.css
@@ -1 +1,11 @@
-/* Add CSS Styling */
\ No newline at end of file
+/* Add CSS Styling */
+
+.avatar.proportioned {
+    height: auto;
+    width: 300px;
+}
+
+.avatar.distorted {
+    width: 200px;
+    height: 400px
+}
\ No newline at end of file
diff --git a/foundations/05-descendant-combinator/style.css b/foundations/05-descendant-combinator/style.css
index e69de29bb2d..60ce8a16db4 100644
--- a/foundations/05-descendant-combinator/style.css
+++ b/foundations/05-descendant-combinator/style.css
@@ -0,0 +1,6 @@
+div p {
+    background-color: yellow;
+    color: red;
+    font-size: 20px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css
index daf07e0e8a4..2d129a6cf69 100644
--- a/foundations/06-cascade-fix/style.css
+++ b/foundations/06-cascade-fix/style.css
@@ -8,7 +8,7 @@ body {
   font-weight: 800;
 }
 
-.small-para {
+.para.small-para {
   font-size: 14px;
   font-weight: 800;
 }
@@ -17,12 +17,13 @@ body {
   font-size: 22px;
 }
 
-.confirm {
+#confirm-button {
   background: green;
   color: white;
   font-weight: bold;
 } 
 
+
 .button {
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
@@ -40,3 +41,8 @@ div.text {
   font-size: 22px;
   font-weight: 100;
 }
+
+.text.child{
+  font-size: 14px;
+  font-weight: 800;
+}
\ No newline at end of file
diff --git a/margin-and-padding/01-margin-and-padding-1/style.css b/margin-and-padding/01-margin-and-padding-1/style.css
index f4d0a708453..c5d9651407b 100644
--- a/margin-and-padding/01-margin-and-padding-1/style.css
+++ b/margin-and-padding/01-margin-and-padding-1/style.css
@@ -7,15 +7,15 @@ 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 {
@@ -23,6 +23,7 @@ body {
   border: 3px solid brown;
   width: 200px;
   /* CHANGE ME */
-  padding: 0px;
-  margin-left: 0px;
+  padding: 32px;
+  margin-left: auto;
+  
 }
\ No newline at end of file
diff --git a/margin-and-padding/02-margin-and-padding-2/style.css b/margin-and-padding/02-margin-and-padding-2/style.css
index 00d1de59bf9..f730474fe2a 100644
--- a/margin-and-padding/02-margin-and-padding-2/style.css
+++ b/margin-and-padding/02-margin-and-padding-2/style.css
@@ -1,27 +1,45 @@
 body {
   background: #eee;
   font-family: sans-serif;
+  margin: 8px;
 }
 
 .card {
   width: 400px;
   background: #fff;
   margin: 16px auto;
+  padding: 8px;
 }
 
 .title {
   background: #e3f4ff;
+  font-size: 16px;
+  padding: 8px;
+  margin: 8px;
 }
 
 .content {
   background: #e3f4ff;
+  margin: 8px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .button-container {
   background: #e3f4ff;
+  text-align: center;
+  padding: 8px;
+  margin: 8px;
 }
 
 button {
+  display: inline-block;
   background: white;
   border: 1px solid #eee;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
 }
\ No newline at end of file