TheOdinProject · lambrugeorge · Oct 25, 2024 · Oct 26, 2024 · Oct 26, 2024 · Oct 26, 2024
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/forms": [
+      "default",
+      {
+        "label": "off"
+      }
+    ]
+  }
+}
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
@@ -6,23 +6,20 @@ body {
 .one {
   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;
 }
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,27 +1,39 @@
 body {
   background: #eee;
   font-family: sans-serif;
+
 }
 
 .card {
   width: 400px;
   background: #fff;
   margin: 16px auto;
+  padding: 8px;
+
 }
 
 .title {
   background: #e3f4ff;
+  font-size: 16px;
+  margin-bottom: 8px;
 }
 
 .content {
   background: #e3f4ff;
+  padding: 16px 8px 16px 8px;
+  margin-bottom: 8px;
 }
 
 .button-container {
   background: #e3f4ff;
+  padding: 8px;
+  text-align: center;
 }
 
 button {
   background: white;
   border: 1px solid #eee;
+  padding: 8px 24px 8px 24px;
+  display: block;
+  margin: 0 auto;
 }
diff --git a/foundations/cascade/01-cascade-fix/index.html b/foundations/cascade/01-cascade-fix/index.html
@@ -9,7 +9,7 @@
   </head>
   <body>
     <p class="para">I'm just a paragraph with extra bold text!</p>
-    <p class="para small-para">I'm a smaller paragraph, also with extra bold text!</p>
+    <p class="para small-para" id="small-paragraph">I'm a smaller paragraph, also with extra bold text!</p>
 
     <button id="confirm-button" class="button confirm">Confirm</button>
     <button id="cancel-button" class="button cancel">Cancel</button>

diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css
@@ -3,21 +3,18 @@ body {
 }
 
 .para,
-.small-para {
+#small-paragraph {
   color: hsl(0, 0%, 0%);
   font-weight: 800;
-}
-
-.small-para {
-  font-size: 14px;
-  font-weight: 800;
+  font-size: 10px;
 }
 
 .para {
   font-size: 22px;
+  font-weight: 900;
 }
 
-.confirm {
+#confirm-button {
   background: green;
   color: white;
   font-weight: bold;
@@ -40,3 +37,8 @@ div.text {
   font-size: 22px;
   font-weight: 100;
 }
+
+.text > .child {
+  font-weight: 900;
+  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;
+  justify-content: center;
+  align-items: 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: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .logo {
@@ -9,17 +13,22 @@
   color: tomato;
   background: white;
   padding: 4px 32px;
+  align-self: center;
+  justify-content: center;
 }
 
 ul {
-  /* this removes the dots on the list items*/
-  list-style-type: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: 10px;
 }
 
 a {
   font-size: 22px;
   background: white;
   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
@@ -7,6 +7,7 @@
     <title>Flex Header 2</title>
     <link rel="stylesheet" href="style.css">
   </head>
+
   <body>
     <div class="header">
       <div class="logo">

diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css
@@ -3,7 +3,7 @@ you'll learn about it later. */
 @import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap');
 
 body {
-  margin: 0;
+  margin: 0 auto;
   background: #eee;
   font-family: Besley, serif;
 }
@@ -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 {
@@ -40,9 +43,19 @@ button {
 a {
   /* this removes the line under our links */
   text-decoration: none;
-  color: rebeccapurple;
+  color: rgb(135, 76, 195);
+
 }
 
 ul {
+  gap: 10px;
   list-style-type: none;
+  display: flex;
+  gap: 16px;
 }
+
+.left, .right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
diff --git a/foundations/flex/04-flex-information/index.html b/foundations/flex/04-flex-information/index.html
@@ -10,17 +10,25 @@
   <body>
     <div class="title">Information!</div>
 
+    <div class="container">
+    <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>
+   <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>
+<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">

diff --git a/foundations/flex/04-flex-information/style.css b/foundations/flex/04-flex-information/style.css
@@ -1,17 +1,41 @@
 body {
   font-family: 'Courier New', Courier, monospace;
+  text-align: center;
 }
 
 img {
-  width: 100px;
-  height: 100px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 52px;
+  height: 0 auto;
+  width: 200px;
+  padding: 32px;
+}
+
+.text {
+  display: inline;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
+.info {
+  max-width: 200px;
+  height: auto;
+}
 .title {
   font-size: 36px;
   font-weight: 900;
+  margin-bottom: 32px;
 }
 
+.container{
+  display: flex;
+  justify-content: center;
+  gap: 52px
+}
+
+
 /* do not edit this footer */
 .footer {
   position: fixed;

diff --git a/foundations/flex/05-flex-modal/index.html b/foundations/flex/05-flex-modal/index.html
@@ -10,11 +10,14 @@
   <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="container">
+        <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>
+        <button class="continue">Continue</button>
+        <button class="cancel">Cancel</button>
+      </div>
     </div>
   </body>
 </html>
diff --git a/foundations/flex/05-flex-modal/style.css b/foundations/flex/05-flex-modal/style.css
@@ -2,14 +2,14 @@
 
 html, body {
   height: 100%;
+
 }
 
 body {
   font-family: Roboto, sans-serif;
-  margin: 0;
+  margin:auto auto;
   background: #aaa;
   color: #333;
-  /* I'll give you this one for free lol */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -20,8 +20,21 @@ body {
   width: 480px;
   border-radius: 10px;
   box-shadow: 2px 4px 16px rgba(0,0,0,.2);
+  display: flex;
+  gap: 15px;
+  padding: 20px;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 20px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+
 .icon {
   color: royalblue;
   font-size: 26px;
@@ -33,8 +46,11 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+}
+.text {
+  margin-bottom: 30px;
 }
-
 .close-button {
   background: #eee;
   border-radius: 50%;
@@ -56,14 +72,18 @@ button {
   border-radius: 8px;
 }
 
+
 button.continue {
   background: royalblue;
   border: 1px solid royalblue;
   color: white;
+  justify-content: flex-start;
 }
 
 button.cancel {
   background: white;
   border: 1px solid #ddd;
   color: royalblue;
+  display: inline;
+  justify-content: flex-end;
 }