Tienda de figuras de felinos en HTML funcional biblioteca de programacion

samuel gaitan
24 dic 2025
4 Min. de lectura

<!DOCTYPE html>

<head>

<title>🐱 Tienda de Figuras de Felinos</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Arial', sans-serif;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

min-height: 100vh;

padding: 20px;

}

.container {

max-width: 1200px;

margin: 0 auto;

background: white;

border-radius: 20px;

box-shadow: 0 20px 60px rgba(0,0,0,0.3);

overflow: hidden;

}

header {

background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

color: white;

text-align: center;

padding: 40px 20px;

}

header h1 {

font-size: 2.5em;

margin-bottom: 10px;

text-shadow: 2px 2px 4px rgba(0,0,0,0.2);

}

header p {

font-size: 1.2em;

opacity: 0.9;

}

.products {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

padding: 40px;

}

.product-card {

background: white;

border-radius: 15px;

overflow: hidden;

box-shadow: 0 10px 30px rgba(0,0,0,0.1);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.product-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 40px rgba(0,0,0,0.2);

}

.product-image {

width: 100%;

height: 250px;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

display: flex;

align-items: center;

justify-content: center;

font-size: 8em;

}

.product-info {

padding: 20px;

}

.product-info h3 {

color: #333;

margin-bottom: 10px;

font-size: 1.5em;

}

.product-info p {

color: #666;

margin-bottom: 15px;

line-height: 1.6;

}

.price {

font-size: 1.8em;

color: #f5576c;

font-weight: bold;

margin-bottom: 15px;

}

.btn {

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

color: white;

border: none;

padding: 12px 30px;

border-radius: 25px;

cursor: pointer;

font-size: 1em;

font-weight: bold;

transition: all 0.3s ease;

width: 100%;

}

.btn:hover {

transform: scale(1.05);

box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);

}

.cart-section {

background: #f8f9fa;

padding: 40px;

border-top: 3px solid #667eea;

}

.cart-section h2 {

color: #333;

margin-bottom: 20px;

font-size: 2em;

}

.cart-items {

background: white;

padding: 20px;

border-radius: 10px;

margin-bottom: 20px;

min-height: 100px;

}

.cart-item {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px;

border-bottom: 1px solid #eee;

animation: slideIn 0.3s ease;

}

@keyframes slideIn {

from {

opacity: 0;

transform: translateX(-20px);

}

to {

opacity: 1;

transform: translateX(0);

}

.cart-item:last-child {

border-bottom: none;

}

.cart-item-info {

display: flex;

align-items: center;

gap: 15px;

}

.cart-item-icon {

font-size: 2em;

}

.remove-btn {

background: #f5576c;

color: white;

border: none;

padding: 8px 15px;

border-radius: 5px;

cursor: pointer;

transition: background 0.3s ease;

}

.remove-btn:hover {

background: #d63447;

}

.total {

font-size: 1.5em;

font-weight: bold;

color: #333;

text-align: right;

margin-top: 20px;

padding-top: 20px;

border-top: 2px solid #667eea;

}

.checkout-form {

background: white;

padding: 30px;

border-radius: 10px;

margin-top: 30px;

}

.checkout-form h3 {

color: #333;

margin-bottom: 20px;

font-size: 1.5em;

}

.form-group {

margin-bottom: 20px;

}

.form-group label {

display: block;

color: #555;

margin-bottom: 8px;

font-weight: bold;

}

.form-group input {

width: 100%;

padding: 12px;

border: 2px solid #ddd;

border-radius: 8px;

font-size: 1em;

transition: border-color 0.3s ease;

}

.form-group input:focus {

outline: none;

border-color: #667eea;

}

footer {

background: #333;

color: white;

text-align: center;

padding: 20px;

}

.empty-cart {

text-align: center;

color: #999;

padding: 30px;

font-style: italic;

}

</style>

</head>

<body>

<h1>🐱 Tienda de Figuras de Felinos 🦁</h1>

<p>Colecciona las figuras más hermosas de felinos del mundo</p>

</header>

<h3>Figura de Gato</h3>

<p>Hermosa figura decorativa de un gato doméstico. Perfecta para amantes de los felinos.</p>

<button class="btn" onclick="addToCart('Gato', 45000, '🐱')">Añadir al carrito</button>

<button class="btn" onclick="downloadImage('🐱', 'Gato')" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); margin-top: 10px;">Descargar PNG</button>

</div>

<h3>Figura de León</h3>

<p>Majestuosa figura del rey de la selva. Símbolo de fuerza y nobleza.</p>

<button class="btn" onclick="addToCart('León', 65000, '🦁')">Añadir al carrito</button>

<button class="btn" onclick="downloadImage('🦁', 'León')" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); margin-top: 10px;">Descargar PNG</button>

</div>

<h3>Figura de Tigre</h3>

<p>Impresionante figura de tigre. El felino más grande y poderoso del mundo.</p>

<button class="btn" onclick="addToCart('Tigre', 70000, '🐯')">Añadir al carrito</button>

<button class="btn" onclick="downloadImage('🐯', 'Tigre')" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); margin-top: 10px;">Descargar PNG</button>

</div>

<h2>🛒 Carrito de Compras</h2>

<div class="empty-cart">El carrito está vacío. ¡Añade algunos productos!</div>

</div>

<div class="total" id="total" style="display: none;">Total: $0 COP</div>

<h3>💰 Donar por Nequi / Daviplata</h3>

Apoya nuestro proyecto de figuras de felinos

</p>

<p style="font-size: 1.1em; margin-bottom: 10px;">📱 Número de Nequi / Daviplata:</p>

</div>

¡Gracias por tu apoyo! Cada donación nos ayuda a seguir creando contenido increíble 🐱🦁🐯

</p>

</div>

</footer>

</div>

let cart = [];

function addToCart(name, price, icon) {

cart.push({

id: Date.now(),

name: name,

price: price,

icon: icon

});

updateCart();

}

function removeFromCart(id) {

cart = cart.filter(item => item.id !== id);

updateCart();

}

function updateCart() {

const cartItems = document.getElementById('cartItems');

const totalElement = document.getElementById('total');

if (cart.length === 0) {

cartItems.innerHTML = '<div class="empty-cart">El carrito está vacío. ¡Añade algunos productos!</div>';

totalElement.style.display = 'none';

return;

}

let html = '';

let total = 0;

cart.forEach(item => {

total += item.price;

html += `

<div>

<span style="color: #f5576c;">$${item.price.toLocaleString('es-CO')} COP</span>

</div>

<button class="remove-btn" onclick="removeFromCart(${item.id})">Eliminar</button>

</div>

});

cartItems.innerHTML = html;

totalElement.innerHTML = `Total: $${total.toLocaleString('es-CO')} COP`;

totalElement.style.display = 'block';

}

function checkout() {

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const address = document.getElementById('address').value;

if (!name || !email || !address) {

alert('Por favor completa todos los campos del formulario.');

return;

}

if (cart.length === 0) {

alert('Tu carrito está vacío. Añade productos antes de finalizar la compra.');

return;

}

const total = cart.reduce((sum, item) => sum + item.price, 0);

const items = cart.map(item => item.name).join(', ');

alert(`¡Gracias por tu compra, ${name}!\n\nProductos: ${items}\nTotal: $${total.toLocaleString('es-CO')} COP\n\nEnviaremos tu pedido a: ${address}\nTe enviaremos la confirmación a: ${email}`);

cart = [];

updateCart();

document.getElementById('name').value = '';

document.getElementById('email').value = '';

document.getElementById('address').value = '';

}

</script>

</body>

</html>