finish 03 css fundementals

Author: 张欧文

starter/02-HTML-Fundamentals/challenge.html

@@ -18,7 +18,16 @@ <h2>Converse Chuck Taylor All Star Low Top</h2>
           Ready to dress up or down, these classic canvas Chucks are an everyday
           wardrobe staple
         </p>
-        <a href="#">More information &rarr;</a>
+        <a class="more" href="#">More information &rarr;</a>
+
+        <div class="color-bars">
+          <div class="color-bar color-1">&nbsp</div>
+          <div class="color-bar color-2">&nbsp</div>
+          <div class="color-bar color-3">&nbsp</div>
+          <div class="color-bar color-4">&nbsp</div>
+          <div class="color-bar color-5">&nbsp</div>
+          <div class="color-bar color-6">&nbsp</div>
+        </div>
         <h3>Product details</h3>
         <ul class="details">
           <li>Lightweight, durable canvas sneaker</li>

starter/02-HTML-Fundamentals/stylec.css

@@ -71,7 +71,7 @@ li {
 }
 
 ul {
-  margin-left: 18px;
+  margin-left: 20px;
 }
 
 .fshi {
@@ -95,4 +95,53 @@ ul {
   /* height: auto; */
   margin: 50px auto;
   padding: 0;
+  position: relative;
+}
+
+.container::before {
+  position: absolute;
+  content: "SALE";
+  background-color: red;
+  color: white;
+  padding: 5px;
+  top: -20px;
+  left: -30px;
+  width: 50px;
+  text-align: center;
+  letter-spacing: 2px;
+}
+.color-bars {
+  margin-top: 30px;
+  display: block;
+}
+
+.color-bar {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.color-1 {
+  background-color: black;
+}
+
+.color-2 {
+  background-color: blue;
+}
+
+.color-3 {
+  background-color: red;
+}
+
+.color-4 {
+  background-color: yellow;
+}
+
+.color-5 {
+  background-color: green;
+}
+
+.color-6 {
+  background-color: cyan;
 }