La lichée¶
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 "la-lichee"
- Créer un fichier
index.html - Dans
index.html, créer une structure HTML de base - Avec npm, installez et importez les librairies :
- Bootstrap 5 (css et js)
- Swiper (css et js)
- 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 typedanger - Dans le
<body>, ajoutez 3 produits sous forme de carte dans une grille Bootstrap à 3 colonnes - 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é