Ch. 33 - CHALLENGE jonasschmedtmann#1

FrankGecko · FrankGecko · commit 29a36c173494 · 2022-11-21T09:56:41.000+02:00
diff --git a/starter/03-CSS-Fundamentals/challenge/1/index.html b/starter/03-CSS-Fundamentals/challenge/1/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Challenge #1</title>
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <article class="product">
+      <h2>Converse Chuck Taylor All Star Low top</h2>
+      <img
+        src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
+        alt="sneakers"
+        height="250"
+        width="250"
+      />
+      <p><strong class="price">$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 href="#">More information &rightarrow;</a>
+
+      <article>
+        <h3>Product details</h3>
+        <ul>
+          <li>Lightweight, durable cavas sneaker</li>
+          <li>Lightly padded footbed for added comfort</li>
+          <li>Iconic Chuck Taylor ankle patch.</li>
+        </ul>
+      </article>
+      <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,54 @@
+body {
+  font-family: sans-serif;
+  line-height: 1.4;
+}
+
+.product {
+  border: 4px solid #000;
+}
+
+h2 {
+  text-transform: uppercase;
+  text-align: center;
+  background-color: #d3d3d3;
+}
+
+.price {
+  font-size: 22px;
+}
+
+.shipping {
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #777;
+}
+
+a:link,
+a:visited,
+a:hover,
+a:active {
+  color: #000;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+ul li {
+  list-style: square;
+}
+
+button {
+  background-color: #000;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  font-size: 20px;
+  text-transform: uppercase;
+}
+
+button:hover {
+  background-color: #fff;
+  color: #000;
+}
