Ch. 38 Challenge jonasschmedtmann#2

FrankGecko · FrankGecko · commit 54e93b5751fc · 2023-07-30T13:20:04.000+02:00
diff --git a/starter/03-CSS-Fundamentals/challenge/2/index.html b/starter/03-CSS-Fundamentals/challenge/2/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Challenge #2</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"
+      />
+      <article class="product-pricing">
+        <p><strong class="price">$65.00</strong></p>
+        <p class="shipping">Free shipping</p>
+      </article>
+
+      <article class="product-description">
+        <p>
+          Ready to dress up or down, these classic canvas Chucks are an everyday
+          wardrobe staple.
+        </p>
+        <a href="#">More information &rightarrow;</a>
+      </article>
+
+      <article class="product-details">
+        <h3>Product details</h3>
+        <ul>
+          <li><p>Lightweight, durable cavas sneaker</p></li>
+          <li><p>Lightly padded footbed for added comfort</p></li>
+          <li><p>Iconic Chuck Taylor ankle patch.</p></li>
+        </ul>
+      </article>
+      <button>Add to cart</button>
+    </article>
+  </body>
+</html>
diff --git a/starter/03-CSS-Fundamentals/challenge/2/style.css b/starter/03-CSS-Fundamentals/challenge/2/style.css
@@ -0,0 +1,83 @@
+body {
+  font-family: sans-serif;
+  line-height: 1.4;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+ul, ol {
+  margin-left: 22px;
+}
+
+p {
+  margin-bottom: 10px;
+}
+
+.product {
+  border: 4px solid #000;
+  width: 825px;
+  margin: 50px auto;
+}
+
+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;
+  width: 100%;
+}
+
+h2, button {
+  padding: 10px;
+}
+
+h3 {
+  padding: 8px;
+}
+
+button:hover {
+  background-color: #fff;
+  color: #000;
+  border-top: 4px solid #000;
+}
+
+.product-pricing, .product-description {
+  margin-bottom: 20px;
+}
diff --git a/starter/03-CSS-Fundamentals/notes/index.html b/starter/03-CSS-Fundamentals/notes/index.html
@@ -175,6 +175,11 @@ <h2 class="chapter-heading">Ch. 32 CSS Theory #2: Inheritance and the Universal
       </p>
     </article>
 
+    <article class="chapter">
+      <h2 class="chapter-heading">Ch. 33 Challenge #1</h2>
+      <a href="../challenge/1/">Challenge #1</a>
+    </article>
+
     <article class="chapter">
       <h2 class="chapter-heading">Ch. 34 CSS Theory #3: The CSS Box Model</h2>
       <p class="chapter-sub-section">
@@ -254,7 +259,7 @@ <h2 class="chapter-heading">Ch. 37 Centering Our Page</h2>
         a container, then set that container's width to a constant value and set the 
         left and right margin to auto:
       </p>
-      
+
       <code>
 <pre>
 &lt;head&gt;
@@ -276,5 +281,10 @@ <h2 class="chapter-heading">Ch. 37 Centering Our Page</h2>
         There is no specific element that semantically represents this container, so <code>&lt;div&gt;</code> is fine
       </p>
     </article>
+
+    <article class="chapter">
+      <h2 class="chapter-heading">Ch. 38 Challenge #2</h2>
+      <a href="../challenge/2/">Challenge #2</a>
+    </article>
   </body>
 </html>
