Scribd
Importer
28 vues2 pages

Informations Projet Home Key

Le projet Home Key nécessite une mise en page responsive avec des spécifications techniques précises, incluant l'utilisation de flexbox et des balises sémantiques. Les couleurs, polices et icônes doivent être conformes aux directives fournies dans la maquette Figma. Des restrictions strictes interdisent l'utilisation de frameworks CSS et d'autres langages de programmation.

Transféré par

b.tangour.nsi20
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
28 vues2 pages

Informations Projet Home Key

Le projet Home Key nécessite une mise en page responsive avec des spécifications techniques précises, incluant l'utilisation de flexbox et des balises sémantiques. Les couleurs, polices et icônes doivent être conformes aux directives fournies dans la maquette Figma. Des restrictions strictes interdisent l'utilisation de frameworks CSS et d'autres langages de programmation.

Transféré par

b.tangour.nsi20
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Informations sur le projet Home Key

Vous trouverez ci-dessous l’ensemble des éléments nécessaires à la réalisation du projet Home Key.

Tout d’abord, voici le lien figma :


[Link]
id=0%3A1&mode=design&t=m4WQLHYOAiPm9Ztr-1

Spécifications techniques et fonctionnelles


Fonction Description
Largeur du - Largeur maximum du contenu : 1440px au-delà de 1440px la marge
contenu doit être redistribuée automatiquement à gauche et à droite.
- Largeur tablette : 768px – 1024px
- Largeur mobile : 320px – 767px
Icônes Les icônes proviennent du site font Awesome
Couleurs : --black:#000;
--red:#f60303;
--white:#fff;
--grey:#c1c1c1;
--lightgrey:#f1f1f1;

Toutes les couleurs son consultable sur la maquette figma


Police La police utilisée sur tous le site est une font google : Open Sans.
Les tailles et graisses de fonts sont à récupérer sur figma.
Mise en page Pour la mise en page de ce projet, uniquement les flexbox devront être
utilisés.

Voici une documentation pertinente : [Link]


guide-to-flexbox/

L’utilisation de grid n’est pas autorisée.


Balises Pour ce projet il est essentiel d’utiliser les balises sémantiques :
sémantiques - Header
- Nav
- Titrages adéquats
- Main
- Section
- Article
- footer
Validité du code Le code doit impérativement être validé par le validateur W3C
Fonction La fonction recherche n’est pour l’heure pas fonctionnelle cependant, il
recherche faudra tout de même préparer le code de manière pertinente en utilisant les
balises adéquates pour un formulaire.
Liens du menu Les liens du menu sont des ancres devant mener aux différentes parties du
site.
- Accomodations devra mener sur la section « Accomodation in
Madrid »
- Activities devra mener sur la section « Discover all activities around
here »
Cards Chaque carte devra être cliquable dans son intégralité.
accomodation et Pour l’instant les liens sont vides, il faudra donc utiliser un « # » dans l’attribut
activities href.
Filtres de Les filtres ne sont pas fonctionnels. Il s’agit pour l’instant de simple éléments
recherche visuels.
Hover et Des vidéos du projet vous sont également fournis. Ces vidéos comprennent
animations les attentes du projet en termes d’animation et de changement d’état des
éléments au survol.
Restrictions Aucun framework CSS (type BootStrap) ou préprocesseur CSS (type Sass ou
Less) ne doit être utilisé.
Aucun autre langage ne doit être utilisé (exemple JavaScript ou PHP)

Vous aimerez peut-être aussi