HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Factura Cafetería Delicia</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="factura">
<header>
<h1>Cafetería Delicia ☕</h1>
<p>NIT: 123456789-0</p>
<p>Dirección: Calle Dulce Aroma #12</p>
<p>Tel: (321) 123 4567 - Email: contacto@cafedelicia.com</p>
</header>
<h2>Factura de Venta</h2>
<p><strong>Cliente:</strong> Juan Sabores</p>
<p><strong>Fecha:</strong> 28/04/2025</p>
<table>
<thead>
<tr>
<th>Producto</th>
<th>Descripción</th>
<th>Cant</th>
<th>V. Unitario</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr><td>Café Latte</td><td>Café con leche espumosa</td><td>2</td><td>$6.000</td><td>$12.000</td></tr>
<tr><td>Capuchino</td><td>Café con espuma y canela</td><td>1</td><td>$7.000</td><td>$7.000</td></tr>
<tr><td>Té Chai</td><td>Infusión de especias dulces</td><td>1</td><td>$6.500</td><td>$6.500</td></tr>
<tr><td>Brownie</td><td>Pastel de chocolate casero</td><td>2</td><td>$5.000</td><td>$10.000</td></tr>
<tr><td>Rollito de Canela</td><td>Pastel enrollado con azúcar</td><td>1</td><td>$4.500</td><td>$4.500</td></tr>
</tbody>
</table>
<div class="totales">
<p><strong>Subtotal:</strong> $40.000</p>
<p><strong>IVA (5%):</strong> $2.000</p>
<p><strong>Total a pagar:</strong> $42.000</p>
</div>
<footer>
<p>Gracias por su visita. ¡Vuelva pronto!</p>
</footer>
</div>
</body>
</html>
CSSbody {
background-color: #fffaf3;
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 20px;
color: #4e342e;
}
.factura {
background-color: #fff;
border: 2px solid #d7ccc8;
border-radius: 10px;
padding: 20px;
max-width: 800px;
margin: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
header, footer {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #6d4c41;
margin: 0;
}
h2 {
border-bottom: 2px solid #bcaaa4;
padding-bottom: 5px;
color: #5d4037;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #d7ccc8;
padding: 10px;
text-align: center;
}
th {
background-color: #efebe9;
color: #4e342e;
}
.totales {
text-align: right;
margin-top: 20px;
}
footer {
font-size: 14px;
color: #8d6e63;
margin-top: 30px;
}