From 1199e0d3bd800260524ceec3ccc22a634c75e648 Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Tue, 9 Nov 2021 16:14:51 -0300
Subject: [PATCH] Estilos de la columna 2 listos

---
 index.html | 117 +++++++++++++++++++++++---------
 style.css  | 192 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 268 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index 97b4ef5..e65f601 100644
--- a/index.html
+++ b/index.html
@@ -84,7 +84,7 @@
                                     15
                                 </td>
                                 <td>
-                                    40
+                                    15
                                 </td>
                                 <td>
                                     <img src="./img/eliminar.png" alt="trash-icon" class="button">
@@ -120,60 +120,113 @@
         </div>
 
         <div class="segunda-columna">
-            <nav>
-                <ul>
-                    <li>
-                        BEBIDAS
-                    </li>
-                    <li>
-                        COMIDAS
-                    </li>
-                    <li>
-                        REPOSTERÍA Y PANADERÍA
-                    </li>
-                    <li>
-                        REFRIGERADOS
-                    </li>
-                    <li>
-                        <img src="./img/more-options-min.png" alt="more options button"> <!--Source: https://www.flaticon.com/premium-icon/more_5857049?term=more%20apps&page=1&position=46&page=1&position=46&related_id=5857049&origin=search-->
-                    </li>
-                </ul>
-            </nav>
-            
-            <div class="productos">
-                <!-- //! RELLENAR CON DATOS DE EJEMPLO-->
+
+            <div class="exposicion-de-productos">
+
+                <nav>
+                    <ul>
+                        <li class="button">
+                            BEBIDAS
+                        </li>
+                        <li class="button">
+                            COMIDAS
+                        </li>
+                        <li class="button">
+                            REPOSTERÍA Y PANADERÍA
+                        </li>
+                        <li class="button">
+                            REFRIGERADOS
+                        </li>
+                        <li class="button">
+                            <img src="./img/more-options-min.png" alt="more options button"> <!--Source: https://www.flaticon.com/premium-icon/more_5857049?term=more%20apps&page=1&position=46&page=1&position=46&related_id=5857049&origin=search-->
+                        </li>
+                    </ul>
+                </nav>
+                
+                <div class="productos">
+
+                    <div class="producto button">
+                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
+                        
+                        <div class="text">
+                            <span class="name">COCA-COLA</span>
+                            <span class="price">15 USD</span>
+                        </div>
+                    </div>
+
+                    <div class="producto button">
+                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
+                        
+                        <div class="text">
+                            <span class="name">COCA-COLA</span>
+                            <span class="price">15 USD</span>
+                        </div>
+                    </div>
+
+                    <div class="producto button">
+                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
+                        
+                        <div class="text">
+                            <span class="name">COCA-COLA</span>
+                            <span class="price">15 USD</span>
+                        </div>
+                    </div>
+
+                    <div class="producto button">
+                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
+                        
+                        <div class="text">
+                            <span class="name">COCA-COLA</span>
+                            <span class="price">15 USD</span>
+                        </div>
+                    </div>
+
+                    <div class="producto button">
+                        <img src="./img/cocacola-lata.jpg" alt="coca cola">
+                        
+                        <div class="text">
+                            <span class="name">COCA-COLA</span>
+                            <span class="price">15 USD</span>
+                        </div>
+                    </div>
+                </div>
             </div>
+
             
             <div class="sub-menu">
                 
                 <div class="opciones-de-pago">
                     
-                    <div>
+                    <div class="opcion">
                         <img src="./img/pngwing.com.png" alt="cash icon">
                     </div>
                     
-                    <div>
+                    <div class="opcion">
                         <img src="./img/visa.png" alt="Visa icon">
                     </div>
                     
-                    <div>
+                    <div class="opcion">
                         <img src="./img/mastercard.png" alt="Mastercard icon">
                     </div>
                     
-                    <div>
+                    <div class="opcion">
                         <img src="./img/uber-eats.jpg" alt="Uber Eats icon">
                     </div>
                     
-                    <div>
-                        DEBITO
+                    <div class="opcion">
+                        <span class="text">
+                            DEBITO
+                        </span>
                     </div>
                     
-                    <div>
-                        +
+                    <div class="opcion">
+                        <span class="text">
+                            +
+                        </span>
                     </div>
                 </div>
                 
-                <div class="pagar">
+                <div class="pagar button">
                     
                     <span>PAGAR</span>
                     
diff --git a/style.css b/style.css
index c462c72..13d029c 100644
--- a/style.css
+++ b/style.css
@@ -87,6 +87,8 @@ header .perfil .informacion-personal .text {
     display: flex;
     flex-direction: column;
     justify-content: center;
+
+    margin-right: 1vw;
 }
 
 header .perfil .informacion-personal .text #nacionalidad {
@@ -95,8 +97,8 @@ header .perfil .informacion-personal .text #nacionalidad {
 }
 
 header .perfil img.profile-img {
-    width: 5vw;
-    height: 5vw;
+    width: 4vw;
+    height: 4vw;
 
     border: 1px solid rgb(255, 255, 255);
     border-radius: 100%;
@@ -111,6 +113,11 @@ header .perfil img.profile-menu {
 
 }
 
+.pagina-principal {
+
+    background-color: rgb(214, 214, 214);
+}
+
 .pagina-principal .tienda{
     
     display: flex;
@@ -121,15 +128,22 @@ header .perfil img.profile-menu {
     width: 32vw;
     box-sizing: border-box;
     
-    margin-left: 1vw;
+    margin: 1vh 1vw;
+
 }
 
 .pagina-principal .primer-columna .checkout {
-
+    
     padding-top: 2vh;
     
+    background-color: #fff;
+
+    border-radius: 5px;
+
+    height: 62.5vh;
 }
 
+
 .pagina-principal .primer-columna .checkout .table-container {
 
     height: 50vh;
@@ -174,9 +188,16 @@ header .perfil img.profile-menu {
     width: 2vw;
 }
 
+.pagina-principal .primer-columna .checkout hr {
+
+    width: 80%;
+}
+
 .pagina-principal .primer-columna .checkout .total-container {
 
     text-align: end;
+
+    padding: 3vh 1vw;
 }
 
 .pagina-principal .primer-columna .checkout .total-container {
@@ -196,14 +217,20 @@ header .perfil img.profile-menu {
     color: rgb(255, 212, 70);
 }
 
+.pagina-principal .primer-columna .checkout .total-container .moneda {
+
+    font-weight: bold;
+}
+
 .pagina-principal .primer-columna .botones-de-descuento {
 
-    margin-top: 2vh;
+    margin-top: 0.5vh;
 
     display: flex;
     flex-wrap: wrap;
 
     justify-content: center;
+    
 }
 
 .pagina-principal .primer-columna .botones-de-descuento button {
@@ -214,9 +241,17 @@ header .perfil img.profile-menu {
     border: 1px solid rgba(0, 0, 0, 0.131);
     background-color: #fff;
     
-    margin: 2vh 1vw 0vh 1vw ;
-    
-    transition: 0.4s ease-in-out;
+    margin-top: 0.5vh;
+
+    transition: 0.1s ease-in-out;
+    flex-grow: 1;
+
+    border-radius: 5px;
+}
+
+.pagina-principal .primer-columna .botones-de-descuento :first-child {
+
+    margin-right: 0.5vw;
 }
 
 .pagina-principal .primer-columna .botones-de-descuento button:hover {
@@ -228,5 +263,144 @@ header .perfil img.profile-menu {
 
 .pagina-principal .segunda-columna {
 
-    width: 65vw;
+    width: 59vw;
+
+    margin-top: 1vh;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.pagina-principal .segunda-columna nav ul {
+
+    display: flex;
+    justify-content: space-around;
+}
+
+.pagina-principal .segunda-columna nav ul li{
+
+    display: flex;
+    align-items: center;
+
+    list-style-type: none;
+    font-weight: bold;
+
+    color: rgb(73, 73, 73);
+
+}
+
+.pagina-principal .segunda-columna nav ul li img{
+
+    width: 3vw;
+
+    opacity: 50%;
+}
+
+.pagina-principal .segunda-columna .exposicion-de-productos {
+
+    background-color: #fff;
+    border-radius: 5px;
+
+    height: 64.5vh;
+}
+
+.pagina-principal .segunda-columna .productos {
+
+    padding: 0px 1vw;
+    display: flex;
+
+    flex-wrap: wrap;
+}
+
+.pagina-principal .segunda-columna .productos .producto {
+
+    margin-right: 2vw;
+    margin-bottom: 1vh;
+}
+
+.pagina-principal .segunda-columna .productos .producto img {
+
+    width: 10vw;
+    height: 10vw;
+}
+
+.pagina-principal .segunda-columna .productos .producto .text {
+
+    display: flex;
+    flex-direction: column;
+
+    color: rgb(73, 73, 73);
+}
+
+.pagina-principal .segunda-columna .productos .producto .text .name {
+
+    font-weight: bold;
+}
+
+.pagina-principal .segunda-columna .sub-menu {
+
+    display: flex;
+}
+
+.pagina-principal .segunda-columna .sub-menu .opciones-de-pago {
+    
+    display: flex;
+    flex-wrap: wrap;
+
+    width: calc(14.5vw * 3);
+    margin-top: 0.5vh;
+
+}
+
+.pagina-principal .segunda-columna .sub-menu .opciones-de-pago .opcion {
+
+    width: 14vw;
+    height: 10vh;
+
+    margin-top: 0.5vh;
+    margin-right: 0.5vh;
+
+    background-color: #fff;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 5px;
+}
+
+.pagina-principal .segunda-columna .sub-menu .opciones-de-pago .opcion .text {
+
+    font-size: 15pt;
+    font-weight: bold;
+
+    color: rgb(73, 73, 73);
+
+    user-select: none;
+}
+
+.pagina-principal .segunda-columna .sub-menu .opciones-de-pago .opcion img {
+
+    width: 7vw;
+}
+
+.pagina-principal .segunda-columna .sub-menu .pagar {
+
+    margin-top: 1vh;
+
+    width: 16vw;
+
+    background-color: rgb(73, 73, 73);
+    border-radius: 5px;
+
+    font-size: 15pt;
+    font-weight: bold;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color:rgb(255, 212, 70);
+
+    user-select: none;
 }
\ No newline at end of file