Lumina Tech: Productos tecnológicos del futuro e innovación

Abrir en el editor Publica tu código

Recomendado

22 November 2025

Animación de carga de CSS Spinner

11 June 2025

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LUMINA | Future Tech</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>

<header id="header">
        <nav class="navbar">
            <div class="logo">
                <span class="logo-icon"><ion-icon name="prism-outline"></ion-icon></span>
                LUMINA
            </div>
            <ul class="nav-links">
                <li><a href="#home" class="active">Home</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#about">About</a></li>
            </ul>
            <div class="nav-actions">
                <div class="search-box">
                    <input type="text" placeholder="Search...">
                    <button><ion-icon name="search-outline"></ion-icon></button>
                </div>
                <button class="cart-btn" aria-label="Cart">
                    <ion-icon name="cart-outline"></ion-icon>
                    <span class="cart-badge">0</span>
                </button>
                <button class="user-btn" aria-label="User">
                    <ion-icon name="person-circle-outline"></ion-icon>
                </button>
            </div>
            <div class="hamburger">
                <ion-icon name="menu-outline"></ion-icon>
            </div>
        </nav>
    </header>

<section id="home" class="hero">
        <div class="hero-content">
            <span class="badge-text" data-text="Next Generation">Next Generation</span>
            <h1>The Future of <span class="gradient-text">Tech</span> Is Here</h1>
            <p>Experience the seamless integration of holographic feedback and quantum processing. Lumina Series X
                represents a new era of personal computing.</p>
            <div class="hero-buttons">
                <button class="btn btn-primary">Explore Collection <ion-icon
                        name="arrow-forward-outline"></ion-icon></button>
                <button class="btn btn-secondary"><ion-icon name="play-circle-outline"></ion-icon> Watch Demo</button>
            </div>
            <div class="stats">
                <div class="stat-item">
                    <h4>20k+</h4>
                    <p>Users</p>
                </div>
                <div class="stat-item">
                    <h4>4.9</h4>
                    <p>Rating</p>
                </div>
            </div>
        </div>
        <div class="hero-visual">
            <div class="glow-circle circle-1"></div>
            <div class="glow-circle circle-2"></div>
            <img src="hero.png" alt="Lumina Smart Speaker" class="hero-img floating">

<div class="float-card card-1 glass-panel">
                <div class="icon-box"><ion-icon name="wifi-outline"></ion-icon></div>
                <div class="text">
                    <h5>Ultra Fast</h5>
                    <p>5G Connectivity</p>
                </div>
            </div>
            <div class="float-card card-2 glass-panel">
                <div class="icon-box"><ion-icon name="battery-charging-outline"></ion-icon></div>
                <div class="text">
                    <h5>72h Battery</h5>
                    <p>Quantum Cell</p>
                </div>
            </div>
        </div>
    </section>

<div class="features-strip glass-panel">
        <div class="feature-item">
            <ion-icon name="rocket-outline"></ion-icon>
            <div>
                <h4>Fast Shipping</h4>
                <p>Within 24 hours</p>
            </div>
        </div>
        <div class="feature-item">
            <ion-icon name="shield-checkmark-outline"></ion-icon>
            <div>
                <h4>Secure Payment</h4>
                <p>Encrypted 256-bit</p>
            </div>
        </div>
        <div class="feature-item">
            <ion-icon name="refresh-outline"></ion-icon>
            <div>
                <h4>30 Days Return</h4>
                <p>Money back guarantee</p>
            </div>
        </div>
        <div class="feature-item">
            <ion-icon name="headset-outline"></ion-icon>
            <div>
                <h4>24/7 Support</h4>
                <p>Expert assistance</p>
            </div>
        </div>
    </div>

<section id="products" class="products-section">
        <div class="section-header">
            <h2>Trending <span class="gradient-text">Products</span></h2>
            <div class="filter-tabs">
                <button class="tab active">All</button>
                <button class="tab">Audio</button>
                <button class="tab">Wearables</button>
                <button class="tab">Gaming</button>
            </div>
        </div>

<div class="products-grid">
            
            <div class="product-card">
                <div class="card-image">
                    <span class="tag">New</span>
                    <img src="headphones.png" alt="Lumina Headphones">
                    <div class="card-overlay">
                        <button class="action-btn" aria-label="Add to Cart"><ion-icon
                                name="bag-add-outline"></ion-icon></button>
                        <button class="action-btn" aria-label="Wishlist"><ion-icon
                                name="heart-outline"></ion-icon></button>
                    </div>
                </div>
                <div class="card-info">
                    <div class="rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-half"></ion-icon>
                        <span>(4.8)</span>
                    </div>
                    <h3>Lumina H1 Pro</h3>
                    <p>Noise Cancelling Neural Link</p>
                    <div class="price-row">
                        <span class="price">$299.00</span>
                        <button class="btn-sm">Buy Now</button>
                    </div>
                </div>
            </div>

<div class="product-card">
                <div class="card-image">
                    <span class="tag hot">Hot</span>
                    <img src="watch.png" alt="Lumina Watch">
                    <div class="card-overlay">
                        <button class="action-btn" aria-label="Add to Cart"><ion-icon
                                name="bag-add-outline"></ion-icon></button>
                        <button class="action-btn" aria-label="Wishlist"><ion-icon
                                name="heart-outline"></ion-icon></button>
                    </div>
                </div>
                <div class="card-info">
                    <div class="rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <span>(5.0)</span>
                    </div>
                    <h3>Chronos X</h3>
                    <p>Holographic Smart Interface</p>
                    <div class="price-row">
                        <span class="price">$349.00</span>
                        <button class="btn-sm">Buy Now</button>
                    </div>
                </div>
            </div>

<div class="product-card">
                <div class="card-image">
                    <img src="hero.png" alt="Lumina Hub" style="transform: scale(0.8);">
                    <div class="card-overlay">
                        <button class="action-btn" aria-label="Add to Cart"><ion-icon
                                name="bag-add-outline"></ion-icon></button>
                        <button class="action-btn" aria-label="Wishlist"><ion-icon
                                name="heart-outline"></ion-icon></button>
                    </div>
                </div>
                <div class="card-info">
                    <div class="rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star-outline"></ion-icon>
                        <span>(4.2)</span>
                    </div>
                    <h3>Lumina Hub</h3>
                    <p>Central AI Home Assistant</p>
                    <div class="price-row">
                        <span class="price">$199.00</span>
                        <button class="btn-sm">Buy Now</button>
                    </div>
                </div>
            </div>

<div class="product-card">
                <div class="card-image">
                    <img src="headphones.png" alt="Lumina Sound" style="filter: hue-rotate(45deg);">
                    <div class="card-overlay">
                        <button class="action-btn" aria-label="Add to Cart"><ion-icon
                                name="bag-add-outline"></ion-icon></button>
                        <button class="action-btn" aria-label="Wishlist"><ion-icon
                                name="heart-outline"></ion-icon></button>
                    </div>
                </div>
                <div class="card-info">
                    <div class="rating">
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <ion-icon name="star"></ion-icon>
                        <span>(4.9)</span>
                    </div>
                    <h3>Lumina H1 Lite</h3>
                    <p>Essential Wireless Audio</p>
                    <div class="price-row">
                        <span class="price">$149.00</span>
                        <button class="btn-sm">Buy Now</button>
                    </div>
                </div>
            </div>

</div>
    </section>

<section class="newsletter">
        <div class="newsletter-content glass-panel">
            <h2>Join the <span class="gradient-text">Revolution</span></h2>
            <p>Subscribe for exclusive drops, early bird access, and tech news.</p>
            <form class="newsletter-form" onsubmit="event.preventDefault()">
                <div class="input-group">
                    <input type="email" placeholder="Enter your email address" required>
                    <button type="submit">Subscribe</button>
                </div>
            </form>
        </div>
    </section>

<footer>
        <div class="footer-content">
            <div class="footer-col brand-col">
                <div class="logo">
                    <ion-icon name="prism-outline"></ion-icon> LUMINA
                </div>
                <p>Pioneering the future of consumer electronics with sustainable, high-performance technology.</p>
                <div class="social-links">
                    <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
                    <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
                    <a href="#"><ion-icon name="logo-discord"></ion-icon></a>
                    <a href="#"><ion-icon name="logo-youtube"></ion-icon></a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Shop</h4>
                <ul>
                    <li><a href="#">All Products</a></li>
                    <li><a href="#">New Arrivals</a></li>
                    <li><a href="#">Accessories</a></li>
                    <li><a href="#">Gift Cards</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Support</h4>
                <ul>
                    <li><a href="#">Help Center</a></li>
                    <li><a href="#">Warranty</a></li>
                    <li><a href="#">Order Status</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Company</h4>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Innovation</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>© 2025 Lumina Inc. All rights reserved.</p>
        </div>
    </footer>

</html>

CSS

/* Global Vars & Reset */
:root {
    --bg-dark: #0a0a0f;
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-glass: rgba(255, 255, 255, 0.02);
    --primary: #00f0ff;
    --secondary: #7000ff;
    --accent: #ff0055;
    --text-main: #ffffff;
    --text-muted: #a0a0b0;
    --font-main: 'Outfit', sans-serif;
    --glow-primary: 0 0 20px rgba(0, 240, 255, 0.5);
    --glow-secondary: 0 0 20px rgba(112, 0, 255, 0.5);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utility Classes */
.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.btn {
    padding: 12px 30px;
    border-radius: 50px;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    color: white;
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-secondary:hover {
    background: rgba(0, 240, 255, 0.1);
    box-shadow: var(--glow-primary);
}

.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
}

header.scrolled {
    background: rgba(10, 10, 15, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navbar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}

.logo-icon {
    font-size: 1.8rem;
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-weight: 500;
    position: relative;
    opacity: 0.7;
    transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    opacity: 1;
    color: var(--primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 5px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.search-box input {
    background: transparent;
    border: none;
    color: white;
    outline: none;
    width: 150px;
    font-family: var(--font-main);
}

.search-box button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
}

.nav-actions button:not(.search-box button) {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.nav-actions button:hover {
    color: var(--primary);
    transform: scale(1.1);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--accent);
    color: white;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hamburger {
    display: none;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    padding: 120px 5% 50px;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
}

.hero-content h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 700;
}

.badge-text {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 240, 255, 0.1);
    color: var(--primary);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

.stats {
    display: flex;
    gap: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.stat-item h4 {
    font-size: 2rem;
    font-weight: 700;
}

.stat-item p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Hero Visual */
.hero-visual {
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-img {
    width: 80%;
    z-index: 2;
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
}

@keyframes float {

0%,
    100% {
        transform: translateY(0);
    }

50% {
        transform: translateY(-20px);
    }
}

.glow-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
}

.circle-1 {
    width: 300px;
    height: 300px;
    background: var(--primary);
    top: 50px;
    right: 50px;
    opacity: 0.2;
}

.circle-2 {
    width: 400px;
    height: 400px;
    background: var(--secondary);
    bottom: 50px;
    left: 50px;
    opacity: 0.15;
}

/* Floating Cards */
.float-card {
    position: absolute;
    width: 200px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 3;
    animation: float 5s ease-in-out infinite reverse;
}

.card-1 {
    top: 15%;
    right: 0;
}

.card-2 {
    bottom: 20%;
    left: 0;
    animation-delay: 1s;
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
}

.float-card h5 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.float-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Features Strip */
.features-strip {
    max-width: 1400px;
    margin: 0 auto 100px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-item ion-icon {
    font-size: 2.5rem;
    color: var(--primary);
}

.feature-item h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.feature-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Products Section */
.products-section {
    max-width: 1400px;
    margin: 0 auto 100px;
    padding: 0 5%;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 3rem;
}

.filter-tabs {
    display: flex;
    gap: 15px;
}

.tab {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-main);
}

.tab.active,
.tab:hover {
    background: var(--primary);
    color: var(--bg-dark);
    border-color: var(--primary);
    font-weight: 600;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.product-card {
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.card-image {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    padding: 20px;
}

.card-image img {
    max-height: 100%;
    transition: var(--transition);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.product-card:hover .card-image img {
    transform: scale(1.1);
}

.tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--primary);
    color: var(--bg-dark);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tag.hot {
    background: var(--accent);
    color: white;
}

.card-overlay {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateX(20px);
    transition: var(--transition);
}

.product-card:hover .card-overlay {
    opacity: 1;
    transform: translateX(0);
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(5px);
    cursor: pointer;
    font-size: 1.2rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    background: var(--primary);
    color: var(--bg-dark);
}

.card-info {
    padding: 25px;
}

.rating {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffd700;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.rating span {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: 5px;
}

.product-card h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.product-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}

.btn-sm {
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-main);
}

.btn-sm:hover {
    background: white;
    color: var(--bg-dark);
}

/* Newsletter */
.newsletter {
    max-width: 1400px;
    margin: 0 auto 100px;
    padding: 0 5%;
}

.newsletter-content {
    text-align: center;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.newsletter-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 240, 255, 0.1), rgba(112, 0, 255, 0.1));
    z-index: -1;
}

.newsletter h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.newsletter p {
    color: var(--text-muted);
    margin-bottom: 40px;
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
}

.input-group {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 5px;
}

.input-group input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 15px 25px;
    color: white;
    font-size: 1rem;
    outline: none;
}

.input-group button {
    background: var(--primary);
    color: var(--bg-dark);
    border: none;
    padding: 12px 30px;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.input-group button:hover {
    background: white;
}

/* Footer */
footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 5% 20px;
    background: rgba(0, 0, 0, 0.3);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.footer-col ul li {
    margin-bottom: 15px;
}

.footer-col ul li a {
    color: var(--text-muted);
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: var(--primary);
    padding-left: 5px;
}

.brand-col p {
    color: var(--text-muted);
    margin: 20px 0;
    font-size: 0.9rem;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary);
    color: var(--bg-dark);
    border-color: var(--primary);
}

.footer-bottom {
    text-align: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 992px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 150px;
    }

.hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.hero-buttons {
        justify-content: center;
    }

.hero-visual {
        height: 400px;
        margin-top: 50px;
    }

.stats {
        width: 100%;
        justify-content: center;
    }

.footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {

.nav-links,
    .nav-actions .search-box,
    .nav-actions .user-btn {
        display: none;
    }

.hamburger {
        display: block;
        font-size: 2rem;
        cursor: pointer;
    }

.hero-content h1 {
        font-size: 3rem;
    }

.section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

.footer-content {
        grid-template-columns: 1fr;
    }

.float-card {
        display: none;
    }

/* Hide floating cards on mobile */
}

JS

document.addEventListener('DOMContentLoaded', () => {
    // Header Scroll Effect
    const header = document.getElementById('header');

// Mobile Menu Toggle (Simple placeholder logic)
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

// Note: For a real mobile menu overlay, we'd need more CSS/HTML adjustments.
    // This is just a click handler setup.
    hamburger.addEventListener('click', () => {
        // Simple alert for now as mobile menu UI overlay wasn't in main scope but good to have listener
        console.log('Toggle mobile menu');
    });

// Add to Cart Interaction
    const cartBtns = document.querySelectorAll('.action-btn[aria-label="Add to Cart"], .btn-sm');
    const cartBadge = document.querySelector('.cart-badge');
    let cartCount = 0;

cartBtns.forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.preventDefault();

// Animation effect
            const originalText = this.innerText;
            if (this.classList.contains('btn-sm')) {
                this.innerText = 'Added';
                this.style.background = 'var(--primary)';
                this.style.color = 'var(--bg-dark)';
            } else {
                this.style.transform = 'scale(0.9)';
            }

// Update cart count
            cartCount++;
            cartBadge.innerText = cartCount;

// Visual bounce on badge
            cartBadge.style.transform = 'scale(1.5)';
            setTimeout(() => {
                cartBadge.style.transform = 'scale(1)';
            }, 200);

// Reset button after delay
            setTimeout(() => {
                if (this.classList.contains('btn-sm')) {
                    this.innerText = originalText;
                    this.style.background = '';
                    this.style.color = '';
                } else {
                    this.style.transform = '';
                }
            }, 1500);

// Optional: Toast (Simulated via console or simple alert if needed, but sleek button change is better)
        });
    });

// Smooth Scroll for Anchors
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

// 3D Tilt Effect on Hero Image (Simple Mouse Parallax)
    const heroSection = document.querySelector('.hero');
    const heroImg = document.querySelector('.hero-img');

if (heroSection && heroImg) {
        heroSection.addEventListener('mousemove', (e) => {
            const x = (window.innerWidth - e.pageX * 2) / 90;
            const y = (window.innerHeight - e.pageY * 2) / 90;

heroImg.style.transform = `translateX(${x}px) translateY(${y}px)`;
        });

// Reset on leave
        heroSection.addEventListener('mouseleave', () => {
            heroImg.style.transform = 'translateX(0) translateY(0)';
        });
    }
});

Lumina Tech: Productos tecnológicos del futuro e innovación

Recomendado

Animación de carga de CSS Spinner

Un código de Mete

Animación de morfosis SVG

HTML

CSS

JS

Recomendado

Animación de carga de CSS Spinner

Un código de Mete

Animación de morfosis SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS