From 6289e5ce125d43d5765d6c6203a1c9e5373f3500 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Tue, 9 Nov 2021 12:25:26 -0300
Subject: [PATCH] Estilos de la columna 1 listos

---
 index.html | 112 +++++++++++++++++++++++++++++++-----------------
 style.css  | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 196 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index ac510ae..97b4ef5 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
                         <span id="perfil-nombre">Ana María</span>
                         <span id="nacionalidad">ARG</span>
                     </div>
-                    
+
                     <img src="./img/perfil.png" alt="profile image" class="profile-img button">
                 </div>
                 
@@ -39,45 +39,81 @@
             </div>
         </header>
 
-        <div class="primer-columna">
-            <div class="checkout">
-                <table id="products-display-checkout">
-                    <tr>
-                        <th>
-                            Cantidad
-                        </th>
-                        <th>
-                            Producto
-                        </th>
-                        <th>
-                            Tax
-                        </th>
-                        <th>
-                            Total
-                        </th>
-                    </tr>
-                </table>
+        <div class="tienda">
+
+            
+            <div class="primer-columna">
+                <div class="checkout">
+                    <div class="table-container">
+
+                        
+                        <table id="products-display-checkout">
+                            <thead>
+                                <tr>
+                            <th>
+                                Cantidad
+                            </th>
+                            <th>
+                                Producto
+                            </th>
+                            <th>
+                                Tax
+                            </th>
+                            <th>
+                                Total
+                            </th>
+                        </tr>
+                        </thead>
+                        
+                        <tbody>
+                            <tr>
+                                <td>
+                                    1
+                                    <button class="button">
+                                        +
+                                    </button>
+                                    <button class="button">
+                                        -
+                                    </button>
+                                </td>
+                                <td>
+                                    Coca Cola
+                                </td>
+                                
+                                <td>
+                                    15
+                                </td>
+                                <td>
+                                    40
+                                </td>
+                                <td>
+                                    <img src="./img/eliminar.png" alt="trash-icon" class="button">
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
                 
                 <hr>
                 
-                <div>
-                    <span class="total">Total</span>
-                    <span class="precio"></span>
+                <div class="total-container">
+                    <span class="total">TOTAL</span>
+                    <span class="precio">0</span>
                     <span class="moneda">$</span>
                 </div>
             </div>
             
             <div class="botones-de-descuento">
-
-                <button>
+                
+                <button class="button">
                     DESCUENTO DE EMPLEADOS
                 </button>
-
-                <button>
+                
+                <button class="button">
                     VISTA CLIENTE
                 </button>
-
-                <button>
+                
+                <button class="button">
                     CÓDIGO PROMOCIONAL
                 </button>
             </div>
@@ -107,23 +143,23 @@
             <div class="productos">
                 <!-- //! RELLENAR CON DATOS DE EJEMPLO-->
             </div>
-
+            
             <div class="sub-menu">
-
+                
                 <div class="opciones-de-pago">
                     
                     <div>
                         <img src="./img/pngwing.com.png" alt="cash icon">
                     </div>
-
+                    
                     <div>
                         <img src="./img/visa.png" alt="Visa icon">
                     </div>
-
+                    
                     <div>
                         <img src="./img/mastercard.png" alt="Mastercard icon">
                     </div>
-
+                    
                     <div>
                         <img src="./img/uber-eats.jpg" alt="Uber Eats icon">
                     </div>
@@ -131,21 +167,21 @@
                     <div>
                         DEBITO
                     </div>
-
+                    
                     <div>
                         +
                     </div>
                 </div>
-
+                
                 <div class="pagar">
                     
                     <span>PAGAR</span>
-
+                    
                 </div>
-
+                
             </div>
         </div>
-
+    </div>    
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index c8d4bac..c462c72 100644
--- a/style.css
+++ b/style.css
@@ -54,6 +54,8 @@ header .logo {
 
     display: flex;
     user-select: none;
+
+    margin-left: 1vw;
 }
 
 header .logo h3 {
@@ -107,4 +109,124 @@ header .perfil img.profile-menu {
     height: 3vw;
     filter: invert(1);
 
+}
+
+.pagina-principal .tienda{
+    
+    display: flex;
+}
+
+.pagina-principal .primer-columna {
+
+    width: 32vw;
+    box-sizing: border-box;
+    
+    margin-left: 1vw;
+}
+
+.pagina-principal .primer-columna .checkout {
+
+    padding-top: 2vh;
+    
+}
+
+.pagina-principal .primer-columna .checkout .table-container {
+
+    height: 50vh;
+}
+
+.pagina-principal .primer-columna .checkout .table-container table {
+    
+    width: 100%;
+
+    border-collapse: separate;
+    border-spacing: 3vh;
+}
+
+/* .pagina-principal .primer-columna .checkout .table-container table thead {
+
+    border-bottom: 1px solid rgb(206, 206, 206);
+} */
+
+.pagina-principal .primer-columna .checkout .table-container table tbody {
+
+    margin-top: 3vh;
+}
+
+.pagina-principal .primer-columna .checkout .table-container table tbody tr td {
+
+    text-align: center;
+}
+
+.pagina-principal .primer-columna .checkout .table-container table tbody tr td:first-child button{
+
+    background-color: #fff;
+    
+    width: 2vw;
+    height: 2vw;
+
+    border: 1px solid rgb(192, 192, 192);
+    border-radius: 100%;
+}
+
+.pagina-principal .primer-columna .checkout .table-container table tbody tr td img {
+
+    width: 2vw;
+}
+
+.pagina-principal .primer-columna .checkout .total-container {
+
+    text-align: end;
+}
+
+.pagina-principal .primer-columna .checkout .total-container {
+
+    font-size: 20pt;
+}
+
+.pagina-principal .primer-columna .checkout .total-container .total {
+
+    font-weight: bold;
+    margin-right: 3vw;
+}
+
+.pagina-principal .primer-columna .checkout .total-container .precio {
+
+    font-weight: bold;
+    color: rgb(255, 212, 70);
+}
+
+.pagina-principal .primer-columna .botones-de-descuento {
+
+    margin-top: 2vh;
+
+    display: flex;
+    flex-wrap: wrap;
+
+    justify-content: center;
+}
+
+.pagina-principal .primer-columna .botones-de-descuento button {
+
+    width: 13vw;
+    height: 10vh;
+
+    border: 1px solid rgba(0, 0, 0, 0.131);
+    background-color: #fff;
+    
+    margin: 2vh 1vw 0vh 1vw ;
+    
+    transition: 0.4s ease-in-out;
+}
+
+.pagina-principal .primer-columna .botones-de-descuento button:hover {
+
+    background-color: rgb(147, 223, 253);
+    
+    transition: 0.4s ease-in-out;
+}
+
+.pagina-principal .segunda-columna {
+
+    width: 65vw;
 }
\ No newline at end of file