finish challenage 2

jonasschmedtmann · Nov 4, 2022 · 33c31dd · 33c31dd
1 parent 37a5042
commit 33c31dd
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 22 deletions.
diff --git a/starter/02-HTML-Fundamentals/challenge.html b/starter/02-HTML-Fundamentals/challenge.html
@@ -7,25 +7,27 @@
     <title>Challenges</title>
     <link href="stylec.css" rel="stylesheet" />
   </head>
-  <body>
-    <article>
-      <h2>Converse Chuck Taylor All Star Low Top</h2>
-      <img src="img/challenges.jpg" width="100" height="100" alt="图片炸了" />
-      <p><b>$65.00</b></p>
-      <p class="fshi">Free shipping</p>
-      <p>
-        Ready to dress up or down, these classic canvas Chucks are an everyday
-        wardrobe staple
-      </p>
-      <a href="#">More information &rarr;</a>
-      <h3>Product details</h3>
-      <ul class="details">
-        <li>Lightweight, durable canvas sneaker</li>
-        <li>Lightly padded footbed for added comfort</li>
-        <li>Iconic Chuck Taylor ankle patch</li>
-      </ul>
+  <div class="container">
+    <body>
+      <article>
+        <h2>Converse Chuck Taylor All Star Low Top</h2>
+        <img src="img/challenges.jpg" width="200" height="200" alt="图片炸了" />
+        <p><b>$65.00</b></p>
+        <p class="fshi">Free shipping</p>
+        <p>
+          Ready to dress up or down, these classic canvas Chucks are an everyday
+          wardrobe staple
+        </p>
+        <a href="#">More information &rarr;</a>
+        <h3>Product details</h3>
+        <ul class="details">
+          <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>
+        <button class="add-to-cart">Add to cart</button>
+      </article>
+    </body>
+  </div>
 </html>
diff --git a/starter/02-HTML-Fundamentals/stylec.css b/starter/02-HTML-Fundamentals/stylec.css
@@ -1,23 +1,43 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
 body {
   font-family: sans-serif;
   line-height: 1.4;
-  border: 5px solid black;
+}
+
+p {
+  margin-bottom: 15px;
 }
 
 h2 {
   text-align: center;
   background-color: #f7f7f7;
   text-transform: uppercase;
   font-size: 22px;
+  /* height: 40px; */
+  padding: 10px;
+  text-align: center;
 }
 
+h3 {
+  margin-top: 30px;
+}
 b {
   font-size: 24px;
 }
 
 button {
+  /* height: 50px; */
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  padding: 15px;
   font-size: 26px;
-  border: none;
+  margin: 0;
+  border-top: 5px solid black;
   background-color: black;
   color: white;
   cursor: pointer;
@@ -43,6 +63,15 @@ a:active {
 button:hover {
   background-color: white;
   color: black;
+  /* border-top: 5px solid black; */
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+ul {
+  margin-left: 18px;
 }
 
 .fshi {
@@ -55,3 +84,15 @@ button:hover {
 .details {
   list-style: square;
 }
+
+.add-to-cart {
+  width: 100%;
+}
+
+.container {
+  border: 5px solid black;
+  width: 825px;
+  /* height: auto; */
+  margin: 50px auto;
+  padding: 0;
+}