ronanmoriarty · ronanmoriarty · Feb 5, 2025 · Jan 31, 2025 · Jan 31, 2025 · Jan 31, 2025
diff --git a/starter/03-CSS-Fundamentals/.vscode/settings.json b/starter/03-CSS-Fundamentals/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}
diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/challenges.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/challenges.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/laura-jones.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/post-img.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/post-img.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/related-1.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/related-1.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/related-2.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/related-2.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-2/img/related-3.jpg b/starter/03-CSS-Fundamentals/challenge-2/img/related-3.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-2/index.html b/starter/03-CSS-Fundamentals/challenge-2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Challenge 3</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <article>
+      <h2>Converse Chuck Taylor All Star Low Top</h2>
+      <img
+        src="img/challenges.jpg"
+        alt="Chuck Taylor All Star Shoe"
+        width="250"
+        height="250"
+      />
+      <p class="price"><strong>$65.00</strong></p>
+      <p class="shipping">Free shipping</p>
+      <p>
+        Ready to dress up or down, these classic canvas Chucks are an everyday
+        wardrobe staple.
+      </p>
+      <p><a class="more-info" href="#">More information &rarr;</a></p>
+      <h3 class="details-title">Product details</h3>
+      <ul class="details-list">
+        <li>Lightweight, durable canvas sneaker</li>
+        <li>Lightly padded footbed for added comfort</li>
+        <li>Iconic Chuck Taylor ankle patch</li>
+      </ul>
+      <button class="add-to-cart">Add to cart</button>
+    </article>
+  </body>
+</html>
diff --git a/starter/03-CSS-Fundamentals/challenge-2/styles.css b/starter/03-CSS-Fundamentals/challenge-2/styles.css
@@ -0,0 +1,59 @@
+body {
+    font-family: sans-serif;
+    font-size: 14px;
+}
+
+article {
+    border: 5px solid black;
+}
+
+h2 {
+    text-align: center;
+    background-color: #eee;
+}
+
+.price {
+    font-size: 20px;
+}
+
+.shipping {
+    text-transform: uppercase;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.more-info:link, .more-info:visited {
+    color: black;
+}
+
+.more-info:hover, .more-info:active {
+    text-decoration: none;
+}
+
+/* Product Details */
+
+.details-title {
+    text-transform: uppercase;
+    font-size: 16px;
+}
+
+.details-list {
+    list-style-type:square;
+}
+
+/* Button */
+
+.add-to-cart {
+    border: none;
+    background-color: black;
+    color: white;
+    font-size: 20px;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
+.add-to-cart:hover {
+    background-color: white;
+    color: black;
+}
diff --git a/starter/03-CSS-Fundamentals/challenge-3/.vscode/settings.json b/starter/03-CSS-Fundamentals/challenge-3/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}
diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/challenges.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/challenges.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/laura-jones.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/post-img.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/post-img.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/related-1.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/related-1.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/related-2.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/related-2.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-3/img/related-3.jpg b/starter/03-CSS-Fundamentals/challenge-3/img/related-3.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-3/index.html b/starter/03-CSS-Fundamentals/challenge-3/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Challenge 3</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <article class="product">
+      <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+      <img
+        src="img/challenges.jpg"
+        alt="Chuck Taylor All Star Shoe"
+        width="250"
+        height="250"
+      />
+      <p class="price"><strong>$65.00</strong></p>
+      <p class="shipping">Free shipping</p>
+      <p>
+        Ready to dress up or down, these classic canvas Chucks are an everyday
+        wardrobe staple.
+      </p>
+      <p class="more-info-container">
+        <a class="more-info" href="#">More information &rarr;</a>
+      </p>
+      <h3 class="details-title">Product details</h3>
+      <ul class="details-list">
+        <li>Lightweight, durable canvas sneaker</li>
+        <li>Lightly padded footbed for added comfort</li>
+        <li>Iconic Chuck Taylor ankle patch</li>
+      </ul>
+      <button class="add-to-cart">Add to cart</button>
+    </article>
+  </body>
+</html>
diff --git a/starter/03-CSS-Fundamentals/challenge-3/styles.css b/starter/03-CSS-Fundamentals/challenge-3/styles.css
@@ -0,0 +1,86 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+.product {
+  border: 4px solid black;
+  width: 825px;
+  margin: 50px auto;
+}
+
+.product-title {
+  text-align: center;
+  font-size: 22px;
+  background-color: #eee;
+  text-transform: uppercase;
+  padding: 15px 0;
+}
+
+p {
+  margin-bottom: 10px;
+}
+
+.price {
+  font-size: 20px;
+  margin-bottom: 5px;
+}
+
+.shipping {
+  text-transform: uppercase;
+  color: #aaa;
+  font-size: 12px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.more-info:link,
+.more-info:visited {
+  color: black;
+}
+
+.more-info:hover,
+.more-info:active {
+  text-decoration: none;
+}
+
+/* Product Details */
+
+.details-title {
+  text-transform: uppercase;
+  font-size: 16px;
+  margin-top: 30px;
+  margin-bottom: 15px;
+}
+
+.details-list {
+  list-style-type: square;
+  margin-left: 20px;
+}
+
+.details-list li {
+  margin-bottom: 10px;
+}
+/* Button */
+
+.add-to-cart {
+  border: none;
+  background-color: black;
+  color: white;
+  font-size: 20px;
+  text-transform: uppercase;
+  cursor: pointer;
+  padding: 15px;
+  width: 100%;
+}
+
+.add-to-cart:hover {
+  border-top: 4px solid black;
+  background-color: white;
+  color: black;
+}
diff --git a/starter/03-CSS-Fundamentals/challenge-4/.vscode/settings.json b/starter/03-CSS-Fundamentals/challenge-4/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}
diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/challenges.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/challenges.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/laura-jones.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/post-img.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/post-img.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/related-1.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/related-1.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/related-2.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/related-2.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-4/img/related-3.jpg b/starter/03-CSS-Fundamentals/challenge-4/img/related-3.jpg
diff --git a/starter/03-CSS-Fundamentals/challenge-4/index.html b/starter/03-CSS-Fundamentals/challenge-4/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Challenge 3</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <article class="product">
+      <p class="sale">sale</p>
+      <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+      <img
+        src="img/challenges.jpg"
+        alt="Chuck Taylor All Star Shoe"
+        width="250"
+        height="250"
+      />
+      <p class="price"><strong>$65.00</strong></p>
+      <p class="shipping">Free shipping</p>
+      <p>
+        Ready to dress up or down, these classic canvas Chucks are an everyday
+        wardrobe staple.
+      </p>
+      <a class="more-info" href="#">More information &rarr;</a>
+      <div class="colors">
+        <div class="color"></div>
+        <div class="color color-blue"></div>
+        <div class="color color-red"></div>
+        <div class="color color-yellow"></div>
+        <div class="color color-green"></div>
+        <div class="color color-brown"></div>
+      </div>
+      <h3 class="details-title">Product details</h3>
+      <ul class="details-list">
+        <li>Lightweight, durable canvas sneaker</li>
+        <li>Lightly padded footbed for added comfort</li>
+        <li>Iconic Chuck Taylor ankle patch</li>
+      </ul>
+      <button class="add-to-cart">Add to cart</button>
+    </article>
+  </body>
+</html>