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/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html
@@ -5,10 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Methods for Adding CSS</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+      p {
+        background: 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: orange; font-size: 18px;">Inline Method</button>
   </body>
 </html>
diff --git a/foundations/intro-to-css/01-css-methods/styles.css b/foundations/intro-to-css/01-css-methods/styles.css
@@ -0,0 +1,7 @@
+div {
+    background: red;
+    color: white;
+    font-size: 32px;
+    font-weight: bold;
+    text-align: center;     
+}
diff --git a/foundations/intro-to-css/02-class-id-selectors/index.html b/foundations/intro-to-css/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="description odd">Number 1 - I'm a class!</p>
+    <div id="even-one" class="text">Number 2 - I'm one ID.</div>
+    <p class="description odd cool">Number 3 - I'm a class, but cooler!</p>
+    <div id="even-two" class="text">Number 4 - I'm another ID.</div>
+    <p class="description odd">Number 5 - I'm a class!</p>
   </body>
 </html>
diff --git a/foundations/intro-to-css/02-class-id-selectors/style.css b/foundations/intro-to-css/02-class-id-selectors/style.css
@@ -0,0 +1,22 @@
+.description.odd  {
+    font-family: 'Verdana', 'DejaVu Sans', sans-serif;
+    background-color:#dd77b1 ;
+}
+
+.description.odd.cool {
+    font-size: 24px;;
+}
+
+.text {
+    color: #153bc5;
+}
+
+#even-two {
+    background-color: #74be6a;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+#even-one {
+    font-size: 36px;
+}
diff --git a/foundations/intro-to-css/03-grouping-selectors/index.html b/foundations/intro-to-css/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="btn black">Click Me!</button>
+    <button class="btn yellow">No, Click Me!</button>
   </body>
 </html>
diff --git a/foundations/intro-to-css/03-grouping-selectors/style.css b/foundations/intro-to-css/03-grouping-selectors/style.css
@@ -0,0 +1,14 @@
+.btn.black {
+    background-color: #000;
+    color: #fff;
+}
+
+.btn.yellow {
+    background-color: #fff000;
+}
+
+.btn.black,
+.btn.yellow {
+    font-family: 'Helvetica', 'Times New Roman', sans-serif;
+    font-size: 28px;
+}
diff --git a/foundations/intro-to-css/04-chaining-selectors/style.css b/foundations/intro-to-css/04-chaining-selectors/style.css
@@ -1 +1,10 @@
-/* Add CSS Styling */
+/* Add CSS Styling */
+.avatar.proportioned {
+  width: 300px;
+  height: auto;
+}
+
+.avatar.distorted {
+  width: 300px;
+  height: 600px;
+}
diff --git a/foundations/intro-to-css/05-descendant-combinator/style.css b/foundations/intro-to-css/05-descendant-combinator/style.css
@@ -0,0 +1,13 @@
+/* .container .text {
+    background-color: #fff000;
+    color: #ff0000;
+    font-size: 20px;
+    text-align: center;
+} */
+
+div p {
+    background-color: #fff000;
+    color: #ff0000;
+    font-size: 20px;
+    text-align: center;
+}