clase 14 completa

andreybejarano · Jul 2, 2022 · 10282c9 · 10282c9
1 parent c920289
commit 10282c9
Showing 1 changed file with 59 additions and 7 deletions.
diff --git a/clase14/public/css/styles.css b/clase14/public/css/styles.css
@@ -1,6 +1,7 @@
 * {
   margin: 0px;
   padding: 0px;
+  box-sizing: border-box;
 }
 
 body {
@@ -15,23 +16,40 @@ h3 {
 p {
   font-size: 12px;
 }
+
 div.top-header {
+  display: flex;
+  flex-wrap: wrap;
   padding: 5%;
 }
 
+header div.top-header p {
+  width: 100%;
+  text-align: center;
+  margin-top: 10px;
+}
+
 header {
   background-color: #eac926;
 }
 
-header div.logo {
+header div.logo,
+header .form {
   width: 50%;
 }
 
 header div.logo {
   padding: 10px;
 }
+header .form {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  font-size: 11px;
+}
 header nav {
   font-size: 12px;
+  margin-left: 20px;
 }
 
 header ul li {
@@ -50,19 +68,14 @@ header .form .input {
   color: #666;
   padding: 2px;
 }
+
 header .form .submit {
   background-color: #fff;
   border: 1px solid #000;
   color: #666;
   width: 10%;
 }
 
-header div.top-header p {
-  width: 100%;
-  text-align: center;
-  margin-top: 10px;
-}
-
 div.burger-menu {
   text-align: center;
 }
@@ -78,8 +91,19 @@ div.burger-menu i {
   width: 40px;
 }
 
+div.last-visit,
+div.offers {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .price {
   font-size: 18px;
+  width: 30%;
+}
+
+.discount {
+  width: 70%;
 }
 
 .discount,
@@ -122,13 +146,17 @@ main section article i,
 }
 
 main section article i {
+  display: block;
   font-size: 16px;
   padding: 5px;
   width: 30px;
   height: 30px;
   border: 1px solid #39b54a;
   background-color: #fff;
   border-radius: 50%;
+  position: absolute;
+  right: 20px;
+  top: -15px;
 }
 
 main section h3 {
@@ -137,7 +165,11 @@ main section h3 {
 
 article div.main-article {
   width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
   border-top: 1px solid #ebebeb;
+  position: relative;
   padding: 15px;
 }
 
@@ -149,7 +181,27 @@ article div.main-article {
   main section article {
     box-shadow: 0px 0px 10px rgb(100, 100, 100);
   }
+
+  main section div.products {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  main section div.products article {
+    width: 45%;
+  }
+
+  .price,
+  .discount {
+    width: 50%;
+  }
 }
 
 @media (min-width: 769px) {
+  main section div.products article {
+    width: 22%;
+  }
 }