//*** FRANCAIS ***//


Booki 

Vous avez trouvé votre premier stage en tant que développeur web chez Booki, une petite entreprise proposant un outil de planification de vacances ! Son 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 réalisé par Loïc, designer UI.

Objectifs :
    • Implémenter une interface responsive
    • Intégrer du contenu conformément à une maquette

Spécifications techniques
    • Le développement doit se faire en HTML et CSS, sans JavaScript ni framework.
    • La page doit être responsive sur mobile, tablette et desktop (desktop-first).
    • La page doit passer la validation W3C
    • La page doit être compatible avec les dernières versions de Chrome et Firefox.


Éléments fournis par l'entreprise virtuelle.

La maquette pour les résolutions ordinateur et téléphone nous est donné.
Toutes les images présentes sur le site sont aussi livrés en format sm, md, l & xl.
Les icones proviennent de Font Awesome
Les couleurs sont : bleu #0065FC - bleu clair #DEEBFF - gris #F2F2F2
La police est "Raleway"
Cahier des charges

L'integration doit se faire en HTML5 & CSS3, sans framework (bootstrap par exemple)
Le champ de recherche doit être un champ de saisie, dont le texte peut être édité. La fonctionnalité de recherche ne doit pas être implémenté pour autant.
Chaque carte d’hébergement ou d’activité devra être cliquable dans son intégralité. Pour l’instant les liens seront vides.
Les filtres, bien que non fonctionnels, doivent changer de style au survol.
Dans le menu, les liens “Hébergements” et “Activités” sont des ancres qui doivent mener aux sections de la page.
Même si aucune maquette pour la résolution tablette n'est fournis, l'intégration doit la prendre en charge.
Les images doivent être de taille adéquate afin qu'elle soit le plus jolie possible en impactant le moins possible le temps de chargement de la page.
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 HTML et le CSS doivent être séparés et le dossier doit être organisé
Le code doit être versionné avec git et doit avoir un repo distant sur Github ou Gitlab
Notes sur la réalisation du projet

L'integration est faite sur l'éditeur Visual Studio Code avec les plugins Live server, Live Sass Compiler & Git Graph. Le thème, l'UI et les raccourcis clavier sont personnalisés.
Sass est utilisé pour organiser le css. Vous trouverez le fichier sass est dans le repository (/style)



//*** ENGLISH ***//


Booki

You found your first internship as a web developer at Booki, a small company offering a vacation planning tool! Its site allows users to find accommodation and activities in the city of their choice. The accommodations can also be filtered by theme, for example their budget or their atmosphere. A new design based on the principles of Material Design has just been created by Loïc, UI designer.

Goals :
    • Implement a responsive interface
    • Integrate content according to a model

Technical specifications
    • The development must be done in HTML and CSS, without JavaScript or framework.
    • The page must be responsive on mobile, tablet and desktop (desktop-first).
    • The page must pass W3C validation
    • The page must be compatible with the latest versions of Chrome and Firefox.


Elements provided by the virtual company.

The model for computer and telephone resolutions is given to us.
All images on the site are also delivered in sm, md, l & xl format.
Icons are from Font Awesome
The colors are: blue #0065FC - light blue #DEEBFF - gray #F2F2F2
The font is "Raleway"
Specifications

The integration must be done in HTML5 & CSS3, without framework (bootstrap for example)
The search field must be an input field, whose text can be edited. The search functionality does not have to be implemented.
Each accommodation or activity card must be clickable in its entirety. For now the links will be empty.
Filters, although not functional, should change style on hover.
In the menu, the “Accommodations” and “Activities” links are anchors that should lead to the sections of the page.
Even if no mockup for tablet resolution is provided, the integration must support it.
The images must be of adequate size so that they are the prettiest possible with the least possible impact on the loading time of the page.
The code must use semantic tags and must not contain any errors or alerts to the W3C HTML and CSS validator.
The site must be compatible with the latest versions of Chrome and Firefox.
HTML and CSS should be separated and the folder should be organized
Code must be versioned with git and must have a remote repo on Github or Gitlab
Notes on the realization of the project

The integration is done on the Visual Studio Code editor with Live server, Live Sass Compiler & Git Graph plugins. The theme, UI and keyboard shortcuts are customized.
Sass is used to organize the css. You will find the sass file is in the repository (/style)