TheOdinProject · Prateek14b · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025 · Feb 3, 2025
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,24 @@ 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;
+
+}
+/*exerise has already been solved.*/
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
@@ -1,3 +1,6 @@
+*{
+  box-sizing: border-box;
+}
 body {
   background: #eee;
   font-family: sans-serif;
@@ -6,22 +9,41 @@ body {
 .card {
   width: 400px;
   background: #fff;
-  margin: 16px auto;
+  margin: auto;
+  padding: 8px;
 }
 
 .title {
   background: #e3f4ff;
+  margin: 8px;
+  padding: 8px;
 }
 
 .content {
   background: #e3f4ff;
+  display:block;
+  margin: 8px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .button-container {
   background: #e3f4ff;
+  display:block;
+  margin: 8px;
+  padding: 8px;
+  text-align: center;
 }
 
 button {
   background: white;
   border: 1px solid #eee;
-}
+  display: block;
+  padding: 8px 24px 8px 24px;
+  margin: 0px auto;
+}
+
+/*.button-container, .content, .title, .button, .card {
+  border: 2px red solid;*/
diff --git a/foundations/cascade/01-cascade-fix/index.html b/foundations/cascade/01-cascade-fix/index.html
@@ -20,3 +20,4 @@
     </div>
   </body>
 </html>
+<!--yeah, im calling it a day. woohoo-->
diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css
@@ -8,17 +8,18 @@ body {
   font-weight: 800;
 }
 
-.small-para {
-  font-size: 14px;
-  font-weight: 800;
-}
-
+/* just repositioned this .para class selector above .small-para. This ensures this class property gets overruled by the one below it. */
 .para {
   font-size: 22px;
 }
 
-.confirm {
-  background: green;
+.small-para {
+  font-size: 14px;
+  font-weight: 800;
+}
+/*changed background to background-color as error correction. Also, chained classes together to get precedence.*/
+.confirm.button {
+  background-color: green;
   color: white;
   font-weight: bold;
 } 
@@ -28,8 +29,8 @@ body {
   color: rgb(0, 0, 0);
   font-size: 20px;
 }
-
-.child {
+/*chained three selectors to target the child div element, and give this precedence over the 2-chained selector below. */
+div.child.text { 
   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,13 +3,19 @@
   border: 4px solid midnightblue;
   width: 400px;
   height: 300px;
+  display: flex;
+  justify-content: center; /* centers the flex items horizontally */
+  align-items: center;
 }
 
-.box {
+.container > .box {
   background: palevioletred;
   font-weight: bold;
   text-align: center;
   border: 6px solid maroon;
   width: 80px;
   height: 80px;
-}
+}
+
+/* man i just learned a bit of flexbox and it seems pretty easy so far! Plus, i just wanted to wrap today with a few pushed commits hehe!
+/* flex container contain flex items, and mostly you can just apply css properties or rules to the flex container to tweak the child flex items' alignment and order and basically everything.
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;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
 }
 
 .logo {
@@ -13,7 +17,12 @@
 
 ul {
   /* this removes the dots on the list items*/
+
   list-style-type: none;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  gap: 8px;
 }
 
 a {
@@ -22,4 +31,5 @@ a {
   padding: 8px;
   /* this removes the line under the links */
   text-decoration: none;
-}
+}
+
diff --git a/foundations/flex/03-flex-header-2/index.html b/foundations/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>
diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/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;
+  justify-content: space-between;
+  padding: 8px;
 }
 
 .profile-image {
@@ -27,22 +30,36 @@ body {
   font-size: 32px;
   font-weight: 900;
   font-style: italic;
+  margin: 0px;
 }
 
 button {
   border: none;
   border-radius: 8px;
   background: rebeccapurple;
   color: white;
-  padding: 8px 24px;
+  padding: 8px 24px
 }
 
 a {
   /* this removes the line under our links */
   text-decoration: none;
   color: rebeccapurple;
+  margin: 0px;
+  padding: 0px;
 }
 
 ul {
   list-style-type: none;
+  display: flex;
+  gap: 16px;
+  padding: 0px;
+  margin: 0px;
+  align-items: center;
+}
+
+.left, .right {
+  align-items: center;
+  display: flex;
+  gap: 16px;
 }
diff --git a/foundations/flex/04-flex-information/index.html b/foundations/flex/04-flex-information/index.html
@@ -8,20 +8,28 @@
     <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>
+  <div class="title">Information!</div>
+  <div class="actual-info">
+    <div class="info">
+      <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/pepper.png" alt="pepper">
-    <div class="text">We have so many plants. Yay plants.</div>
+    <div class="info">
+      <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/saffron.png" alt="saffron">
-    <div class="text">I'm running out of things to say about plants.</div>
+    <div class="info">
+      <img src="./images/pepper.png" alt="pepper">
+      <div class="text">We have so many plants. Yay plants.</div>
+    </div>
 
+    <div class="info">
+      <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,5 +1,6 @@
 body {
   font-family: 'Courier New', Courier, monospace;
+  text-align: center;
 }
 
 img {
@@ -10,6 +11,20 @@ img {
 .title {
   font-size: 36px;
   font-weight: 900;
+  text-align: center;
+  margin: 0px auto 32px auto;
+}
+
+.actual-info{
+  display: flex;
+  justify-content: center;
+  gap: 52px;
+}
+
+.info{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 /* do not edit this footer */

diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html
@@ -8,13 +8,23 @@
     <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"> 
+      <div class="top-icons">
+        <div class="caution">
+          <div class="icon">!</div>
+          <div class="header">Are you sure you want to do that?</div>
+        </div>
+        <button class="close-button">✖</button>
+      </div>
+
+      <div class="rest-of-box">
+        <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="lower-buttons">
+          <button class="continue">Continue</button>
+          <button class="cancel">Cancel</button>
+        </div>
+      </div>
     </div>
   </body>
-</html>
+</html>
+<!--unlocked a realisation-->
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,3 +20,4 @@ @@
         </div>
       </body>
     </html>
+    <!--yeah, im calling it a day. woohoo-->