flexbox challenge

rameskum · rameskum · commit 9be7f18d9ea5 · 2022-02-06T19:36:18.000+05:30
diff --git a/practice/04 - CSS Layouts/challenge.css b/practice/04 - CSS Layouts/challenge.css
@@ -28,17 +28,13 @@ body {
 /* PRODUCT INFORMATION */
 .price {
     font-size: 24px;
-    float: left;
 }
 
 .shipping {
     font-size: 12px;
     text-transform: uppercase;
     font-weight: bold;
     color: #777;
-    margin-bottom: 20px;
-    float: right;
-    margin-top: 8px;
 }
 
 .sale {
@@ -68,12 +64,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 {
@@ -127,28 +126,24 @@ body {
 }
 
 .product-description{
-    clear: both;
     margin-bottom: 10px;
 }
 
 .product-img{
     width: 250px;
-    float: left;
-    margin-right: 40px;
 }
 
 .product-info {
 /* (825 - 8 - 250 - 2 * 40) / 2 */
-    width: 243px;
-    float: left;
-    margin-right: 40px;
+/*    width: 243px;*/
     margin-top: 20px;
+    flex: 1;
 }
 
 .product-details {
-    width: 243px;
-    float: left;
+    /*width: 243px;*/
     margin-top: 20px;
+    flex: 1;
 }
 
 .clearfix::after {
@@ -159,4 +154,13 @@ body {
 
 .container {
     /*background-color: #94d82d;*/
+    display: flex;
+    gap: 40px;
+}
+
+.product-price {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
 }
diff --git a/practice/04 - CSS Layouts/challenge.html b/practice/04 - CSS Layouts/challenge.html
@@ -11,7 +11,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
 				alt="Chuck Taylor All Star Shoe"
 				class="product-img"
@@ -20,18 +20,19 @@ <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 everyday
 				wardrobe staple.
 			</p>
 			<a class="more-info" href="https://converse.com" target="_blank">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>
