My order - CSS

FROSTYLAN · Aug 21, 2022 · 467e248 · 467e248
1 parent f45e4e1
commit 467e248
Showing 1 changed file with 107 additions and 16 deletions.
diff --git a/02-FrontendDeveloperPractico/Vistas Principales/clase09_my-order.html b/02-FrontendDeveloperPractico/Vistas Principales/clase09_my-order.html
@@ -26,28 +26,119 @@
         margin: 0;
         font-family: "Quicksand", sans-serif;
       }
+      .my-order {
+        width: 100%;
+        height: 100vh;
+        display: grid;
+        place-items: center;
+      }
+      .title {
+        font-size: var(--lg);
+        margin-bottom: 40px;
+      }
+      .my-order-container {
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        width: 300px;
+      }
+      .my-order-content {
+        display: flex;
+        flex-direction: column;
+      }
+      .shopping-cart {
+        display: grid;
+        grid-template-columns: auto 1fr auto auto;
+        gap: 16px;
+        margin-bottom: 24px;
+        align-items: center;
+      }
+      .shopping-cart figure {
+        margin: 0;
+      }
+      .shopping-cart figure img {
+        width: 70px;
+        height: 70px;
+        border-radius: 20px;
+        object-fit: cover;
+      }
+      .shopping-cart p:nth-child(2) {
+        color: var(--very-light-pink);
+      }
+      .shopping-cart p:nth-child(3) {
+        font-size: var(--md);
+        font-weight: bold;
+      }
+      .order {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 16px;
+        align-items: center;
+        background-color: var(--text-input-field);
+        margin-bottom: 24px;
+        border-radius: 8px;
+        padding: 0 24px;
+      }
+      .order p:nth-child(1) {
+        display: flex;
+        flex-direction: column;
+      }
+      .order p:nth-child(2) {
+        text-align: end;
+        font-weight: bold;
+      }
+      .order p span:nth-child(1) {
+        font-size: var(--md);
+        font-weight: bold;
+      }
+      .order p span:nth-chil(2) {
+        font-size: var(--sm);
+        color: var(--very-light-pink);
+      }
     </style>
   </head>
   <body>
     <div class="my-order">
       <div class="my-order-container">
-        <div class="my-order-content">
-          <p>
-            <span>04.25.21</span>
-            <span>6 articles</span>
-          </p>
-          <p>$560.00</p>
-        </div>
+        <h1 class="title">My order</h1>
 
-        <div class="shopping-cart">
-          <figure>
-            <img
-              src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
-              alt="bici"
-            />
-          </figure>
-          <p>Bike</p>
-          <p>$30,00</p>
+        <div class="my-order-content">
+          <div class="order">
+            <p>
+              <span>04.25.21</span>
+              <span>6 articles</span>
+            </p>
+            <p>$560.00</p>
+          </div>
+          <div class="shopping-cart">
+            <figure>
+              <img
+                src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
+                alt="bici"
+              />
+            </figure>
+            <p>Bike</p>
+            <p>$30,00</p>
+          </div>
+          <div class="shopping-cart">
+            <figure>
+              <img
+                src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
+                alt="bici"
+              />
+            </figure>
+            <p>Bike</p>
+            <p>$30,00</p>
+          </div>
+          <div class="shopping-cart">
+            <figure>
+              <img
+                src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
+                alt="bici"
+              />
+            </figure>
+            <p>Bike</p>
+            <p>$30,00</p>
+          </div>
         </div>
       </div>
     </div>