Challenge No.2 Section 4 Layouts.

quechau · quechau · commit 24f5ca371833 · 2023-10-16T22:45:07.000+07:00
diff --git a/starter/02-HTML-Fundamentals/challange_2.html b/starter/02-HTML-Fundamentals/challange_2.html
@@ -9,7 +9,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"
           all="Chuck Taylor All Star Low Top"
@@ -19,8 +19,10 @@ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
         />
 
         <div class="product-info">
-          <p class="price"><strong>$65.00</strong></p>
-          <p class="shipping">Free shipping</p>
+          <div class="product-price">
+            <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
@@ -32,7 +34,7 @@ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
             >More information &rarr;</a
           >
 
-          <div class="colors">
+          <div class="product-colors">
             <div class="color"></div>
             <div class="color color-blue"></div>
             <div class="color color-red"></div>
diff --git a/starter/02-HTML-Fundamentals/style-for-challange-2.css b/starter/02-HTML-Fundamentals/style-for-challange-2.css
@@ -16,11 +16,11 @@ body {
 }
 .container {
   /* background-color: red; */
+  display: flex;
+  gap: 40px;
 }
 
 .product-img {
-  float: left;
-  margin-right: 40px;
 }
 
 /* PRODUCT */
@@ -42,10 +42,16 @@ body {
 /* PRODUCT INFOMATION */
 .product-info {
   /* (825 - 8 - 250 - 80)   */
-  width: 243px;
-  float: left;
-  margin-right: 40px;
+  /* width: 243px; */
   margin-top: 20px;
+  flex: 1;
+}
+
+.product-price {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
 }
 
 .price {
@@ -58,9 +64,6 @@ body {
   text-transform: uppercase;
   font-weight: bold;
   color: #777;
-  margin-bottom: 20px;
-  float: right;
-  margin-top: 8px;
 }
 
 .sale {
@@ -81,7 +84,6 @@ body {
   left: -38px;
 }
 .product-description {
-  clear: both;
   margin-bottom: 10px;
 }
 .more-info:link,
@@ -96,12 +98,15 @@ body {
   text-decoration: none;
 }
 
+.product-colors {
+  display: flex;
+  gap: 10px;
+}
+
 .color {
   background-color: #000;
   height: 22px;
   width: 22px;
-  display: inline-block;
-  margin-right: 10px;
 }
 
 .color-blue {
@@ -126,9 +131,9 @@ body {
 
 /* PRODUCT DETAILS */
 .product-details {
-  width: 243px;
-  float: left;
+  /* width: 243px; */
   margin-top: 20px;
+  flex: 1;
 }
 
 .details-title {
