Challenge 2

Ronan · Ronan · commit 4f2c42d834b1 · 2025-02-06T22:52:21.000Z
diff --git a/starter/04-CSS-Layouts/challenge-2/index.html b/starter/04-CSS-Layouts/challenge-2/index.html
@@ -7,7 +7,7 @@
   <body>
     <article class="product">
       <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
-      <div class="container clearfix">
+      <div class="container">
         <img
           src="img/challenges.jpg"
           alt="Chuck Taylor All Star Shoe"
@@ -16,8 +16,10 @@ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
           class="product-img"
         />
         <div class="product-info">
-          <p class="price"><strong>$65.00</strong></p>
-          <p class="shipping">Free shipping</p>
+          <div class="product-info-header">
+            <p class="price"><strong>$65.00</strong></p>
+            <p class="shipping">Free shipping</p>
+          </div>
           <p class="sale">sale</p>
           <p class="product-description">
             Ready to dress up or down, these classic canvas Chucks are an
diff --git a/starter/04-CSS-Layouts/challenge-2/styles.css b/starter/04-CSS-Layouts/challenge-2/styles.css
@@ -18,6 +18,9 @@ body {
 
 .container {
   /* background-color: red; */
+  display: flex;
+  gap: 40px;
+  /* align-items: center; */
 }
 
 .sale {
@@ -58,14 +61,20 @@ p {
 
 .product-info {
   /* margin-right: 40px; */
-  /* margin-top: 20px; */
+  margin-top: 20px;
   /* width: 243px; */
   /* float: left; */
 }
 
+.product-info-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .price {
   font-size: 20px;
-  margin-bottom: 5px;
+  /* margin-bottom: 5px; */
   /* float: left; */
 }
 
@@ -74,9 +83,9 @@ p {
   color: #777;
   font-size: 12px;
   font-weight: bold;
-  margin-top: 4px;
+  /* margin-top: 4px;
   margin-bottom: 20px;
-  margin-left: 20px;
+  margin-left: 20px; */
   /* float: right; */
 }
 
@@ -96,15 +105,20 @@ p {
   text-decoration: none;
 }
 
+.colors {
+  display: flex;
+  gap: 10px;
+}
+
 .color {
   width: 20px;
   height: 20px;
   /* display: inline-block; */
-  margin: 0 5px;
+  /* margin: 0 5px; */
 }
 
 .color:first-child {
-  margin-left: 0;
+  /* margin-left: 0; */
   background-color: rgb(66, 66, 66);
 }
 
@@ -132,7 +146,7 @@ p {
 /* PRODUCT DETAILS */
 
 .product-details {
-  /* width: 243px; */
+  flex: 0 0 215px;
   /* float: left; */
   margin-top: 20px;
 }
