css floats done

zicna · zicna · commit 03bff9bd672b · 2022-01-29T10:01:20.000-06:00
diff --git a/starter/03-CSS-Fundamentals/challenge3.css b/starter/03-CSS-Fundamentals/challenge3.css
diff --git a/starter/03-CSS-Fundamentals/challenge3.html b/starter/03-CSS-Fundamentals/challenge3.html
diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html
@@ -38,6 +38,7 @@
         background-color: #ddd;
         font-size: 40px;
         margin: 40px;
+        display: flex;
 
         /* FLEXBOX */
       }
diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html
@@ -18,16 +18,18 @@ <h6>The Basic Language of the Web: HTML</h6>
     -->
 
     <div class="container">
-      <header class="main-header">
+      <header class="main-header clearfix">
         <h1>📘 The Code Magazine</h1>
 
         <nav>
           <!-- <strong>This is the navigation</strong> -->
           <a href="blog.html">Blog</a>
           <a href="#">Challenges</a>
-          <a href="#">Flexbox</a>
-          <a href="#">CSS Grid</a>
+          <a href="./flexbox.html" target="_blank">Flexbox</a>
+          <a href="./css-grid.html">CSS Grid</a>
         </nav>
+        <!-- <div class="clear"></div> -->
+
       </header>
 
       <article>
@@ -39,9 +41,10 @@ <h2>The Basic Language of the Web: HTML</h2>
             alt="Headshot of Laura Jones"
             height="50"
             width="50"
+            class="author-img"
           />
 
-          <p id="author">
+          <p id="author" class="author">
             Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
           </p>
 
diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css
@@ -2,6 +2,7 @@
   /* border-top: 10px solid #1098ad; */
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 /* PAGE SECTIONS */
@@ -14,14 +15,15 @@ body {
 }
 
 .container {
-  width: 800px;
+  width: 1200px;
   /* margin-left: auto;
   margin-right: auto; */
   margin: 0 auto;
 }
 
 .main-header {
   background-color: #f7f7f7;
+  /* background-color: red; */
   /* padding: 20px;
   padding-left: 40px;
   padding-right: 40px; */
@@ -82,6 +84,7 @@ h4 {
   font-size: 20px;
   text-transform: uppercase;
   text-align: center;
+  margin-bottom: 30px;
 }
 
 p {
@@ -134,10 +137,7 @@ li:last-child {
 
 .related {
   list-style: none;
-}
-
-body {
-  /* background-color: orangered; */
+  margin-left: 0;
 }
 
 /* .first-li {
@@ -265,3 +265,54 @@ footer p {
 nav p {
   font-size: 18px;
 } */
+
+
+/* FLOATS */
+
+.author-img{
+  float: left;
+  margin-bottom: 20px;
+}
+.author {
+  float: left;
+  margin-top: 10px;
+  margin-left: 80px;
+}
+
+h1 {
+  float: left;
+}
+nav {
+  float:right;
+}
+
+/* .clear {
+  clear: both;
+} */
+
+/* ! clear fix hack */
+.clearfix::after{
+ clear: both;
+ content: "";
+ display:block;
+}
+
+article {
+  /* background-color: green; */
+  width: 825px;
+  float: left;
+}
+
+aside {
+  /* background-color: #1098ad; */
+  width: 300px;
+  float: right;
+  padding: 40px;
+}
+
+footer {
+  /* background-color: red; */
+  clear: both;
+}
+
+
diff --git a/starter/challenge/challenge3.html b/starter/challenge/challenge3.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <article class="product">
+      <h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
+      <div class="container clearfix">
+          <img
+            src="https://i.imgur.com/ZrTU3VK.jpeg"
+            alt="Chuck Taylor All Star Shoe"
+            height="250px"
+            width="250px"
+            class="product-img"
+          />
+        <div class="product-info">
+            <p class="price"><strong>$65.00</strong></p>
+            <p class="shipping ">Free shipping</p>
+            <p class="product-description">
+            Ready to dress up or down, these classic canvas Chucks are an everyday
+            wardrobe staple.
+          </p>
+          <a href="https://converse.com" target="_blank" class="more-info"
+            >More information &rarr;</a
+          >
+          <div class="colors">
+            <div class="color color-blue"></div>
+            <div class="color color-green"></div>
+            <div class="color color-red"></div>
+            <div class="color color-yellow"></div>
+            <div class="color color-red"></div>
+            <div class="color color-orange"></div>
+          </div>
+        </div>
+        <div class="product-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>
+        </div>
+      <button class="add-cart">Add to cart</button>
+    </article>
+  </body>
+</html>
diff --git a/starter/challenge/style.css b/starter/challenge/style.css
@@ -1,6 +1,7 @@
 * {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
   }
   
   body {
@@ -24,16 +25,36 @@
   }
   
   /* PRODUCT INFORMATION */
+  .product-info{
+    width: 240px;
+    float: left;
+    margin-right: 40px;
+    margin-top: 20px;
+  }
   .price {
     font-size: 24px;
+    float:left;
   }
   
   .shipping {
+    float: right;
     font-size: 12px;
     text-transform: uppercase;
     font-weight: bold;
     color: #777;
     margin-bottom: 20px;
+    margin-top: 8px;
+  }
+
+  .clearfix::after {
+    content: "";
+    clear: both;
+    display: block;
+  }
+
+  .product-description {
+    clear:both;
+    margin-bottom: 10px;
   }
   
   .more-info:link, .more-info:visited {
@@ -43,13 +64,23 @@
   .more-info:hover, .more-info:active {
     text-decoration: none;
   }
+
+  .product-img {
+    float: left;
+    outline: 1px solid yellow;
+    margin-right: 40px;
+  }
   
   /* PRODUCT DETAILS */
+  .product-details{
+    width: 240px;
+    float: left;
+    margin-top: 20px;
+  }
   .details-title {
     text-transform: uppercase;
     font-size: 16px;
     margin-bottom: 15px;
-    margin-top: 30px;
   }
   
   .details-list {
@@ -104,7 +135,7 @@
 
   
 .colors {
-    padding-top: 5px;
+    padding-top: 20px;
 }
 .color{
     display: inline-block;
@@ -128,4 +159,15 @@ background-color: yellow;
 }
 .color-orange {
 background-color:orange ;
-}
+}
+
+.container {
+/* outline: 2px solid red; */
+}
+
+
+
+
+
+
+

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@`
`38`	`38`	`background-color: #ddd;`
`39`	`39`	`font-size: 40px;`
`40`	`40`	`margin: 40px;`
	`41`	`+ display: flex;`
`41`	`42`
`42`	`43`	`/* FLEXBOX */`
`43`	`44`	`}`