franpcode/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND
1
0
Fork 0
mirror of https://github.com/FranP-code/API-and-CRUD-for-Ecommerce-with-Node.js-FRONTEND.git synced 2025-10-12 23:52:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Estilos de la columna 2 listos

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-09 16:14:51 -03:00
parent 6289e5ce12
commit 1199e0d3bd
2 changed files with 268 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
index.html
View File

@@ -84,7 +84,7 @@
15 15
</td> </td>
<td> <td>
40 15
</td> </td>
<td> <td>
<img src="./img/eliminar.png" alt="trash-icon" class="button"> <img src="./img/eliminar.png" alt="trash-icon" class="button">
@@ -120,60 +120,113 @@
</div> </div>
<div class="segunda-columna"> <div class="segunda-columna">
<nav>
<ul> <div class="exposicion-de-productos">
<li>
BEBIDAS <nav>
</li> <ul>
<li> <li class="button">
COMIDAS BEBIDAS
</li> </li>
<li> <li class="button">
REPOSTERÍA Y PANADERÍA COMIDAS
</li> </li>
<li> <li class="button">
REFRIGERADOS REPOSTERÍA Y PANADERÍA
</li> </li>
<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--> REFRIGERADOS
</li> </li>
</ul> <li class="button">
</nav> <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>
<div class="productos"> </ul>
<!-- //! RELLENAR CON DATOS DE EJEMPLO--> </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>
<div class="sub-menu"> <div class="sub-menu">
<div class="opciones-de-pago"> <div class="opciones-de-pago">
<div> <div class="opcion">
<img src="./img/pngwing.com.png" alt="cash icon"> <img src="./img/pngwing.com.png" alt="cash icon">
</div> </div>
<div> <div class="opcion">
<img src="./img/visa.png" alt="Visa icon"> <img src="./img/visa.png" alt="Visa icon">
</div> </div>
<div> <div class="opcion">
<img src="./img/mastercard.png" alt="Mastercard icon"> <img src="./img/mastercard.png" alt="Mastercard icon">
</div> </div>
<div> <div class="opcion">
<img src="./img/uber-eats.jpg" alt="Uber Eats icon"> <img src="./img/uber-eats.jpg" alt="Uber Eats icon">
</div> </div>
<div> <div class="opcion">
DEBITO <span class="text">
DEBITO
</span>
</div> </div>
<div> <div class="opcion">
+ <span class="text">
+
</span>
</div> </div>
</div> </div>
<div class="pagar"> <div class="pagar button">
<span>PAGAR</span> <span>PAGAR</span>

192
style.css
View File

@@ -87,6 +87,8 @@ header .perfil .informacion-personal .text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
margin-right: 1vw;
} }
header .perfil .informacion-personal .text #nacionalidad { header .perfil .informacion-personal .text #nacionalidad {
@@ -95,8 +97,8 @@ header .perfil .informacion-personal .text #nacionalidad {
} }
header .perfil img.profile-img { header .perfil img.profile-img {
width: 5vw; width: 4vw;
height: 5vw; height: 4vw;
border: 1px solid rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255);
border-radius: 100%; border-radius: 100%;
@@ -111,6 +113,11 @@ header .perfil img.profile-menu {
} }
.pagina-principal {
background-color: rgb(214, 214, 214);
}
.pagina-principal .tienda{ .pagina-principal .tienda{
display: flex; display: flex;
@@ -121,15 +128,22 @@ header .perfil img.profile-menu {
width: 32vw; width: 32vw;
box-sizing: border-box; box-sizing: border-box;
margin-left: 1vw; margin: 1vh 1vw;
} }
.pagina-principal .primer-columna .checkout { .pagina-principal .primer-columna .checkout {
padding-top: 2vh; padding-top: 2vh;
background-color: #fff;
border-radius: 5px;
height: 62.5vh;
} }
.pagina-principal .primer-columna .checkout .table-container { .pagina-principal .primer-columna .checkout .table-container {
height: 50vh; height: 50vh;
@@ -174,9 +188,16 @@ header .perfil img.profile-menu {
width: 2vw; width: 2vw;
} }
.pagina-principal .primer-columna .checkout hr {
width: 80%;
}
.pagina-principal .primer-columna .checkout .total-container { .pagina-principal .primer-columna .checkout .total-container {
text-align: end; text-align: end;
padding: 3vh 1vw;
} }
.pagina-principal .primer-columna .checkout .total-container { .pagina-principal .primer-columna .checkout .total-container {
@@ -196,14 +217,20 @@ header .perfil img.profile-menu {
color: rgb(255, 212, 70); color: rgb(255, 212, 70);
} }
.pagina-principal .primer-columna .checkout .total-container .moneda {
font-weight: bold;
}
.pagina-principal .primer-columna .botones-de-descuento { .pagina-principal .primer-columna .botones-de-descuento {
margin-top: 2vh; margin-top: 0.5vh;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
.pagina-principal .primer-columna .botones-de-descuento button { .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); border: 1px solid rgba(0, 0, 0, 0.131);
background-color: #fff; background-color: #fff;
margin: 2vh 1vw 0vh 1vw ; margin-top: 0.5vh;
transition: 0.4s ease-in-out; 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 { .pagina-principal .primer-columna .botones-de-descuento button:hover {
@@ -228,5 +263,144 @@ header .perfil img.profile-menu {
.pagina-principal .segunda-columna { .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;
} }