TheOdinProject · malvin149 · Jun 7, 2025 · Jun 7, 2025 · Jun 7, 2025 · Jun 7, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 # Ignore MacOS autogenerated
 .DS_Store
+.vscode/
diff --git a/foundations/block-and-inline/01-margin-and-padding-1/style.css b/foundations/block-and-inline/01-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: 300px;
 }
diff --git a/foundations/block-and-inline/02-margin-and-padding-2/style.css b/foundations/block-and-inline/02-margin-and-padding-2/style.css
@@ -7,21 +7,32 @@ body {
   width: 400px;
   background: #fff;
   margin: 16px auto;
+  padding: 8px;
 }
 
 .title {
   background: #e3f4ff;
+  font-size: 16px;
+  margin-bottom: 8px;
+  padding: 8px;
 }
 
 .content {
   background: #e3f4ff;
+  padding: 16px 8px;
+  margin-bottom: 8px ;
 }
 
 .button-container {
   background: #e3f4ff;
+  text-align: center;
+  padding: 8px;
 }
 
 button {
   background: white;
   border: 1px solid #eee;
+  display: block;
+  margin: 0 auto;
+  padding: 8px 24px;
 }
diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css
@@ -2,22 +2,26 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.para,
-.small-para {
-  color: hsl(0, 0%, 0%);
-  font-weight: 800;
+.para {
+  font-size: 22px;
 }
 
 .small-para {
   font-size: 14px;
   font-weight: 800;
 }
 
-.para {
-  font-size: 22px;
+.para,
+.small-para {
+  color: hsl(0, 0%, 0%);
+  font-weight: 800;
 }
 
-.confirm {
+/* 
+  I used an ID selector to target the Confirm button as .confirm wasn't working
+ */
+
+#confirm-button {
   background: green;
   color: white;
   font-weight: bold;
@@ -29,14 +33,18 @@ body {
   font-size: 20px;
 }
 
-.child {
-  color: rgb(0, 0, 0);
-  font-weight: 800;
-  font-size: 14px;
-}
-
 div.text {
   color: rgb(0, 0, 0);
   font-size: 22px;
   font-weight: 100;
 }
+
+/* 
+I combined the type and class to target the div with a class child
+*/
+
+div.child {
+  color: rgb(0, 0, 0);
+  font-weight: 800;
+  font-size: 14px;
+}
diff --git a/foundations/flex/01-flex-center/style.css b/foundations/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/foundations/flex/02-flex-header/style.css b/foundations/flex/02-flex-header/style.css
@@ -1,6 +1,10 @@
 .header  {
   font-family: monospace;
   background: papayawhip;
+  padding: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .logo {
@@ -14,6 +18,10 @@
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
+  display: flex;
+  gap: 9px;
+  margin: 0;
+  padding: 0;
 }
 
 a {

diff --git a/foundations/flex/03-flex-header-2/index.html b/foundations/flex/03-flex-header-2/index.html
@@ -9,18 +9,26 @@
   </head>
   <body>
     <div class="header">
-      <div class="logo">
-        LOGO
+      <!-- .left-items is a container for both the logo and the links -->
+      <div class="left-items">
+        <div class="logo">
+          LOGO
+        </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>
+        </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">
+      <!-- .right-items is a container for both the button and the .profile-image -->
+      <div class="right-items">
+        <button class="notifications">
         1 new notification
-      </button>
-      <div class="profile-image"></div>
+        </button>
+        <div class="profile-image"></div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css
@@ -12,6 +12,22 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  /* This inserts a space between the items and the header */
+  padding: 8px;
+}
+
+/* 
+  This centers the logo and links on the right and the button and profile-image on the left
+*/
+
+.right-items,
+.left-items {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
 
 .profile-image {
@@ -45,4 +61,8 @@ a {
 
 ul {
   list-style-type: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 10px;
 }
diff --git a/foundations/flex/04-flex-information/index.html b/foundations/flex/04-flex-information/index.html
@@ -9,19 +9,24 @@
   </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="container">
+        <div class="frame">
+          <img src="./images/barberry.png" alt="barberry">
+          <div class="text">This is a type of plant. We love this one.</div>
+        </div>
+        <div class="frame">
+          <img src="./images/chilli.png" alt="chili">
+          <div class="text">This is another type of plant. Isn't it nice?</div>
+        </div>
+        <div class="frame">
+          <img src="./images/pepper.png" alt="pepper">
+          <div class="text">We have so many plants. Yay plants.</div>
+        </div>
+        <div class="frame">
+          <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/foundations/flex/04-flex-information/style.css b/foundations/flex/04-flex-information/style.css
@@ -1,12 +1,24 @@
 body {
   font-family: 'Courier New', Courier, monospace;
+  text-align: center;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  gap: 52px;
+  margin-top: 32px;
 }
 
 img {
   width: 100px;
   height: 100px;
 }
 
+.frame {
+  max-width: 200px;
+}
+
 .title {
   font-size: 36px;
   font-weight: 900;

diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html
@@ -8,13 +8,17 @@
     <title>Modal</title>
   </head>
   <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="modal"> <!-- main flex container -->
+        <div class="icon">!</div>
+        <div class="container">  <!-- flex container to align the contents vertically (header, close button, text, and the close and continue btns) -->
+          <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="btn-container">  <!-- flex container to align the buttons -->
+            <button class="continue">Continue</button>
+            <button class="cancel">Cancel</button>
+          </div>
+        </div>
     </div>
   </body>
 </html>
diff --git a/foundations/flex/05-flex-modal/style.css b/foundations/flex/05-flex-modal/style.css
@@ -15,11 +15,29 @@ body {
   justify-content: center;
 }
 
+div .header {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  font-size: 18px;
+}
+/* flex container for the header, close button and the main text */
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1; /* Flex 1 on the container makes the container grow to take rest of the space */
+  gap: 10px;
+}
+
 .modal {
   background: white;
   width: 480px;
   border-radius: 10px;
   box-shadow: 2px 4px 16px rgba(0,0,0,.2);
+  padding: 15px;  /* Add flexbox to the modal container to align icon next to the content */
+  display: flex;  /* Space between layout */
+  gap: 15px;
 }
 
 .icon {
@@ -32,7 +50,8 @@ body {
   border-radius: 50%;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center;  /* Prevents icon from shrinking */
+  flex-shrink: 0;
 }
 
 .close-button {
@@ -49,6 +68,11 @@ body {
   border: 1px solid #eee;
   padding: 0;
 }
+/* container for the continue and cancel buttons */
+.btn-container {
+  display: flex; /* makes the container a flexbox and aligns the buttons horizontally as the default flex direction is row */
+  gap: 10px;
+}
 
 button {
   cursor: pointer;