section-3: Completed challenge 1.

owen-webb · owen-webb · commit 948c092bc6c8 · 2022-08-28T11:30:21.000-06:00
diff --git a/starter/03-CSS-Fundamentals/challenge-1/index.html b/starter/03-CSS-Fundamentals/challenge-1/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <header>
+    <title>Section 2 - Challenge #2</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+  </header>
+
+  <body>
+    <article class="product">
+      <h2 class="product-header">Converse Chuck Taylor All Star Low Top</h2>
+
+      <img alt="Converse shoes."
+            height="250"
+            src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
+            width="250">
+
+      <p class="pricing-details"><strong>$65.00</strong></p>
+      <p class="shipping-details">Free shipping</p>
+      <p>Ready to dress up or down, these classic canvas Chucks are an everday wardrobe staple.</p>
+      <p>
+        <a href="#">More information &rightarrow;</a>
+      </p>
+
+      <h4>Product details</h4>
+      <ul>
+        <li>Lightweight, durable canvas sneaker</li>
+        <li>Lightly padded footbed for added comfort</li>
+        <li>Iconic Chuck Taylor ankle patch.</li>
+      </ul>
+
+      <button>Add to cart</button>
+    </article>
+  </body>
+</html>
diff --git a/starter/03-CSS-Fundamentals/challenge-1/style.css b/starter/03-CSS-Fundamentals/challenge-1/style.css
@@ -0,0 +1,56 @@
+body {
+  font-family: sans-serif;
+  line-height: 1.4;
+}
+
+/* Use classes for all styling other than body. */
+
+a {
+  color: black;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+button {
+  background-color: black;
+  border: none;
+  color: white;
+  text-transform: uppercase;
+}
+
+button:hover {
+  background-color: white;
+  color: black;
+  cursor: pointer;
+}
+
+li {
+  list-style-type: square;
+}
+
+h2, h4 {
+  text-transform: uppercase;
+}
+
+.product {
+  border: 4px solid black;
+}
+
+.product-header {
+  background-color: #f7f7f7;
+  font-size: 22px;
+  text-align: center;
+}
+
+.pricing-details {
+  font-size: 24px;
+}
+
+.shipping-details {
+  color: #777;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
