Burberry Neo-London

Fiche Descriptive Complète : Burberry Neo-London

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template 1kjpihvxau.html (Burberry Neo-London)

Version 1.0.0

Date de création 14 Mars 2026

Auteur / Designer Refoia Jeremy Tech (Analyse IA)

Type de page Landing Page E-commerce / Lookbook Cyberpunk

Objectif principal Présentation d’une collection capsule haute couture futuriste

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template propose une expérience immersive « Cyber-Luxe ». Il réinterprète l’identité visuelle de Burberry à travers les codes du genre Cyberpunk/Dystopique.

Navigation : Barre sticky avec effet de flou (backdrop-blur).

Hero Section : Titre massif avec effet « glitch » et bouton d’appel à l’action (CTA) néon.

Galerie de produits : Grille de 3 cartes avec effets de survol (grayscale vers couleur) et zoom fluide.

Background : Motif « Cyber-Tartan » généré dynamiquement en CSS pur.

📌 Public cible (Persona)

👤 Consommateurs Luxe Techwear : Adeptes de mode futuriste.

👤 Fans de l’esthétique Cyberpunk : Utilisateurs sensibles au design « Glitch » et sombre.

👤 Collectionneurs digitaux : Intéressés par les « Drops » exclusifs.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 Sémantique.

Framework CSS : Tailwind CSS (via CDN).

Typographie : Inter (Google Fonts) avec variantes Light (300), Bold (700) et Black (900).

Responsive : ✅ Oui (Grid mobile-first grid-cols-1 vers md:grid-cols-3).

📦 Dépendances / Assets

HTML

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs (Design Tokens)

Élément Code HEX / Valeur Usage

Primary (Gold) #CBA16A Accents, titres secondaires, boutons au survol.

Background #0a0a0a / #050505 Fond sombre profond.

Text Primary #e5e5e5 Lisibilité principale.

Glitch Red #ff003c Effet d’ombre portée sur le titre.

Glitch Cyan #00e5ff Effet d’ombre portée sur le titre.

📐 Mise en Page — Layout

Background Pattern : .cyber-tartan (Utilisation de linear-gradient pour simuler le motif Burberry).

Effets Spéciaux :

text-glitch : Doubles ombres portées colorées.

neon-border : box-shadow dorée diffuse.

Transitions : 700ms sur les images pour un effet cinématographique.

🧱 STRUCTURE DU FICHIER — DOM

index.html

nav : Logo « Neo-London » + Liens « Connect [Neural] ».

header (Hero) : Image d’archive Unsplash en mix-blend-mode (overlay).

section (Collection) :

Cyber-Trench v4.0

Neon-Check Hoodie

Data-Scarf

footer : Copyright « No Future In Style ».

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu

1 Effet Glitch Vérifier le rendu H1 Les ombres rouge/cyan doivent être décalées.

2 Hover Images Passer la souris sur un produit Passage du noir et blanc à la couleur + zoom arrière.

3 Sticky Nav Scroller la page La navigation reste visible avec un fond flou.

4 Responsive Largeur < 768px La grille de 3 colonnes passe en 1 colonne verticale. 5 Bouton CTA Hover sur "Explorer" Le bouton devient plein (#CBA16A) et le texte devient noir. 📌 INSTRUCTIONS SPÉCIALES POUR L'IA NOTE TECHNIQUE : Le motif Burberry est généré via un triple linear-gradient dans la classe .cyber-tartan. Pour modifier la densité du motif, ajustez les valeurs 40px et 80px dans les propriétés CSS de fond.