Challenge Finalisation de la page d'accueil de findThePrecious.com
Sauron s'impatiente ! Le site n'est toujours pas terminé et la communauté de l'anneau se rapproche des portes noires marquant l'entrée du Mordor.
Ton graphiste vient tout juste de finir la maquette finale du site findThePrecious.com Tu vas maintenant devoir intégrer son travail au site que tu as déjà bien commencé. Fais vite! La maquette finale est disponible ici
Les polices utilisées sont à télécharger :
Police des titres
Symboles entourant les titres
Police des textes
Et voici les quelques consignes pour un travail réussi :
Utilise le système de grille de bootstrap
Utilise les composants de bootstrap (la plupart sont indiqués en marge sur la maquette)
Pour le carrousel, l'image et le texte pour la première slide te sont donnés, ajoutes-en deux autres (texte et image différents), sois imaginatif et rends hommage à ton maître !
Suis toutes les bonnes pratiques évoquées dans les quêtes précédentes.
Toutes les ressources dont tu auras besoin pour réaliser cette intégration (images, polices) sont récupérables dans ce zip. Certaines images seront peut-être à optimiser (rognage, poids à réduire...)
Tu hébergeras le code sur ton repository github. Pour poster le résultat, utilise le service pages de github et poste le lien vers ta version de findThePrecious.com !
Remarque: ce challenge est particulièrement long à réaliser dans son intégralité. Essaie de tout faire si tu en trouves le temps, sinon, limite toi aux parties navbar, slider et portraits qui devront coller à la maquette le plus fidèlement possible. Pour les autres parties, tu pourras les créer grossièrement, sans te soucier de respecter à la lettre la maquette.
Critéres de validation
Le code est propre et passe le validateur W3C.
Le code CSS est appelé dans des fichiers séparés et correctement organisé, en suivant les bonnes pratiques expliquées dans la quête dédiée.
Les portraits des aventuriers reprennent le comportement au survol de la souris que tu as mis en place dans la quête sur le CSS.
Le slider fonctionne avec 3 images et 3 textes différents.
Le site intègre le système de grille et les composants de bootstrap.
Les images sont redimensionnées et rognées si nécessaire.
Le résultat ressemble au plus près à la maquette graphique fournie (au moins pour les parties navbar, slider et portraits).
Le site est bien entendu responsive.
Bon courage !
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent