vid 37 done

dboyliao · dboyliao · commit 7c6445122df6 · 2024-11-18T20:50:55.000+08:00
diff --git a/starter/03-CSS-Fundamentals/challange/index.html b/starter/03-CSS-Fundamentals/challange/index.html
@@ -7,34 +7,36 @@
     <title>Document</title>
   </head>
   <body>
-    <article class="product">
-      <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
-      <img
-        src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
-        alt="Chuck Taylor All Star Shoe"
-        height="250"
-        width="250"
-      />
+    <div class="container">
+      <article class="product">
+        <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+        <img
+          src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
+          alt="Chuck Taylor All Star Shoe"
+          height="250"
+          width="250"
+        />
 
-      <p class="product-price"><strong>$65.00</strong></p>
-      <p class="product-shipping">Free shipping</p>
-      <p>
-        Ready to dress up or down, these classic canvas Chucks are an everyday
-        wardrobe staple.
-      </p>
+        <p class="product-price"><strong>$65.00</strong></p>
+        <p class="product-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="https://www.converse.com"
-        >More information &rarr;</a
-      >
+        <a class="more-info" href="https://www.converse.com"
+          >More information &rarr;</a
+        >
 
-      <h3 class="product-details-header">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>
+        <h3 class="product-details-header">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-cart">Add to cart</button>
-    </article>
+        <button class="add-cart">Add to cart</button>
+      </article>
+    </div>
   </body>
 </html>
diff --git a/starter/03-CSS-Fundamentals/challange/style.css b/starter/03-CSS-Fundamentals/challange/style.css
@@ -1,28 +1,59 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
 body {
   font-family: sans-serif;
   line-height: 1.4;
 }
 
+ul {
+  padding: 0 20px;
+}
+
+li {
+  margin: 10px 0;
+}
+
+p {
+  margin: 20px 0;
+}
+
+h3 {
+  margin: 20px 0;
+}
+
+.container {
+  width: 800px;
+  margin: 0 auto;
+}
+
 .product {
   border: 4px black solid;
+  width: 100%;
 }
 
 .product-title {
   font-size: 22px;
   text-transform: uppercase;
   text-align: center;
   background-color: #f7f7f7;
+  padding: 15px;
 }
 
 .product-price {
   font-size: 24px;
+  margin-bottom: 0px;
 }
 
 .product-shipping {
   text-transform: uppercase;
   color: #777777;
   font-size: 12px;
   font-weight: bold;
+  margin-top: 0px;
 }
 
 .more-info {
@@ -45,11 +76,13 @@ body {
 
 .add-cart {
   background-color: black;
-  border: none;
-  margin-bottom: 1px;
   color: white;
   font-size: 20px;
   cursor: pointer;
+  width: 100%;
+  padding: 15px;
+  text-transform: uppercase;
+  border-top: 4px solid black;
 }
 
 .add-cart:hover {
