Ce que c’est
Un site de spa, complet : accueil plein écran, bandeau de logos, accordéon de soins, chiffres animés, parcours en trois étapes, carrousel d’équipe, avis, abonnements, FAQ, journal, pied de page. Une seule page, un seul fichier HTML.
Le design reprend celui d’un template commercial dont seules les
photos ont été conservées. Tout le code a été réécrit :
l’original tenait dans 192 Ko de CSS minifié, 159 identifiants opaques,
147 attributs style= en ligne, un moteur d’animation
propriétaire et quatre bibliothèques externes — illisible, donc inutile
pour apprendre. Ici, chaque section est précédée d’un commentaire qui dit
ce qu’elle est.
C’est le point important : ce template n’est pas là pour être admiré, il est là pour être lu, cassé et remonté.
Ce que tu changes en premier
Les couleurs — sept lignes
Tout en haut de assets/css/style.css :
--color-surface: #fdf8f0; /* fond de page, crème */
--color-surface-2: #ffffff; /* cartes, barre de navigation */
--color-surface-3: #f0e8dc; /* boîtes pleines */
--color-clay: #6b4423; /* couleur de marque : titres, sections sombres */
--color-sand: #d4c5b0; /* filets pointillés, bordures */
--color-ink: #33261a; /* texte courant */
Une chose à comprendre avant de toucher au reste : une propriété
personnalisée est substituée là où elle est déclarée, pas là où elle est
utilisée. Redéfinir --color-ink plus bas ne suffit
pas : --color-muted, qui en dérive, garde la valeur calculée
sur :root. C’est pour ça que la carte d’abonnement mise en
avant redéclare les deux — et c’est exactement le genre de bug qui coûte
vingt minutes quand on ne connaît pas la règle.
Le nom
Cherche « Lunaris » dans index.html. Aucune classe CSS ne
contient la marque : un rechercher-remplacer ne peut rien casser. Le logo
est un SVG plus un mot écrit en HTML, pas du texte vectorisé.
Les tailles
L’échelle typographique est déclarée une fois, puis redéclarée à chaque
point de rupture. Un titre n’a donc jamais sa propre media query : tu
changes --h2-size et toute la page suit.
Les treize effets, et comment ils sont faits
Tous relevés dans les données du moteur d’animation de l’original (147 déclencheurs actifs, 31 séquences), mesurés au navigateur, puis réécrits en CSS et JavaScript lisibles.
| Effet | Où | Comment |
|---|---|---|
| Apparition au scroll | 50 blocs | IntersectionObserver, déclenchement à 15 % du bloc, 1000 ms |
| Apparition latérale | 12 blocs | même mécanique, translation horizontale de 100 px |
| Filet qui se trace | 14 filets | largeur 0 → 100 % en 1500 ms, en CSS seul |
| Compteurs | 3 chiffres | deux colonnes de chiffres dans une fenêtre d’un chiffre |
| Photo encadrée | 4 images | zoom 1,3 → 1 pendant qu’un voile glisse hors du cadre |
| Ligne de parcours | étapes | hauteur pilotée par le scroll, cible mesurée sur les pastilles |
| Carrousel collant | équipe | panneau collant sur 300 vh, piste translatée par le scroll |
| Bandeaux défilants | logos, horaires | 59 px/s, copies comptées au chargement, boucle sans saut |
| Boutons | partout | le libellé monte, sa copie arrive par le bas, l’icône part en diagonale |
| Accordéon de soins | 4 cartes | flex-basis animé : 40,8 % pour la carte ouverte, 28 % pour les autres |
| Icônes sociales | équipe | échange des deux états au survol, pastille remplie |
| Menus déroulants | navigation | hauteur animée, chevron à 180°, clavier et Échap gérés |
| FAQ | questions | <details> natif, hauteur animée, fermeture retardée |
Ce qu’il faut savoir
- Aucune requête externe. Polices auto-hébergées, photos locales, aucun CDN, aucun tracker. L’export d’origine en faisait cinq.
- L’apparition au scroll ne peut pas masquer le contenu. L’état caché n’existe que si le JavaScript a tourné. Vérifié : avec le JavaScript coupé, la page rend 6 059 caractères de texte et aucun bloc n’est invisible.
- Zéro style et zéro script en ligne. Le template respecte la politique de sécurité stricte du site, celle-là même que la formation t’apprend à ne pas affaiblir.
- Accessibilité : lien d’évitement, états des menus annoncés, FAQ native, focus visible, décorations masquées aux lecteurs d’écran, animations coupées si le système le demande.
- Responsive vérifié à 390, 768, 1440 et 2560 px, sans débordement horizontal — l’original en avait 9 px à 768 px.
Ce qui n’est pas parfait
Autant le dire ici plutôt que te le laisser découvrir.
- Un défaut de l’original a été corrigé, pas reproduit. Son bandeau de logos revenait de −1169 px à −10 px alors que le motif mesure 1320 px : un saut de 140 px à chaque tour. Ici la boucle porte sur exactement une largeur de motif, mesurée au chargement, à la même vitesse de 59 px/s. C’est le seul écart volontaire.
- La page fait 1,6 % de haut de plus que la référence. Quelques sections respirent un peu plus. Rien ne se chevauche.
- Les liens pointent vers des ancres de cette page. L’original est un site multi-pages ; ici tout ramène à une section existante plutôt qu’à une erreur 404.
- Les six logos partenaires sont des placeholders dessinés pour ce template. À remplacer par de vrais logos.
- Les photos viennent du template d’origine. Le code est à toi ; pour les visuels, vérifie la licence ou remplace-les. Les polices, elles, sont libres de redistribution.
Il t’attend dans la bibliothèque.
Lunaris est inclus dans l’abonnement, avec les deux autres templates, les seize composants et la formation complète.
Accès immédiat · Sans engagement · Annulation en 1 clic