Ce que c’est
Un site d’installateur solaire, complet : accueil en vidéo, offres, étapes du projet, chiffres, avis, FAQ, pied de page. Une seule page, un seul fichier HTML.
Le design reprend celui d’un template commercial dont seules les photos et la vidéo ont été conservées. Tout le code a été réécrit : l’original tenait dans 292 Ko de CSS minifié, un moteur d’animation propriétaire et cinq 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 — huit lignes
Tout en haut de assets/css/style.css :
--color-surface: #f4f6f0; /* fond de page */
--color-surface-2: #ffffff; /* surfaces posées */
--color-surface-3: #dfe5d6; /* boîtes pleines, boutons */
--color-ink: #14201a; /* texte courant, sections sombres */
--color-accent: #c8f04a; /* bandeau, surbrillances */
Une chose à comprendre avant de toucher au reste : une section sombre
ne restyle pas ses enfants, elle échange deux jetons. La classe
.is-inverted remplace le fond par l’encre et inversement ;
boutons, textes atténués et bordures suivent tout seuls. C’est pour ça
qu’aucun bouton n’a de variante « sur fond sombre ».
Le nom
Cherche « Havenwatt » dans index.html. Aucune classe CSS ne
contient la marque : un rechercher-remplacer ne peut rien casser.
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 dix-neuf effets, et comment ils sont faits
Tous relevés dans les données du moteur d’animation de l’original (22 interactions, 21 timelines, 47 actions), mesurés au navigateur, puis réécrits en CSS et JavaScript lisibles. Voici les principaux.
| Effet | Où | Comment |
|---|---|---|
| Titres découpés en lignes | tous les titres | le JS mesure les lignes réelles, le CSS anime chaque ligne dans son masque |
| Accueil collant | section d’accueil | le JS écrit une variable de progression, le CSS réduit la vidéo et remonte le texte |
| Parallaxe | 16 blocs et photos | une variable de −1 à +1 écrite au scroll, translation en CSS |
| Nav inversée | sections sombres | une classe posée à 8 % de la hauteur d’écran |
| Apparition au scroll | 21 blocs | IntersectionObserver, déclenchement à 88 % de la hauteur d’écran |
| Boutons | partout | libellé découpé en lettres, chacune décalée de 20 ms depuis le centre |
| Deux carrousels | solutions, arguments | scroll-snap natif : glisser, balayer et le clavier marchent sans JS |
| FAQ | questions | <details> natif, hauteur animée |
Ce qu’il faut savoir
- Aucune requête externe. Polices auto-hébergées, vidéo et 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é. S’il échoue, la page reste entièrement lisible — c’est exactement le piège qui rendait des sections invisibles dans l’original.
- 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, 1440 et 2560 px, sans débordement horizontal.
Ce qui n’est pas parfait
Autant le dire ici plutôt que te le laisser découvrir.
- La vidéo de fond pèse 4,2 Mo. C’est le fichier d’origine, non ré-encodé. Pour un vrai site, la ré-encoder ou la remplacer par son image de repli — le module « Qualité » de la formation t’explique comment.
- La page fait 7 % 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 photos et la vidéo 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.
Prends-le, ouvre-le, casse-le.
Havenwatt est gratuit. La bibliothèque complète — les autres templates et les seize composants — est incluse dans l’abonnement, avec la formation.
Accès immédiat · Sans engagement · Annulation en 1 clic