responsive order confirmed section

Lescano713 · Aug 22, 2024 · e8bd86f · e8bd86f
1 parent 1f37953
commit e8bd86f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@ <h1>Desserts</h1>
       <div id="products"></div>
     </section>
     <section class="order-section">
-      <h2>Your Cart (0)</h2>
+      <h2 class="order-amount">Your Cart </h2>
       <div id="orders">
         <p class="default-text">Your added items will apper here</p>
       </div>

diff --git a/style.css b/style.css
@@ -105,15 +105,21 @@ section{
     height: auto;
     padding: 1.5em;
     justify-content: space-between;
+    .order-total{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: space-between;
+        h4{
+            font-size: 22px;
+        }
+    }
     .default-text{
-        /* position: absolute;
-        bottom: 10px;
-        margin: auto; */
-
         align-self: flex-end;
     }
     #orders{
         display: grid;
+        width: 100%;
         height: 100%;
         p{
             color: var(--Rose500);
@@ -130,24 +136,19 @@ section{
     }
 }
 
-.order-total{
+.delivery-container{
     margin-top: 20px;
     display: grid;
     align-items: center;
-    gap: 20px 0;
-    grid-template-areas: 
-    'p h4'
-    'delivery delivery'
-    'button button';
-    .delivery-container{
+
+    .delivery{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 95%;
         margin: 0 auto;
         padding: 0.8em;
         background-color: var(--Rose50);
-        grid-area: delivery;
     }
     button{
         background-color: var(--buttonAdd);
@@ -157,18 +158,8 @@ section{
         color :white;
         font-weight: 500;
         width: 100%;
-        grid-area: button;
         cursor: pointer;
     }
-    h4{
-        grid-area: h4;
-        justify-self: self-end;
-        font-size: 22px;
-    }
-    p{
-        grid-area: p;
-        justify-self: self-start;
-    }
 }
 
 
@@ -201,12 +192,13 @@ section{
 .order-confirmed-section{
     display: none;
     filter: none;
-    padding: 1em;
+    padding: 2em;
+    border-radius: 10px;
     position: fixed;
     left: 50%;
     top: 50%;
     z-index: 999;
-    width: auto;
+    width: 30em;
     max-width: 90%;
     transform: translate(-50%, -50%);
     background-color: white;
@@ -221,13 +213,21 @@ section{
         display: flex;
         flex-direction: column;
         width: 100%;
+        padding: 0.5em;
         background-color: var(--Rose100);
         img{
-            width: 50px;
+            width: 40px;
         }
         .product-in-car{
             padding: 1em 0.5em;
         }
+        .order-total{
+            padding: 1em 0.5em;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            justify-content: space-between;
+        }
     }
     h1{
         margin: 0;