TheOdinProject · May 18, 2024 · May 19, 2024
diff --git a/foundations/01-css-methods/index.css b/foundations/01-css-methods/index.css
@@ -0,0 +1,7 @@
+div {
+    background-color: red;
+    color: white;
+    font-size: 32px;
+    text-align: center;
+    font-weight: bold;
+}
diff --git a/foundations/01-css-methods/index.html b/foundations/01-css-methods/index.html
@@ -5,10 +5,19 @@
     <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="index.css">
+
+    <style>
+      p {
+        background-color: green;
+        font-size: 16px;
+        color: white;
+      }
+    </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/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 class="second">Number 2 - I'm one ID.</div>
+    <p class="odd third">Number 3 - I'm a class, but cooler!</p>
+    <div class="fourth">Number 4 - I'm another ID.</div>
+    <p class="odd">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 @@
+.odd {
+    background-color: rgb(248, 128, 166);
+    font-family: Verdana, "DejaVu Sans", sans-serif
+}
+
+.second {
+    color: hsl(240, 100%, 50%);
+    font-size: 36px;
+}
+
+.third {
+    font-size: 24px;
+}
+
+.fourth {
+    background-color: hsl(112, 100%, 69%);
+    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="first">Click Me!</button>
+    <button class="second">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 @@
+.first, .second {
+    font-size: 28px;
+    font-family: 'Helvetica', 'Times New Roman', sans-serif
+}
+
+.first {
+    color: rgb(255, 255, 255);
+    background-color: rgb(0,0,0);
+}
+
+.second{
+    background-color: hsl(60, 100%, 50%)
+}
diff --git a/foundations/04-chaining-selectors/style.css b/foundations/04-chaining-selectors/style.css
@@ -1 +1,11 @@
-/* Add CSS Styling */
+/* Add CSS Styling */
+
+.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 @@
+div p {
+    background-color: yellow;
+    color: red;
+    text-align: center;
+    font-size: 20px;
+}
diff --git a/foundations/06-cascade-fix/style.css b/foundations/06-cascade-fix/style.css
@@ -1,42 +1,43 @@
-body {
-  font-family: Arial, Helvetica, sans-serif;
+.para {
+  font-size: 22px;
 }
 
-.para,
 .small-para {
-  color: hsl(0, 0%, 0%);
+  font-size: 14px;
   font-weight: 800;
 }
 
+.para,
 .small-para {
-  font-size: 14px;
+  color: hsl(0, 0%, 0%);
   font-weight: 800;
 }
 
-.para {
-  font-size: 22px;
-}
 
-.confirm {
-  background: green;
-  color: white;
-  font-weight: bold;
-} 
-
-.button {
-  background-color: rgb(255, 255, 255);
+div.text {
   color: rgb(0, 0, 0);
-  font-size: 20px;
+  font-size: 22px;
+  font-weight: 100;
 }
 
-.child {
+.text.child {
   color: rgb(0, 0, 0);
   font-weight: 800;
   font-size: 14px;
 }
 
-div.text {
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.button {
+  background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
-  font-size: 22px;
-  font-weight: 100;
+  font-size: 20px;
 }
+
+.button.confirm {
+  background: green;
+  color: white;
+  font-weight: bold;
+} 
diff --git a/margin-and-padding/01-margin-and-padding-1/style.css b/margin-and-padding/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: 20px;
+  margin: 15px 20px;
 }
 
 .two {
   background: lightblue;
   border: 3px solid purple;
   /* CHANGE ME */
-  margin-bottom: 0px;
+  margin-bottom: 50px;
 }
 
 .three {
   background: peachpuff;
   border: 3px solid brown;
   width: 200px;
   /* CHANGE ME */
-  padding: 0px;
-  margin-left: 0px;
+  padding: 20px;
+  margin-left: auto;
 }
diff --git a/margin-and-padding/02-margin-and-padding-2/index.html b/margin-and-padding/02-margin-and-padding-2/index.html
@@ -11,7 +11,7 @@
     <div class="card">
       <h1 class="title">I'm a card</h1>
       <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
-      <div class="button-container">and a <button>BIG BUTTON</button></div>
+      <div class="button-container">and a <hr> <button>BIG BUTTON</button></div>
     </div>
   </body>
 </html>
diff --git 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,49 @@
 body {
   background: #eee;
   font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .card {
   width: 400px;
   background: #fff;
   margin: 16px auto;
+  border: 8px solid white;
+}
+
+.card > * {
+  margin-bottom: 8px;
+  padding: 8px;
 }
 
 .title {
   background: #e3f4ff;
+  font-size: 16px;
+  margin-top: 0;
 }
 
 .content {
   background: #e3f4ff;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 
 .button-container {
+  text-align: center;
   background: #e3f4ff;
+  margin-bottom: 0;
 }
 
 button {
   background: white;
   border: 1px solid #eee;
+  padding: 8px 24px;
+  /* width: 100%; */
+}
+
+hr {
+  visibility: hidden;
+  margin: 0;
 }