Completed Challenge jonasschmedtmann#1

jamesacox53 · jamesacox53 · commit c464e73c3c2d · 2022-08-16T21:08:31.000+01:00
diff --git a/myWork/03-CSS-Fundamentals/challenges/challenge1css.css b/myWork/03-CSS-Fundamentals/challenges/challenge1css.css
@@ -0,0 +1,63 @@
+body {
+  font-family: sans-serif;
+  line-height: 1.4;
+}
+
+.product {
+  border: 4px solid black;
+}
+
+.product-name {
+  text-transform: uppercase;
+  font-size: 22px;
+  font-weight: bold;
+  background-color: #f7f7f7;
+  text-align: center;
+}
+
+.price {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.shipping {
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: bold;
+  color: #1098ad;
+}
+
+.more-info-link:link,
+.more-info-link:visited {
+  color: black;
+}
+
+.more-info-link:hover,
+.more-info-link:active {
+  color: black;
+  text-decoration: none;
+}
+
+.product-details-heading {
+  text-transform: uppercase;
+  font-size: 18px;
+}
+
+.product-details-list {
+  list-style-type: square;
+}
+
+.add-to-cart-button {
+  text-transform: uppercase;
+  background-color: black;
+  color: white;
+  border: 1px solid black;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.add-to-cart-button:hover {
+  background-color: white;
+  color: black;
+  border: 1px solid white;
+}
diff --git a/myWork/03-CSS-Fundamentals/challenges/challenge1html.html b/myWork/03-CSS-Fundamentals/challenges/challenge1html.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Section 2 - Challenge #2</title>
+    <link href="challenge1css.css" rel="stylesheet" />
+  </head>
+  <body>
+    <article class="product">
+      <header>
+        <h2 class="product-name">Converse Chuck Taylor All Star Low Top</h2>
+        <img
+          src="../images/challenges.jpg"
+          alt="Converse Chuck Taylor All Star Low Top"
+          height="250"
+          width="250"
+        />
+      </header>
+
+      <h4 class="price">$65.00</h4>
+
+      <p class="shipping">Free shipping</p>
+
+      <p>
+        Ready to dress up or down, these classic canvas Chucks are an everyday
+        wardrobe staple.
+      </p>
+
+      <a href="#" target="_blank" class="more-info-link"
+        >More information &rarr;</a
+      >
+
+      <h3 class="product-details-heading">Product details</h3>
+
+      <ul class="product-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-button">Add to cart</button>
+    </article>
+  </body>
+</html>
