Página de destino: Cuidado de la piel

1957 Andev.web

Abrir en el editor Publica tu código

Recomendado

22 August 2025

Comentario de marcador de posición de código HTML

4 December 2025

Hocico de hierro

6 September 2025

Plantilla HTML de portafolio de desarrollador

HTML

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

Comentario de marcador de posición de código HTML

Hocico de hierro

Plantilla HTML de portafolio de desarrollador

HTML

CSS

JS

Recomendado

Comentario de marcador de posición de código HTML

Hocico de hierro

Plantilla HTML de portafolio de desarrollador

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS