TP 32/30 – HTML/CSS/JS - Livraison de Repas - Correction 02/05/20 à 14H15
Contexte
Croustishop est un restaurant basé à Cannes.
Il propose des petits plats à emporter (salades, pizzas, burger, boissons).
Suite à cette longue période de confinement réduisant la clientèle, le restaurant décide de vous
contacter pour réaliser un site sur lequel il sera possible de voir les differentes formules, boissons.
Préparatif
Télécharger le pack de ressources disponible au lien suivant : http://graven.yt/resto/images.zip
Vous n’avez pas le droit d’utiliser de framework.
Niveau 1. Base
• Ajouter le titre « Croustishop » sous la forme d’une balise h1 .
• Ajouter le slogan « Des petits plats tout en douceur » sous la forme
paragraphe.
• Ajouter un menu de navigation contenant 4 boutons Pizza, Salade,
Burger, Boisson.
• Créer un fichier « styles.css » dans un dossier « css »
• Mettre le fond de la page en bleu (code couleur #1695DA)
• Centrer le titre et le
• Mettre un carré blanc
• Changer la police d’écriture en « Kenia »
https://fonts.google.com/specimen/Kenia
Niveau 2. Slider
• Créer un slider d’images avec un temps d’animation de 15 secondes.
Vidéo d’aide : https://www.youtube.com/watch?v=ZsuTciVL8PU
Nom des images à faire défiler : 1.jpg, 2.jpg, 3.jpg, 4.jpg
Niveau 3. Menu
• Utiliser les flexbox pour ajuster les boutons sous la forme d’une ligne
• Ajouter une image derrière chaque bouton
o Pizza > pizza-banner.jpg
o Salade > salade-banner.jpg
o Burger > burger-banner.jpg
o Boisson > boisson-banner.jpg
• Mettre en blanc la couleur du texte de chaque bouton
• Faire une animation de scroll vers la bonne section lors d’un clique (no js)
Niveau 4. Sections
• Créer une section « pizza », contenant l’arrière plan « pizza-banner.jpg »
• Créer un premier produit contenant :
o Le titre « Caprapiquante »
o Une description « Chevre, Miel, Graines toastés, piment rouge »
o Un prix « 12€00 »
o L’image « pizza1.jpg »
• Créer un second produit contenant :
o Le titre « Strategia »
o Une description « Tomates, Mozarella, Basilique »
o Un prix « 9€00 »
o L’image « pizza2.jpg »
• Créer un troisieme produit contenant :
o Le titre « Naturale »
o Une description « Chèvre, courgettes, basilique, carottes, huile
végetale»
o Un prix « 10€00 »
o L’image « pizza3.jpg »
• Mettre en forme chaque produit pour avoir le résultat suivant :
• Reproduire la même chose pour les sections salade, burger et boissons
Niveau 5. Bonus
• Ajouter un pied de page contenant
o La mention Copyright sous la forme d’un paragraphe
o Une iframe affichant la position sur google maps de la structure
https://www.google.fr/maps/place/BeeCHteak+Restaurant+Cannes/@43.5486461,7.
0113637,17.75z/data=!4m8!1m2!2m1!1scannes+restaurant!3m4!1s0x0:0xb4b288ee
3a5fae4c!8m2!3d43.5490944!4d7.0114151
• Ajouter une modal/popup lors d’un clique sur un produit
• Ajouter un système de panier en PHP (no correction)
o https://www.grafikart.fr/tutoriels/panier-php-session-309
Correction 02/05/20 à 14H15
