section 3 done

dboyliao · dboyliao · commit c75e617071f7 · 2024-11-20T12:34:40.000+08:00
diff --git a/starter/03-CSS-Fundamentals/challange/index.html b/starter/03-CSS-Fundamentals/challange/index.html
@@ -9,7 +9,9 @@
   <body>
     <div class="container">
       <article class="product">
-        <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+        <div class="product-title-container">
+          <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+        </div>
         <img
           src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
           alt="Chuck Taylor All Star Shoe"
@@ -27,7 +29,14 @@ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
         <a class="more-info" href="https://www.converse.com"
           >More information &rarr;</a
         >
-
+        <ol class="variant-list">
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ol>
         <h3 class="product-details-header">Product details</h3>
         <ul class="product-details-list">
           <li>Lightweight, durable canvas sneaker</li>
diff --git a/starter/03-CSS-Fundamentals/challange/style.css b/starter/03-CSS-Fundamentals/challange/style.css
@@ -28,13 +28,30 @@ h3 {
 .container {
   width: 800px;
   margin: 0 auto;
+  padding-top: 20px;
 }
 
 .product {
   border: 4px black solid;
   width: 100%;
 }
 
+.product-title-container {
+  position: relative;
+}
+
+.product-title-container::after {
+  content: "sale";
+  text-transform: uppercase;
+  background-color: red;
+  color: white;
+  padding: 5px 15px;
+  position: absolute;
+  top: -15px;
+  left: -15px;
+  letter-spacing: 2px;
+}
+
 .product-title {
   font-size: 22px;
   text-transform: uppercase;
@@ -66,6 +83,39 @@ h3 {
   text-decoration: none;
 }
 
+.variant-list {
+  list-style: none;
+}
+
+.variant-list li {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin: 30px 5px;
+}
+
+.variant-list li:first-child {
+  background-color: black;
+  margin-left: 2px;
+}
+
+.variant-list li:nth-child(2) {
+  background-color: blue;
+}
+
+.variant-list li:nth-child(3) {
+  background-color: red;
+}
+.variant-list li:nth-child(4) {
+  background-color: yellow;
+}
+.variant-list li:nth-child(5) {
+  background-color: green;
+}
+.variant-list li:nth-child(6) {
+  background-color: brown;
+}
+
 .product-details-header {
   text-transform: uppercase;
 }
