Lumina Retail HTML : Interface utilisateur pour les produits technologiques et le shopping

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 March 2025

Extrait de code HTML pour menu burger

17 March 2025

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lumina | Future Retail</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=Inter:wght@400;500;600&family=Outfit:wght@500;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>

<nav class="container">
        <div class="logo">Lumina<span>.</span></div>
        <ul class="nav-links">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Collections</a></li>
            <li><a href="#">About</a></li>
        </ul>
        <div class="cart-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="9" cy="21" r="1"></circle>
                <circle cx="20" cy="21" r="1"></circle>
                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
            </svg>
            <span class="cart-count">0</span>
        </div>
    </nav>

<header class="hero container">
        <div class="hero-content">
            <span class="hero-tag">New Collection 2024</span>
            <h1>Elevate Your <br>Reality</h1>
            <p>Experience the next generation of lifestyle technology. Precision engineered for the modern aesthetic.
            </p>
            <div class="hero-buttons">
                <a href="#featured" class="btn btn-primary">Shop Now</a>
                <a href="#" class="btn btn-outline">View Lookbook</a>
            </div>
        </div>
        <div class="hero-visual">
            <div class="glass-card">
                
                <svg class="floating-item" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
                            <stop offset="100%" style="stop-color:#2dd4bf;stop-opacity:1" />
                        </linearGradient>
                    </defs>
                    <path fill="url(#grad1)"
                        d="M45.7,-76.3C58.9,-69.3,69.1,-58.3,76.5,-46.3C83.9,-34.3,88.5,-21.3,86.6,-9.3C84.7,2.7,76.3,13.7,68.2,24.3C60.1,34.9,52.3,45.1,42.5,53.2C32.7,61.3,20.9,67.3,8.6,69.5C-3.7,71.7,-16.5,70.1,-28.6,65.3C-40.7,60.5,-52.1,52.5,-60.8,42.3C-69.5,32.1,-75.5,19.7,-76.8,6.8C-78.1,-6.1,-74.7,-19.5,-67.2,-31.1C-59.7,-42.7,-48.1,-52.5,-35.8,-60.1C-23.5,-67.7,-10.5,-73.1,3.4,-78.9C17.3,-84.7,32.5,-90.9,45.7,-76.3Z"
                        transform="translate(100 100)"
                        style="filter: drop-shadow(0px 10px 20px rgba(99, 102, 241, 0.4));" />
                </svg>
            </div>
        </div>
    </header>

<section id="featured" class="featured container">
        <div class="section-header">
            <div>
                <h2>Trending This Week</h2>
                <p>Curated selection of premium gear.</p>
            </div>
            <a href="#" class="btn btn-outline" style="padding: 0.75rem 1.5rem; font-size: 0.8rem;">View All</a>
        </div>

<div class="product-grid">
            
            <div class="product-card">
                <div class="product-image">
                    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="1"
                        stroke-linecap="round" stroke-linejoin="round">
                        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                        <line x1="8" y1="21" x2="16" y2="21"></line>
                        <line x1="12" y1="17" x2="12" y2="21"></line>
                    </svg>
                </div>
                <div class="product-info">
                    <span class="product-cat">Tech</span>
                    <h3 class="product-title">Lumina X-Display</h3>
                    <div class="product-footer">
                        <span class="price">$899.00</span>
                        <button class="add-btn" aria-label="Add to cart">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

<div class="product-card">
                <div class="product-image">
                    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#2dd4bf" stroke-width="1"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path>
                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
                        <line x1="12" y1="19" x2="12" y2="23"></line>
                        <line x1="8" y1="23" x2="16" y2="23"></line>
                    </svg>
                </div>
                <div class="product-info">
                    <span class="product-cat">Audio</span>
                    <h3 class="product-title">Sonic Air Pro</h3>
                    <div class="product-footer">
                        <span class="price">$299.00</span>
                        <button class="add-btn" aria-label="Add to cart">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

<div class="product-card">
                <div class="product-image">
                    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#f8fafc" stroke-width="1"
                        stroke-linecap="round" stroke-linejoin="round">
                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
                        <line x1="12" y1="18" x2="12.01" y2="18"></line>
                    </svg>
                </div>
                <div class="product-info">
                    <span class="product-cat">Mobile</span>
                    <h3 class="product-title">Slate Phone Z</h3>
                    <div class="product-footer">
                        <span class="price">$1,199.00</span>
                        <button class="add-btn" aria-label="Add to cart">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round">
                                <line x1="12" y1="5" x2="12" y2="19"></line>
                                <line x1="5" y1="12" x2="19" y2="12"></line>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="categories-grid container">
        <div class="category-card cat-1">
            <div class="cat-content">
                <h3>Workspaces</h3>
                <a href="#" class="cat-link">Explore Collection →</a>
            </div>
        </div>
        <div class="category-card cat-2">
            <div class="cat-content">
                <h3>Audio Gear</h3>
                <a href="#" class="cat-link">Explore Collection →</a>
            </div>
        </div>
    </div>

<section class="newsletter container" style="align-items: center;justify-content: center;">
        <h2>Join the Future</h2>
        <p>Subscribe for exclusive drops and early access to new tech.</p>
        <form class="newsletter-form">
            <input type="email" placeholder="Enter your email address">
            <button type="submit" class="btn btn-primary">Subscribe</button>
        </form>
    </section>

<div id="toast" class="toast">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        Item added to cart
    </div>

</html>

CSS

:root {
    --bg-color: #0f172a;
    --card-bg: rgba(30, 41, 59, 0.7);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --primary: #6366f1;
    --accent: #2dd4bf;
    --gradient-hero: linear-gradient(135deg, #6366f1 0%, #2dd4bf 100%);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --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-body);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
button {
    font-family: var(--font-heading);
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.btn-primary {
    background: var(--gradient-hero);
    color: white;
    box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.5);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -10px rgba(99, 102, 241, 0.6);
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-main);
    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
}

.logo span {
    color: var(--accent);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 3rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    transition: var(--transition);
    font-size: 0.95rem;
}

.nav-links a:hover,
.nav-links a.active {
    color: white;
}

.cart-icon {
    position: relative;
    cursor: pointer;
}

.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--accent);
    color: #0f172a;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 800;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    z-index: -1;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    z-index: -1;
}

.hero-content {
    max-width: 600px;
    z-index: 1;
}

.hero-tag {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: block;
}

.hero h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(to right, #fff, #94a3b8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.hero-buttons {
    display: flex;
    gap: 1rem;
}

.hero-visual {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    height: 70%;
    z-index: 0;
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.floating-item {
    position: absolute;
    width: 80%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    }

50% {
        transform: translate(-50%, -50%) translateY(-20px) rotate(2deg);
    }

100% {
        transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    }
}

/* Featured Section */
.featured {
    padding: 6rem 0;
}

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

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.section-header p {
    color: var(--text-muted);
}

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

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

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.product-image {
    height: 300px;
    background: #1e293b;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 60%;
    /* Adjusted for placeholder graphics */
    transition: var(--transition);
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.3));
}

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

.product-info {
    padding: 1.5rem;
}

.product-cat {
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.product-title {
    font-size: 1.25rem;
    margin: 0.5rem 0;
    color: white;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.price {
    font-weight: 700;
    font-size: 1.1rem;
}

.add-btn {
    background: white;
    color: #0f172a;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.add-btn:hover {
    background: var(--primary);
    color: white;
}

/* Categories */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 6rem auto;
}

.category-card {
    height: 300px;
    border-radius: 20px;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 2.5rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: var(--transition);
    z-index: -1;
}

.cat-1::before {
    background-image: radial-gradient(circle at center, #4f46e5, #0f172a);
}

.cat-2::before {
    background-image: radial-gradient(circle at center, #0d9488, #0f172a);
}

.category-card:hover::before {
    transform: scale(1.05);
}

.cat-content h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.cat-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Newsletter */
.newsletter {
    background: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(45, 212, 191, 0.1));
    border-radius: 24px;
    padding: 4rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

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

.newsletter-form {
    max-width: 500px;
    margin: 2rem auto 0;
    display: flex;
    gap: 1rem;
}

.newsletter-form input {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    color: white;
    font-family: var(--font-body);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: white;
    color: #0f172a;
    padding: 1rem 2rem;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(150%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2000;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toast.show {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

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

.categories-grid {
        grid-template-columns: 1fr;
    }

.newsletter-form {
        flex-direction: column;
    }

.hero-visual {
        display: none;
    }

.hero-content {
        margin: 0 auto;
        text-align: center;
    }

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

.hero p {
        margin-left: auto;
        margin-right: auto;
    }
}

html {
    scroll-behavior: smooth;
}

JS

document.addEventListener('DOMContentLoaded', () => {
    // Cart Functionality
    const addButtons = document.querySelectorAll('.add-btn');
    const cartCountElement = document.querySelector('.cart-count');
    const toast = document.getElementById('toast');
    let cartCount = 0;

addButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Increment cart
            cartCount++;
            cartCountElement.textContent = cartCount;

// Animation for cart badge
            cartCountElement.style.transform = 'scale(1.5)';
            setTimeout(() => {
                cartCountElement.style.transform = 'scale(1)';
            }, 200);

// Show Toast
            showToast();
        });
    });

function showToast() {
        toast.classList.add('show');
        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }

// Navbar Scroll Effect
    const nav = document.querySelector('nav');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            nav.style.background = 'rgba(15, 23, 42, 0.95)';
            nav.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)';
        } else {
            nav.style.background = 'rgba(15, 23, 42, 0.8)';
            nav.style.boxShadow = 'none';
        }
    });

// Smooth Scroll for Anchor Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;

const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
});

Lumina Retail HTML : Interface utilisateur pour les produits technologiques et le shopping

Recommandé

Bouton sombre et clair

Extrait de code HTML pour menu burger

Choix multiples

HTML

CSS

JS

Recommandé

Bouton sombre et clair

Extrait de code HTML pour menu burger

Choix multiples

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS