Devoir 2 (formatif)¶
Remise le 26 septembre à 23:59.
Résultat attendu¶
Contenu du site Web¶
- Caramel beurre : https://assets.codepen.io/9367036/Beurre-290g_300x.png
- Caramel chocolat : https://assets.codepen.io/9367036/Chocolat-290g_300x.png
- Caramel chocolat fleur de sel : https://assets.codepen.io/9367036/Chocolat-Sel-290g_300x.png
- Caramel IG : https://assets.codepen.io/9367036/caramel.jpg
- Crèpe IG : https://assets.codepen.io/9367036/crepe.jpg
- Pancake IG : https://assets.codepen.io/9367036/pancake.jpg
Pour le contenu textuel, vous pouvez le copier/coller du « Site Web référence »
Instructions¶
- Créer un dossier "devoir_02"
- Créer un fichier
index.html - Dans
index.html, créer une structure HTML de base - Importez le CSS et le JavaScript de Bootstrap 5
- Importez le CSS et le JavaScript de Swiper
- Ajoutez le css suivant :
.swiper-slide { width: 100% !important; }à votre projet - Dans le
<body>, ajoutez une barre de navigation Bootstrap - Dans le
<body>, ajoutez une zone pour le titre centré avec un fond de couleur de type danger - Dans le
<body>, ajoutez 3 produits dans une grille Bootstrap - Pour chaque produit, le texte doit être centré
- Pour chaque produit, ajoutez un Swiper pour afficher 2 images en boucle
- Pour chaque bouton « Ajouter au panier » cliqué, une boite Modal Bootstrap apparait
- Dans le
<body>, ajoutez un pied de page foncé avec le texte centré