Ce que c’est
La page d’accueil d’une école en ligne, complète : un héros avec badge d’avis et grille bento, une bande de partenaires, trois promesses, quatre cartes de cours, six arguments disposés autour d’un portrait, six instructeurs, un rail de témoignages, une FAQ, un journal, un appel à l’action et un pied de page. Une page, un fichier HTML, dix sections.
Le dessin reprend un gabarit Webflow. Sa mise en page, son rythme vertical et les réglages de ses animations ont été relevés par script sur l’original — durées, courbes, décalages, déclencheurs — puis réécrits intégralement. Il ne reste pas une ligne du code d’origine, pas une photo, pas un logo. Hauteur de page : 10 002 px contre 10 007 pour l’original, et aucune section ne s’en écarte de plus de 1,2 %.
Ce que vous changez en premier
Les couleurs — un seul bloc
Tout est dans la partie 1 de assets/css/style.css. L’accent
de l’original était un vermillon orangé : c’est sa signature, il a donc
été décalé. Erudia est en framboise. La teinte a bougé, la valeur
non, et c’est ce qui garde le dessin intact.
L’accent existe en trois nuances qui vont ensemble :
--accent (#E8336B, 4,1 : 1 sur blanc) pour les formes et les
icônes, --accent-strong (#C41F52, 5,7 : 1) pour le survol et
le texte d’accent, --accent-soft (#FF8FB4) pour un accent
posé sur une photo. En changer une oblige à changer les trois, sinon un
libellé devient illisible quelque part.
Le nom
Cherchez Erudia : il est dans le titre, la barre, le pied, la
FAQ, les témoignages et le bloc final. Aucun nom de classe ne le
contient, donc un rechercher-remplacer sur le nom ne peut rien casser.
Les tailles
La partie 2 de la feuille, et elle seule. Quatre paliers — 1440, 991, 767
et 479 px — avec les valeurs relevées sur l’original. Un titre n’a jamais
sa propre media query : changez --h2 et tous les h2 suivent.
Les compteurs et la citation ont leurs propres variables, parce qu’ils
suivaient déjà leur propre échelle chez l’original.
Les onze effets, et comment ils sont faits
| Effet | Où | Original | Ici |
|---|---|---|---|
| Apparition au défilement | tous les blocs de contenu | translateY 40px + opacité, 500 ms, outQuad, décalages 0→600 ms | identiques, déclenchés à 15 % du bas de l’écran au lieu du premier pixel visible |
| Voile sur une image | 2 portraits du héros, 4 visuels de cours | largeur, 1300 ms, 300 ms de retard, inOutCirc | scaleX(0) depuis la droite, mêmes durée, retard et courbe |
| Bande de partenaires | « 250 companies » | translateX -100 en 20 000 ms | deux rangées identiques, une largeur pleine en 20 s, sans couture |
| Fleur qui tourne | tuile verte du héros | 360° en 30 000 ms | identique, animation CSS |
| Survol des cartes | cours, article vedette | scale 1 → 1.2, 800 ms, outQuad | identique |
| Survol des instructeurs | 6 cartes | taille + rotation, 400/500 ms, easeInOut | la carte monte de 3 px, la photo grandit de 1,06 et pivote de 1,5° |
| Accordéon | FAQ | hauteur 500 ms à l’ouverture, 400 ms à la fermeture, icône qui pivote | <details> natif, hauteur animée par le script, le + pivote de 135° |
| Diapositive active | témoignages | scale 0.8 ↔ 1, 500 ms, ease | les portraits hors du centre reculent à 0,9 |
| Carrousel | témoignages | onglets avec barre de progression | scroll-snap natif : glisser, balayer et le clavier marchent sans JS |
| Liens de la barre | navigation | text-decoration-color, 0,35 s | identique |
| Icônes sociales | pied de page | couleur, 0,35 s | identique |
prefers-reduced-motion remet tout à l’état final
immédiatement — délais compris. Un délai, c’est du mouvement
étalé dans le temps.
Ce qu’il faut savoir
- Aucune requête externe, aucun build, aucun framework. Vérifié en servant le dossier et en listant chaque requête : toutes locales.
-
CSP stricte. Zéro style en ligne, zéro script en
ligne, zéro
onclick. Vérifié en servant le dossier avec l’en-tête, pas supposé — et le banc l’a appris à ses dépens, la politique ayant bloqué sa propre tentative d’injecter une feuille. -
Sans JavaScript, rien n’est caché. L’état masqué
s’écrit
.js [data-reveal], et c’estenhance.jsqui pose la classe. Supprimez les deux balises de script : les 38 titres restent visibles, les voiles sont levés, les accordéons s’ouvrent, le rail défile encore. - Aucun débordement horizontal à 390, 1440 et 2560 px, au chargement comme après avoir déroulé toute la page — le moment où les blocs qui entrent par le côté se trahissent.
- Le lavis pastel du héros est en CSS. L’original le livrait en PNG de 1,9 Mo ; quatre dégradés radiaux donnent la même image pour rien.
Ce qui n’est pas parfait
- La vidéo du héros est devenue une image fixe. 920 ko de MP4 pour une tuile de 361 × 500 px. L’image pèse mille fois moins et, à l’arrêt, on ne voit pas la différence. Le bouton pause est parti avec elle.
- Le rail a gagné deux boutons et une position annoncée, 80 px sous lui — repris sur le bas de la section pour que le rythme d’ensemble tienne. L’original n’a aucune commande visible : au clavier, personne n’atteint le deuxième témoignage.
- La section « progression » garde ses six arguments sur téléphone, là où l’original en masque deux. Elle est 34 % plus haute à 479 px. Cacher du contenu sur petit écran n’est pas une mise en page.
- Les logos partenaires sont dessinés, pas photographiés : six marques inventées, six symboles SVG dans le sprite en haut du fichier.
- Les images sont générées, donc libres de droit — mais elles sont générées, et une foule générée reste une foule générée. Remplacez-les par les vôtres, la mise en page ne bougera pas : chaque rapport d’aspect est fixé dans la feuille de style.
Il t’attend dans la bibliothèque.
Erudia est inclus dans l’abonnement, avec le reste de la bibliothèque et la formation complète.
Accès immédiat · Sans engagement · Résiliable en un clic