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 1 listos

Browse Source
This commit is contained in:
Francisco Pessano
2021-11-09 12:25:26 -03:00
parent 92b0cd0bc9
commit 6289e5ce12
2 changed files with 196 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
index.html
View File

@@ -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>

122
style.css
View File

@@ -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;
}