Intégrer la maquette responsive en HTML et CSS de Reservia, un site de planification de vacances. Les usagers pourront trouver des hébergements et des activités dans la ville de leur choix.
- 2 maquettes sont fournies : desktop et mobile
- Le site devra également être adapté aux tablettes
- Toutes les images sont fournies en différents formats
- Les icônes proviennent de la bibliothèque Font Awesome
- Les couleurs de la charte sont : le bleu #0065FC, sa version plus claire #DEEBFF et le gris #F2F2F2 pour le fond
- La police du site est Raleway
- L'intégration doit se faire seulement en HTLM et CSS, sans utiliser de framework ou de pré-compilateur CSS
- Le code devra utiliser les balises sémantiques et ne doit contenir aucune erreur ni alerte au validateur W3C HTML et CSS
- Le site devra être compatible avec les dernières versions de Chrome et Firefox
- Le champ de recherche est donc un champ de saisie, dont le texte peut être édité par l’usager
- Le bouton de recherche ne sera pas fonctionnel
- Chaque carte d’hébergement ou d’activité devra être cliquable dans son intégralité mais pour l’instant les liens seront vides
- Les filtres ne seront pas fonctionnels pour cette version ils doivent changer d’apparence au survol
- Dans le menu, les liens “Hébergements” et “Activités” sont des ancres qui doivent mener aux sections de la page
- Sur la version tablette, on est libre de faire les adaptations nécessaires avec la mise en page (tant qu’aucun élément n’est coupé et que le texte a une taille suffisante)
- Pour les images, choisir le format le plus adapté par rapport à la résolution et au temps de chargement
- Visual Studio Code est recommandé avec plusieurs plugins qui pourront simplifier la vie comme Live Server ou Prettier
- On peut intégrer les icônes Font Awesome en HTML ou CSS
- Flexbox est fortement conseillé mais on peut aussi utiliser CSS Grid
- Penser à séparer le HTML et le CSS et à organiser ton dossier de rendu
- Versionner le code avec Git
- déployer la page sur GitHub Pages ou GitLab Pages