Página de inicio: HUAWEI MateBook X Pro

Abrir en el editor Publica tu código

Recomendado

9 May 2025

Fondo animado CSS con efecto de carga

10 November 2024

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HUAWEI MateBook X Pro - Edición Especial</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            overflow-x: hidden;
        }
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

header {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        header.scrolled {
            padding: 5px 0;
            background-color: rgba(255, 255, 255, 0.98);
        }
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            transition: all 0.3s ease;
        }
        .logo img {
            height: 40px;
            transition: all 0.3s ease;
        }
        header.scrolled .logo img {
            height: 30px;
        }
        .nav-links {
            display: flex;
            gap: 30px;
        }
        .nav-links a {
            text-decoration: none;
            color: #333;
            font-weight: 600;
            transition: color 0.3s ease;
        }
        .nav-links a:hover {
            color: #000000;
        }
        .language-selector {
            display: flex;
            align-items: center;
            margin-left: 20px;
        }

.language-selector select {
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #fff;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
        }
        .hero {
            background: linear-gradient(135deg, #f0f0f0, #fff);
            padding: 120px 0 60px;
            overflow: hidden;
        }
        .hero-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 60px;
        }
        .hero-text {
            text-align: center;
            max-width: 600px;
        }
        .hero-image {
            position: relative;
            width: 100%;
            max-width: 500px;
        }
        .hero-image img {
            width: 100%;
            height: auto;
            transition: transform 0.5s ease;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
        }
        .hero-image:hover img {
            transform: scale(1.05) rotate(2deg);
        }
        .badge {
            display: inline-block;
            background-color: #000000;
            color: #fff;
            padding: 5px 15px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
            background: linear-gradient(45deg, #000000, #636363);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: #666;
        }
        .btn {
            display: inline-block;
            background-color: #000000;
            color: #fff;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .btn:hover {
            background-color: #333333;
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0,0,0,0.2);
        }
        .btn-outline {
            background-color: transparent;
            border: 2px solid #000000;
            color: #000000;
        }
        .btn-outline:hover {
            background-color: #000000;
            color: #fff;
        }

.features {
            padding: 100px 0;
            background-color: #fff;
        }
        .features h2 {
            text-align: center;
            margin-bottom: 60px;
            font-size: 2.5rem;
            color: #333;
        }
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }
        .feature-card {
            background-color: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
        }
        .feature-image {
            height: 200px;
            overflow: hidden;
        }
        .feature-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .feature-card:hover .feature-image img {
            transform: scale(1.1);
        }
        .feature-content {
            padding: 30px;
        }
        .feature-content h3 {
            margin-bottom: 15px;
            font-size: 1.5rem;
            color: #000000;
        }
        .feature-content p {
            color: #666;
        }

.purchase {
            background-color: #f9f9f9;
            padding: 100px 0;
        }
        .purchase-content {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        .purchase-card {
            background-color: #fff;
            border-radius: 15px;
            padding: 40px;
            margin-top: 40px;
            box-shadow: 0 15px 50px rgba(0,0,0,0.1);
        }
        .quantity-selector {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        .quantity-btn {
            background-color: #f0f0f0;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .quantity-btn:hover {
            background-color: #000000;
            color: #fff;
        }
        #quantity {
            font-size: 1.2rem;
            width: 60px;
            text-align: center;
            border: 2px solid #f0f0f0;
            border-radius: 25px;
            padding: 5px;
        }
        .purchase-info {
            margin-bottom: 30px;
        }
        .purchase-info p {
            margin-bottom: 10px;
            color: #666;
        }

.cart-icon {
            position: relative;
            cursor: pointer;
        }
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #000000;
            color: #fff;
            font-size: 0.8rem;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cart-modal {
            display: none;
            position: fixed;
            top: 80px;
            right: 20px;
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            padding: 30px;
            width: 350px;
            max-width: 90vw;
            z-index: 1000;
        }
        .cart-modal h3 {
            margin-bottom: 20px;
            color: #000000;
        }
        .cart-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        .cart-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 10px;
        }
        .cart-item-info h4 {
            margin-bottom: 5px;
            color: #333;
        }
        .cart-item-info p {
            color: #666;
        }

@media (max-width: 768px) {
            .hero-content {
                flex-direction: column;
            }
            .hero-image {
                order: -1;
            }
            h1 {
                font-size: 2rem;
            }
            .feature-grid {
                grid-template-columns: 1fr;
            }
            .nav-links {
                display: none;
            }
            .mobile-menu-btn {
                display: block;
            }
        }

@media (min-width: 769px) {
            .hero-content {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            .hero-text {
                text-align: left;
            }
            .mobile-menu-btn {
                display: none;
            }
        }

.mobile-menu-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
        }

.mobile-menu {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1001;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

.mobile-menu a {
            color: #fff;
            font-size: 1.5rem;
            margin: 20px 0;
            text-decoration: none;
        }

.close-menu-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
        }

@keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

.floating {
            animation: float 6s ease-in-out infinite;
        }

@keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

.pulsing {
            animation: pulse 3s infinite;
        }

.fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

.fade-in.appear {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <header id="header">
        <nav class="container">
            <div class="logo">
                <img src="https://consumer.huawei.com/etc/designs/huawei-cbg-site/clientlib-campaign-v4/common-v4/images/logo.svg" alt="Huawei Logo">
            </div>
            <div class="nav-links">
                <a href="#features" data-i18n="features">Características</a>
                <a href="#purchase" data-i18n="buy">Comprar</a>
                <a href="#" class="cart-icon">
                    ????
                    <span class="cart-count" id="cartCount">0</span>
                </a>
                <div class="language-selector">
                    <select id="languageSelect">
                        <option value="es">Español</option>
                        <option value="en">English</option>
                    </select>
                </div>
            </div>
            <button class="mobile-menu-btn">☰</button>
        </nav>
    </header>

<div class="mobile-menu">
        <button class="close-menu-btn">×</button>
        <a href="#features" data-i18n="features">Características</a>
        <a href="#purchase" data-i18n="buy">Comprar</a>
        <a href="#" class="cart-icon">
            ????
            <span class="cart-count" id="mobileCartCount">0</span>
        </a>
        <div class="language-selector">
            <select id="mobileLangSelect">
                <option value="es">Español</option>
                <option value="en">English</option>
            </select>
        </div>
    </div>

<section class="hero">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text" data-aos="fade-right">
                    <span class="badge pulsing" data-i18n="new">Nuevo</span>
                    <h1>HUAWEI MateBook X Pro</h1>
                    <p data-i18n="hero-description">Potencia y elegancia en un diseño ultraligero</p>
                    <div style="margin-top: 30px;">
                        <a href="#features" class="btn" data-i18n="explore">Explorar</a>
                        <a href="#" class="btn btn-outline" style="margin-left: 15px;" data-i18n="view-specs">Ver especificaciones</a>
                    </div>
                </div>
                <div class="hero-image" data-aos="fade-left">
                    <img src="https://img01.huaweifile.com/sg/ms/co/pms/uomcdn/CO_HW_B2C/pms/202405/gbom/6942103120619/800_800_B9A8CA564FB24FE401F3FA99BCD7873Emp.png" alt="HUAWEI MateBook X Pro" class="floating">
                </div>
            </div>
        </div>
    </section>

<section id="features" class="features">
        <div class="container">
            <h2 data-aos="fade-up" data-i18n="featured-characteristics">Características destacadas</h2>
            <div class="feature-grid">
                <div class="feature-card fade-in" data-aos="fade-up">
                    <div class="feature-image">
                        <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/ecommerce/mx/offer-xpro/Reasons%20to%20Buy_1.jpg" alt="Diseño Ultraligero">
                    </div>
                    <div class="feature-content">
                        <h3 data-i18n="ultralight-design">Diseño Ultraligero</h3>
                        <p data-i18n="ultralight-description">Solo 980 g para máxima portabilidad</p>
                    </div>
                </div>
                <div class="feature-card fade-in" data-aos="fade-up" data-aos-delay="100">
                    <div class="feature-image">
                        <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/ecommerce/mx/offer-xpro/Reasons%20to%20Buy_2.jpg" alt="Procesador Intel">
                    </div>
                    <div class="feature-content">
                        <h3 data-i18n="intel-processor">Procesador Intel® Core™ Ultra 9</h3>
                        <p data-i18n="intel-description">Rendimiento excepcional para todas tus tareas</p>
                    </div>
                </div>
                <div class="feature-card fade-in" data-aos="fade-up" data-aos-delay="200">
                    <div class="feature-image">
                        <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/ecommerce/mx/offer-xpro/Reasons%20to%20Buy_3.jpg" alt="Pantalla OLED">
                    </div>
                    <div class="feature-content">
                        <h3 data-i18n="oled-screen">Pantalla OLED flexible</h3>
                        <p data-i18n="oled-description">Colores vibrantes y realistas</p>
                    </div>
                </div>
                <div class="feature-card fade-in" data-aos="fade-up" data-aos-delay="300">
                    <div class="feature-image">
                        <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/ecommerce/mx/offer-xpro/Reasons%20to%20Buy_4.jpg" alt="Sistema Super Turbo">
                    </div>
                    <div class="feature-content">
                        <h3 data-i18n="super-turbo">Sistema Super Turbo</h3>
                        <p data-i18n="super-turbo-description">Refrigeración inteligente para máximo rendimiento</p>
                    </div>
                </div>
                <div class="feature-card fade-in" data-aos="fade-up" data-aos-delay="400">
                    <div class="feature-image">
                        <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/ecommerce/mx/offer-xpro/Reasons%20to%20Buy_5.jpg" alt="Super Device">
                    </div>
                    <div class="feature-content">
                        <h3 data-i18n="super-device">Super Device</h3>
                        <p data-i18n="super-device-description">Conectividad perfecta entre dispositivos</p>
                    </div>
                </div>
                <div class="feature-card fade-in" data-aos="fade-up" data-aos-delay="500">
                    <div class="feature-image">
                        <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/ecommerce/mx/offer-xpro/Reasons%20to%20Buy_6.jpg" alt="Conferencia Inteligente">
                    </div>
                    <div class="feature-content">
                        <h3 data-i18n="smart-conference">Conferencia Inteligente</h3>
                        <p data-i18n="conference-description">Experiencia profesional en videollamadas</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="purchase" class="purchase">
        <div class="container">
            <div class="purchase-content" data-aos="fade-up">
                <h2 data-i18n="get-your-matebook">Obtén tu MateBook X Pro</h2>
                <p data-i18n="price-info">Desde $2,000 USD o 12 meses sin intereses</p>
                <div class="purchase-card">
                    <div class="quantity-selector">
                        <button class="quantity-btn" id="decreaseQuantity">-</button>
                        <input type="number" id="quantity" value="1" min="1" max="10">
                        <button class="quantity-btn" id="increaseQuantity">+</button>
                    </div>
                    <div class="purchase-info">
                        <p data-i18n="shipping-info">✓ Envío desde el 11 de junio</p>
                        <p data-i18n="payment-info">✓ Paga en 3, 6, 9 y 12 cuotas sin interés</p>
                        <p data-i18n="warranty-info">✓ Garantía oficial de Huawei</p>
                    </div>
                    <a href="#" class="btn" id="addToCart" data-i18n="add-to-cart">Agregar al carrito</a>
                </div>
            </div>
        </div>
    </section>

<div class="cart-modal" id="cartModal">
        <h3 data-i18n="shopping-cart">Carrito de compras</h3>
        <div id="cartItems"></div>
        <a href="#" class="btn" id="checkout" data-i18n="proceed-to-checkout">Proceder al pago</a>
    </div>

let cartCount = 0;
        const cartCountElement = document.getElementById('cartCount');
        const mobileCartCountElement = document.getElementById('mobileCartCount');
        const cartModal = document.getElementById('cartModal');
        const cartItems = document.getElementById('cartItems');
        const addToCartBtn = document.getElementById('addToCart');
        const quantityInput = document.getElementById('quantity');
        const decreaseQuantityBtn = document.getElementById('decreaseQuantity');
        const increaseQuantityBtn = document.getElementById('increaseQuantity');
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const mobileMenu = document.querySelector('.mobile-menu');
        const closeMenuBtn = document.querySelector('.close-menu-btn');

function updateCartCount() {
            cartCountElement.textContent = cartCount;
            mobileCartCountElement.textContent = cartCount;
        }

function updateCartModal() {
            cartItems.innerHTML = `
                <div class="cart-item">
                    <img src="https://img01.huaweifile.com/sg/ms/co/pms/uomcdn/CO_HW_B2C/pms/202405/gbom/6942103120619/800_800_B9A8CA564FB24FE401F3FA99BCD7873Emp.png" alt="MateBook X Pro">
                    <div class="cart-item-info">
                        <h4>HUAWEI MateBook X Pro</h4>
                        <p>Cantidad: ${cartCount}</p>
                    </div>
                </div>
            `;
        }

addToCartBtn.addEventListener('click', (e) => {
            e.preventDefault();
            const quantity = parseInt(quantityInput.value);
            cartCount += quantity;
            updateCartCount();
            updateCartModal();
            cartModal.style.display = 'block';
        });

document.querySelector('.cart-icon').addEventListener('click', (e) => {
            e.preventDefault();
            cartModal.style.display = cartModal.style.display === 'none' ? 'block' : 'none';
        });

decreaseQuantityBtn.addEventListener('click', () => {
            if (quantityInput.value > 1) {
                quantityInput.value = parseInt(quantityInput.value) - 1;
            }
        });

increaseQuantityBtn.addEventListener('click', () => {
            if (quantityInput.value < 10) {
                quantityInput.value = parseInt(quantityInput.value) + 1;
            }
        });

mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.style.display = 'flex';
        });

closeMenuBtn.addEventListener('click', () => {
            mobileMenu.style.display = 'none';
        });

const fadeElems = document.querySelectorAll('.fade-in');
        const appearOptions = {
            threshold: 0,
            rootMargin: "0px 0px -100px 0px"
        };

fadeElems.forEach(elem => {
            appearOnScroll.observe(elem);
        });

const translations = {
            es: {
                "features": "Características",
                "buy": "Comprar",
                "new": "Nuevo",
                "hero-description": "Potencia y elegancia en un diseño ultraligero",
                "explore": "Explorar",
                "view-specs": "Ver especificaciones",
                "featured-characteristics": "Características destacadas",
                "ultralight-design": "Diseño Ultraligero",
                "ultralight-description": "Solo 980 g para máxima portabilidad",
                "intel-processor": "Procesador Intel® Core™ Ultra 9",
                "intel-description": "Rendimiento excepcional para todas tus tareas",
                "oled-screen": "Pantalla OLED flexible",
                "oled-description": "Colores vibrantes y realistas",
                "super-turbo": "Sistema Super Turbo",
                "super-turbo-description": "Refrigeración inteligente para máximo rendimiento",
                "super-device": "Super Device",
                "super-device-description": "Conectividad perfecta entre dispositivos",
                "smart-conference": "Conferencia Inteligente",
                "conference-description": "Experiencia profesional en videollamadas",
                "get-your-matebook": "Obtén tu MateBook X Pro",
                "price-info": "Desde $2,000 USD o 12 meses sin intereses",
                "shipping-info": "✓ Envío desde el 11 de junio",
                "payment-info": "✓ Paga en 3, 6, 9 y 12 cuotas sin interés",
                "warranty-info": "✓ Garantía oficial de Huawei",
                "add-to-cart": "Agregar al carrito",
                "shopping-cart": "Carrito de compras",
                "proceed-to-checkout": "Proceder al pago"
            },
            en: {
                "features": "Features",
                "buy": "Buy",
                "new": "New",
                "hero-description": "Power and elegance in an ultralight design",
                "explore": "Explore",
                "view-specs": "View specifications",
                "featured-characteristics": "Featured Characteristics",
                "ultralight-design": "Ultralight Design",
                "ultralight-description": "Only 980 g for maximum portability",
                "intel-processor": "Intel® Core™ Ultra 9 Processor",
                "intel-description": "Exceptional performance for all your tasks",
                "oled-screen": "Flexible OLED Screen",
                "oled-description": "Vibrant and realistic colors",
                "super-turbo": "Super Turbo System",
                "super-turbo-description": "Smart cooling for maximum performance",
                "super-device": "Super Device",
                "super-device-description": "Seamless connectivity between devices",
                "smart-conference": "Smart Conference",
                "conference-description": "Professional experience in video calls",
                "get-your-matebook": "Get your MateBook X Pro",
                "price-info": "Starting at $2,000 USD or 12 interest-free months",
                "shipping-info": "✓ Shipping from June 11",
                "payment-info": "✓ Pay in 3, 6, 9, and 12 interest-free installments",
                "warranty-info": "✓ Official Huawei warranty",
                "add-to-cart": "Add to cart",
                "shopping-cart": "Shopping cart",
                "proceed-to-checkout": "Proceed to checkout"
            }
        };

function changeLanguage(lang) {
            document.documentElement.lang = lang;
            document.querySelectorAll('[data-i18n]').forEach(elem => {
                const key = elem.getAttribute('data-i18n');
                elem.textContent = translations[lang][key];
            });
        }

document.getElementById('languageSelect').addEventListener('change', function() {
            changeLanguage(this.value);
        });

document.getElementById('mobileLangSelect').addEventListener('change', function() {
            changeLanguage(this.value);
        });

changeLanguage('es');

</script>
</body>
</html>

Página de inicio: HUAWEI MateBook X Pro

Recomendado

bandera nacional

Fondo animado CSS con efecto de carga

Barra de navegación

HTML

CSS

JS

Recomendado

bandera nacional

Fondo animado CSS con efecto de carga

Barra de navegación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS