Challenge 1

Author: Ronan

starter/04-CSS-Layouts/challenge-1/index.html

@@ -13,28 +13,33 @@ <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
         alt="Chuck Taylor All Star Shoe"
         width="250"
         height="250"
+        class="img"
       />
-      <p class="price"><strong>$65.00</strong></p>
-      <p class="shipping">Free shipping</p>
-      <p>
-        Ready to dress up or down, these classic canvas Chucks are an everyday
-        wardrobe staple.
-      </p>
-      <a class="more-info" href="#">More information &rarr;</a>
-      <div class="colors">
-        <div class="color"></div>
-        <div class="color color-blue"></div>
-        <div class="color color-red"></div>
-        <div class="color color-yellow"></div>
-        <div class="color color-green"></div>
-        <div class="color color-brown"></div>
+      <div class="summary">
+        <p class="price"><strong>$65.00</strong></p>
+        <p class="shipping">Free shipping</p>
+        <p>
+          Ready to dress up or down, these classic canvas Chucks are an everyday
+          wardrobe staple.
+        </p>
+        <a class="more-info" href="#">More information &rarr;</a>
+        <div class="colors">
+          <div class="color"></div>
+          <div class="color color-blue"></div>
+          <div class="color color-red"></div>
+          <div class="color color-yellow"></div>
+          <div class="color color-green"></div>
+          <div class="color color-brown"></div>
+        </div>
+      </div>
+      <div class="details">
+        <h3 class="details-title">Product details</h3>
+        <ul class="details-list">
+          <li>Lightweight, durable canvas sneaker</li>
+          <li>Lightly padded footbed for added comfort</li>
+          <li>Iconic Chuck Taylor ankle patch</li>
+        </ul>
       </div>
-      <h3 class="details-title">Product details</h3>
-      <ul class="details-list">
-        <li>Lightweight, durable canvas sneaker</li>
-        <li>Lightly padded footbed for added comfort</li>
-        <li>Iconic Chuck Taylor ankle patch</li>
-      </ul>
       <button class="add-to-cart">Add to cart</button>
     </article>
   </body>

starter/04-CSS-Layouts/challenge-1/styles.css

@@ -1,6 +1,7 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 body {
@@ -34,6 +35,7 @@ body {
 .product-title {
   text-align: center;
   font-size: 22px;
+  font-weight: bold;
   background-color: #eee;
   text-transform: uppercase;
   padding: 15px 0;
@@ -50,7 +52,7 @@ p {
 
 .shipping {
   text-transform: uppercase;
-  color: #aaa;
+  color: #777;
   font-size: 12px;
   font-weight: bold;
   margin-bottom: 20px;
@@ -135,3 +137,34 @@ p {
   background-color: white;
   color: black;
 }
+
+.img {
+  float: left;
+}
+
+.summary {
+  margin-left: 40px;
+  margin-top: 30px;
+  width: 243px;
+  float: left;
+}
+
+.details {
+  margin-left: 40px;
+  width: 243px;
+  float: left;
+}
+
+.price {
+  float: left;
+  margin-bottom: 20px;
+}
+
+.shipping {
+  margin-left: 20px;
+  float: right;
+}
+
+.shipping + p {
+  clear: both;
+}