Bienvenue dans ce TP d'intégration web. Vous allez reproduire une landing page complète et responsive à partir d'une maquette graphique, en utilisant les fonctionnalités de Bootstrap.
- Maîtriser le système de grille Bootstrap.
- Manipuler les composants interactifs Bootstrap.
- Savoir surcharger proprement du CSS sans altérer la bibliothèque tierce.
- Mettre en place un scroll fluide et des interactions en JavaScript Vanilla.
Votre page doit respecter le découpage ordonné suivant :
<header>/<nav>: Barre de navigation fixe ou collante (sticky-top) avec logo à gauche et liens à droite.<section id="home">: Section d'accroche (Hero) contenant le titre, le slogan et le bouton d'action.<section id="who">: Présentation du projet avec texte et image illustrative.<section id="get-involved">: Grille Bootstrap présentant les différentes manières de participer.<footer>: Pied de page contenant les mentions légales, copyright et liens réseaux sociaux.<button id="back-to-top">: Bouton flottant permettant de remonter au sommet de la page.
- Un clic sur le bouton « Learn more » de la section Home doit ouvrir une modale Bootstrap.
- La modale doit embarquer une vidéo YouTube en conservant un ratio d'affichage parfait grâce à la classe
.ratio .ratio-16x9.
La maquette doit s'adapter fluidement à toutes les résolutions :
- Mobile (< 768px) : La navbar se replie dans un menu hamburger (
navbar-toggler), les colonnes de la section#get-involveds'empilent verticalement sur 1 colonne. - Tablette (≥ 768px et < 992px) : Répartition sur 2 colonnes.
- Desktop (≥ 992px) : Menu déplié à plat, répartition sur 3 ou 4 colonnes selon la maquette.
- Règle d'or : Ne JAMAIS modifier les fichiers sources de Bootstrap.
- Utilisez des variables CSS et surchargez les classes Bootstrap ciblées pour respecter la typographie, les couleurs et les espacements de la maquette.
- Smooth Scroll natif : Défilement doux lors du clic sur les ancres du menu et le bouton Back to top.
- Back-to-top dynamique : Le bouton n'apparaît que lorsque l'utilisateur a scrollé de plus de 300px vers le bas.
- Support Dark Mode : Prise en charge du thème sombre avec
data-bs-theme="dark".