Página de destino: Cuidado de la piel

Abrir en el editor Publica tu código

Recomendado

15 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxe Skincare</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            background-color: #fff;
            color: #333;
            line-height: 1.6;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

header {
            background-color: rgba(255, 255, 255, 0.9);
            position: fixed;
            width: 100%;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

.logo {
            font-size: 24px;
            font-weight: 700;
        }

.cart-icon {
            font-size: 24px;
            cursor: pointer;
            position: relative;
        }

.cart-count {
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: #ff4757;
            color: #fff;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
        }

.hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

.hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }

.hero-content {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 40px;
            border-radius: 10px;
        }

.hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s forwards;
        }

.hero p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s 0.5s forwards;
        }

.btn {
            display: inline-block;
            background-color: #333;
            color: #fff;
            padding: 12px 24px;
            border-radius: 30px;
            text-decoration: none;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s 1s forwards;
        }

.btn:hover {
            background-color: #555;
        }

@keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.products {
            padding: 80px 0;
            background-color: #f9f9f9;
        }

.products h2 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 40px;
        }

.product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }

.product-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

.product-card:hover {
            transform: translateY(-10px);
        }

.product-image {
            height: 200px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

.product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.product-info {
            padding: 20px;
        }

.product-title {
            font-size: 18px;
            margin-bottom: 10px;
        }

.product-price {
            font-weight: 600;
            margin-bottom: 15px;
        }

.add-to-cart {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.add-to-cart:hover {
            background-color: #555;
        }

.cart {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100vh;
            background-color: #fff;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            z-index: 1001;
        }

.cart.open {
            right: 0;
        }

.cart-header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            font-size: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.close-cart {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }

.cart-items {
            padding: 20px;
            max-height: calc(100vh - 180px);
            overflow-y: auto;
        }

.cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

.cart-item-info {
            flex-grow: 1;
        }

.cart-item-title {
            font-size: 16px;
            margin-bottom: 5px;
        }

.cart-item-price {
            font-weight: 600;
        }

.cart-item-remove {
            background: none;
            border: none;
            color: #ff4757;
            cursor: pointer;
        }

.cart-total {
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            text-align: right;
            border-top: 1px solid #eee;
        }

@media (max-width: 768px) {
            .hero h1 {
                font-size: 36px;
            }

.hero p {
                font-size: 16px;
            }

.product-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body>
    <header>
        <nav class="container">
            <div class="logo">Luxe Skincare</div>
            <div class="cart-icon" id="cartIcon">???? <span class="cart-count">0</span></div>
        </nav>
    </header>

<main>
        <section class="hero">
            <video class="hero-video" autoplay loop muted playsinline>
                <source src="https://videos.pexels.com/video-files/4153588/4153588-uhd_2732_1440_25fps.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <div class="hero-content">
                <h1>Discover Your Natural Beauty</h1>
                <p>High-quality skincare products for radiant skin</p>
                <a href="#products" class="btn">Shop Now</a>
            </div>
        </section>

<section id="products" class="products">
            <div class="container">
                <h2>Our Products</h2>
                <div class="product-grid" id="productGrid"></div>
            </div>
        </section>
    </main>

<div class="cart" id="cart">
        <div class="cart-header">
            <span>Shopping Cart</span>
            <button class="close-cart" id="closeCart">×</button>
        </div>
        <div class="cart-items" id="cartItems"></div>
        <div class="cart-total" id="cartTotal">Total: $0</div>
    </div>

const cart = [];
        const productGrid = document.getElementById('productGrid');
        const cartIcon = document.getElementById('cartIcon');
        const cartElement = document.getElementById('cart');
        const closeCart = document.getElementById('closeCart');
        const cartItems = document.getElementById('cartItems');
        const cartTotal = document.getElementById('cartTotal');
        const cartCount = document.querySelector('.cart-count');

function renderProducts() {
            productGrid.innerHTML = products.map(product => `
                <div class="product-card">
                    <div class="product-image">
                        <img src="${product.image}" alt="${product.name}">
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">${product.name}</h3>
                        <p class="product-price">$${product.price}</p>
                        <button class="add-to-cart" data-id="${product.id}">Add to Cart</button>
                    </div>
                </div>
            `).join('');

document.querySelectorAll('.add-to-cart').forEach(button => {
                button.addEventListener('click', addToCart);
            });
        }

updateCart();
            animateCartIcon();
        }

function updateCart() {
            cartItems.innerHTML = cart.map(item => `
                <div class="cart-item">
                    <div class="cart-item-info">
                        <h4 class="cart-item-title">${item.name}</h4>
                        <p class="cart-item-price">$${item.price} x ${item.quantity}</p>
                    </div>
                    <button class="cart-item-remove" data-id="${item.id}">×</button>
                </div>
            `).join('');

const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
            cartTotal.textContent = `Total: $${total}`;
            cartCount.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);

document.querySelectorAll('.cart-item-remove').forEach(button => {
                button.addEventListener('click', removeFromCart);
            });
        }

function animateCartIcon() {
            cartIcon.style.transform = 'scale(1.2)';
            setTimeout(() => {
                cartIcon.style.transform = 'scale(1)';
            }, 200);
        }

cartIcon.addEventListener('click', () => {
            cartElement.classList.add('open');
        });

closeCart.addEventListener('click', () => {
            cartElement.classList.remove('open');
        });

renderProducts();
    </script>
</body>
</html>

Página de destino: Cuidado de la piel

Recomendado

Un código de Mete

Un código de Mete

HORARIO DE EJEMPLO

HTML

CSS

JS

Recomendado

Un código de Mete

Un código de Mete

HORARIO DE EJEMPLO

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS