Reservia - Intégration de maquette

Description générale du projet

Reservia est une petite entreprise proposant un outil de planification de vacances. Leur site permet aux usagers de trouver des hébergements et des activités dans la ville de leur choix. Les hébergements peuvent également être filtrés par thématique, par exemple leur budget ou leur ambiance.

Un nouveau design basé sur les principes du Material Design vient d’être proposé par Loïc, designer UI.

Avant de valider définitivement ce design, l’entreprise décide de réaliser un prototype. La première étape consiste à intégrer la maquette responsive en HTML et CSS.

Instructions

Fonctionnalités

• Le champ de recherche est un champ de saisie. A ce stade, le bouton de recherche ne sera pas fonctionnel.
• Chaque carte d’hébergement ou d’activité devra être cliquable dans son intégralité. Pour l’instant les liens seront vides.
• Les filtres ne seront pas fonctionnels pour cette version, en revanche, il faut qu’ils changent 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.

Contraintes

• Maquettes desktop et mobile fournies. Le site devra également être adapté aux tablettes : mise en page à définir). Libre choix des breakpoints appropriés.
• Choisir le format d'image le plus adapté par rapport à la résolution et au temps de chargement.
• Les icônes proviennent de la bibliothèque Font Awesome. Les couleurs de la charte sont le bleu #0065FC, et sa version plus claire #DEEBFF ainsi que le gris pour le fond #F2F2F2.
• La police du site est Raleway.

Environnement de développement

• Pas de framework ou pré-compilateur CSS
• Utiliser les balises sémantiques et aucune erreur ni alerte au validateur W3C HTML et CSS
• Le site devra être compatible avec les dernières versions de Chrome et Firefox
• Séparer le HTML et le CSS et organiser dossier de rendu
• Versionner son code avec Git. GitKraken utilisé en interne. Déployer la page sur GitHub Pages ou GitLab Pages
• Editeur recommandé : Visual Studio Code (+ plugins : Live Server, Prettier)
• Icônes Font Awesome en HTML ou CSS.
• Fortement conseillé d’utiliser Flexbox (mais possible d'utiliser CSS Grid)

Outils et technos utilisés

Outils

• Github
• Github Pages
• GitKraken
• Visual Studio Code + plugins LiveServer
• Font Awsome
• Photoshop
• Validateur W3C pour HTML et CSS

Technos

HTML, CSS