Exercice WebDev : Création d'1 site fictif d'1 franchise de restaurant - Responsive - HTML - BOOTSTRAP - CSS - JS
Réalisé par Audrey Kremers.
De quoi il s'agit ?
Le site est un site vitrine d'une franchise de restaurants. La franchise est fictive mais le type de nourriture (burger, pizza, asiatique,...) est laissé au choix de l’apprenant.
Le site doit être responsive : au moins pour les petits écrans (xs) et les écrans moyens (md).
Minimum 5 pages accessibles par une barre de navigation (navbar) présente sur toutes les pages vers les différentes rubriques : Accueil, Carte, Photos, Restaurants, Contact. Si vous souhaitez faire un site plus complet avec encore plus de trucs, faites-vous plaisir ! (mais seulement une fois que vous avez rempli le cahier des charges du client).
Les consignes :
- Un fichier CSS pour tout le site (en plus de celui de Bootstrap, bien sûr. Contraintes : vous utiliserez le CDN.)
- Liens relatifs aux autres pages (pas de liens absolus)
- Fichiers rangés dans des dossiers (assets, puis css, js et img dedans)
- Utilisation de Font Awesome
- Le site doit être intégralement responsive.
- GitHub : le lien de la page GitHubPage se trouve à côté de la description (donc il faut une description au repo) ET on veut un readme
- N'oubliez pas le favicon
- Utilisez des images libre de droits (vous pouvez en trouver sur pexels, pixabay, unsplash,...)
- Lighthouse : 80% sur toutes les catégories (pour les PWA, il y a un nouveau repo avec les instructions)
Composition du web site :
- Une page Accueil avec un composant Jumbotron avec le logo ou le nom du restaurant qui s'anime comme dans votre précédent projet MainEventer.
- Une page Carte avec les menus présentés sous forme de liste groupée avec badges
- Une page Photos avec une galerie photos (minimum 10). On veut 4 photos sur chaque ligne en format Desktop, 2 en format Tablet et 1 en format smartphone.
- Une page Restaurants avec l'adresse, un plan d'accès et les heures d'ouverture d’au moins trois restaurants (c’est une franchise !)
- Une page Contact avec un formulaire de contact comprenant nom, prénom, e-mail, liste déroulante (objet du message avec un select et des options)), un champs de texte (pour le message), un bouton d'envoi avec glyphicon. - - Utilisez des labels pour lier les descriptions d'input avec leur input.
Exigeance du client :
- Le client souhaite qu'à l'ouverture de la page d'accueil, il y ait un pop-up qui récupère le prénom du visiteur, puis affiche un "bonjour {nom du visiteur} !" avant le texte de présentation du restaurant.
- Le client souhaite que dans la partie Restaurants, en plus de l'affichage des horaires et des jours d'ouverture, il y ait une mention interactive "Nous sommes le { date et heure }, le restaurant est donc { ouvert / fermé }" en fonction de l'heure et la date de consultation du site.
Un remerciement tout particulier pour son aide en javascript à Antoine Diambu.
Thanks and credits for pictures :
- clifford-yeo-452260-unsplash.jpg - Photo by Clifford Yeo on Unsplash
- maid-milinkic-628112-unsplash.jpg - Photo by Maid Milinkic on Unsplash
- becca-tapert-391603-unsplash.jpg - Photo by Becca Tapert on Unsplash
- ella-olsson-784084-unsplash.jpg - Photo by Ella Olsson on Unsplash
- milada-vigerova-348433-unsplash.jpg - Photo by Milada Vigerova on Unsplash
- jannis-brandt-256862-unsplash.jpg - Photo by Jannis Brandt on Unsplash
- matt-hoffman-261853-unsplash.jpg - Photo by Matt Hoffman on Unsplash
- stanislav-kondratiev-671847-unsplash.jpg - Photo by Stanislav Kondratiev on Unsplash
- rawpixel-532413-unsplash.jpg - Photo by rawpixel on Unsplash
- toa-heftiba-409692-unsplash.jgp - Photo by Toa Heftiba on Unsplash
- food-photographer-jennifer-pallian-321038-unsplash.jpg - Photo by Food Photographer | Jennifer Pallian on Unsplash
- camila-melim-1181195-unsplash.jpg - Photo by Camila Melim on Unsplash
Thanks and credit for animations CSS :
animation bounce-in-top
Generated by Animista on 2019-2-20 10:7:6
w: Animista, t: @cssanimista
Thanks and credit for fonts :
-
Pinyon Script : Copyright (c) 2011 by Sorkin Type Co sorkintype,
with Reserved Font Name "Pinyon Script". -
JosefinSans : Copyright (c) 2010, Santiago Orozco (hi@typemade.mx)