CHALLENGE jonasschmedtmann#3

Author: avatarsin

starter/02-HTML-Fundamentals/challenge.html

@@ -18,13 +18,22 @@ <h2 class="main-heading">Converse Chuck Taylor All Star Low Top</h2>
         stapple
       </p>
       <a href="#" class="info">More Information &rarr;</a>
+      <div class="choose-colors">
+        <div class="col"></div>
+        <div class="col two"></div>
+        <div class="col three"></div>
+        <div class="col four"></div>
+        <div class="col five"></div>
+        <div class="col six"></div>
+      </div>
       <h3 class="details">Product details</h3>
       <ul class="features">
         <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>
+      <p class="sale">SALE</p>
     </article>
   </body>
 </html>

starter/02-HTML-Fundamentals/style.css

@@ -80,8 +80,80 @@ article {
   border: 5px solid black;
   width: 825px;
   margin: 50px auto;
+  position: relative;
 }
 
+.sale {
+  position: absolute;
+  top: -20px;
+  left: -25px;
+  background-color: rgb(240, 11, 11);
+  letter-spacing: 1px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: bold;
+  padding: 5px 20px;
+}
+
+.choose-colors {
+  display: inline-block;
+  /* background-color: #f7f7f7; */
+  position: relative;
+  margin: 10px 0;
+  height: 60px;
+  width: 100%;
+}
+
+.col {
+  display: inline-block;
+  background-color: #000;
+  margin-top: 20px;
+  margin-right: 15px;
+  height: 25px;
+  width: 25px;
+}
+
+.two {
+  background-color: rgb(29, 29, 231);
+}
+.three {
+  background-color: red;
+}
+.four {
+  background-color: yellow;
+}
+.five {
+  background-color: green;
+}
+.six {
+  background-color: brown;
+}
+/* .one {
+  position: absolute;
+  background-color: #000;
+  top: 20px;
+  height: 25px;
+  width: 25px;
+}
+
+.two {
+  position: absolute;
+  background-color: rgb(29, 29, 231);
+  top: 20px;
+  left: 50px;
+  height: 25px;
+  width: 25px;
+}
+
+.three {
+  position: absolute;
+  background-color: rgb(240, 11, 11);
+  top: 20px;
+  left: 100px;
+  height: 25px;
+  width: 25px;
+} */
+
 li {
   margin-bottom: 9px;
 }