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
Estilos de la columna 2 listos
This commit is contained in:
117
index.html
117
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>
|
||||
|
||||
|
||||
192
style.css
192
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;
|
||||
}
|
||||
Reference in New Issue
Block a user