Ceci est une Hero Section secondaire
Une variante de Hero Section en deux colonnes : texte d'un côté, image de l'autre, plutôt qu'en plein écran.
Découvrir la suiteUne Hero Section est le premier bloc visible d'une page web. Cette version occupe toute la hauteur de l'écran, avec une image en arrière-plan.
Découvrir la suiteUne variante de Hero Section en deux colonnes : texte d'un côté, image de l'autre, plutôt qu'en plein écran.
Découvrir la suiteUne card est un bloc autonome regroupant une image et un texte, souvent utilisé pour présenter des services ou des articles. Ici, trois cards sont alignées côte à côte grâce à Flexbox.
Structure le contenu de la page à l'aide de balises.
Habille visuellement la structure : couleurs, espacements, mise en page.
Ajoute du comportement et de l'interactivité à la page.
Une background-image habille visuellement un bloc, sans passer par une balise img.
Plutôt que de coder un slider entièrement à la main, on peut intégrer une bibliothèque externe déjà construite — ici Splide, chargée depuis un CDN.
Un iframe permet d'intégrer un contenu externe à une page web, comme cette vidéo YouTube. Un conteneur avec un padding-bottom en pourcentage la rend responsive.
Même principe que la vidéo : Google Maps fournit un code iframe, dont on retire les dimensions fixes pour les gérer nous-mêmes en CSS.
Un tableau organise des données en lignes et colonnes, à l'aide des balises table, thead, tbody, tr, th et td.
| Jour | Horaires |
|---|---|
| Lundi | 9h - 18h |
| Mardi | 9h - 18h |
| Mercredi | 9h - 18h |
| Jeudi | 9h - 18h |
| Vendredi | 9h - 17h |
Un formulaire permet de recueillir des informations saisies par l'utilisateur, à l'aide de champs input, select, textarea, regroupés dans des fieldset.