section-3: Challenge #3.

owen-webb · owen-webb · commit 025dce9af5b4 · 2022-08-29T08:55:43.000-06:00
diff --git a/starter/03-CSS-Fundamentals/challenge-1/index.html b/starter/03-CSS-Fundamentals/challenge-1/index.html
@@ -8,7 +8,10 @@
 
   <body>
     <article class="product">
-      <h2 class="product-header">Converse Chuck Taylor All Star Low Top</h2>
+      <h2 class="product-header">
+        <div class="product-header-tag">sale</div>
+        Converse Chuck Taylor All Star Low Top
+      </h2>
 
       <img alt="Converse shoes."
             height="250"
@@ -18,11 +21,21 @@ <h2 class="product-header">Converse Chuck Taylor All Star Low Top</h2>
       <p class="pricing-details"><strong>$65.00</strong></p>
       <p class="shipping-details">Free shipping</p>
       <p>Ready to dress up or down, these classic canvas Chucks are an everday wardrobe staple.</p>
-      <p>
+      <p class="information-link">
         <a href="#">More information &rightarrow;</a>
       </p>
 
-      <h4>Product details</h4>
+      <!-- Color selector. -->
+      <div class="color-pallete">
+        <div class="black-option"></div>
+        <div class="blue-option"></div>
+        <div class="red-option"></div>
+        <div class="yellow-option"></div>
+        <div class="green-option"></div>
+        <div class="brown-option"></div>
+      </div>
+
+      <h4 class="details-header">Product details</h4>
       <ul>
         <li>Lightweight, durable canvas sneaker</li>
         <li>Lightly padded footbed for added comfort</li>
diff --git a/starter/03-CSS-Fundamentals/challenge-1/style.css b/starter/03-CSS-Fundamentals/challenge-1/style.css
@@ -40,12 +40,48 @@ li {
   margin-bottom: 10px;
 }
 
-h2, h4 {
+h2 {
   text-transform: uppercase;
   margin-bottom: 15px;
   margin-top: 30px;
 }
 
+.black-option {
+  background-color: black;
+}
+
+.blue-option {
+  background-color: blue;
+}
+
+.brown-option {
+  background-color: brown;
+}
+
+.color-pallete {
+  margin-bottom: 15px;
+}
+
+.color-pallete div {
+  display: inline-block;
+  height: 20px;
+  margin-right: 8px;
+  width: 20px;
+}
+
+.details-header {
+  text-transform: uppercase;
+  margin-bottom: 15px;
+}
+
+.green-option {
+  background-color: green;
+}
+
+.information-link {
+  margin-bottom: 20px;
+}
+
 .product {
   border: 4px solid black;
   margin: 50px auto;
@@ -57,17 +93,39 @@ h2, h4 {
   font-size: 22px;
   margin: 0;
   padding: 15px;
+  position: relative;
   text-align: center;
 }
 
+.product-header-tag {
+  background-color: red;
+  color: white;
+  display: inline-block;
+  font-size: 16px;
+  left: -4%;
+  letter-spacing: 2px;
+  padding: 5px 10px;
+  position: absolute;
+  text-transform: uppercase;
+  top: -30%;
+}
+
 .pricing-details {
   font-size: 24px;
 }
 
+.red-option {
+  background-color: red;
+}
+
 .shipping-details {
   color: #777;
   font-size: 12px;
   font-weight: bold;
   margin-bottom: 20px;
   text-transform: uppercase;
 }
+
+.yellow-option {
+  background-color: yellow;
+}
