Parcours : DISCOVERY 101

Module : HTML & CSS

Projet Fil Rouge - BATMAN1

Tous vos travaux devront être déposés sur votre

compte Github
Table des matières
I - Introduction

II - Objectif

III - Énoncé

IV - Ressources utiles

V - Animations et Fonctionnalités
I - Introduction
Repository Name : SAYNA-HTMLCSS-BATMAN1

La totalité de vos fichiers source, sauf tous les fichiers inutiles (binary, temp files, obj
fichiers,...), doivent être inclus dans votre livraison, dépôt Github.

Voici la première partie du projet fil rouge BATMAN, qui vous suivra tout au long de
votre apprentissage. Au fur et à mesure de votre avancée dans le programme, vous
développerez le contenu et les fonctionnalités du site. Ainsi, vous constaterez
directement votre progression ainsi que le développement de vos compétences.

Votre progression sera également rythmée par des webinar/vidéos afin de vous guider
et de vous partager des conseils pour atteindre les objectifs pédagogiques.
Vous pouvez par ailleurs vous appuyer sur la communauté SAYNA présente sur
Discord, en privilégiant les channels #Help lorsque vous avez des questions.

II - Objectif
Cette première partie du projet fil rouge BATMAN se concentre sur les compétences de
développement avec les langages HTML5, CSS3 et Sass. Ce sont des langages
élémentaires pour apprendre le développement informatique, notamment pour la
réalisation de sites Web.
III - Énoncé
Vous êtes un développeur / une développeuse freelance qui entame son premier
contrat avec son premier client. Votre objectif est de construire un site responsive,
version mobile et desktop, sur l’univers de BATMAN (univers cinématographique). Le
client vous a normalement transmis tous les documents dont vous aurez besoin pour
développer ce site.

Ensemble, vous définissez les attentes à travers un cahier des charges :

● À quoi le site va ressembler (maquettes, couleurs, polices) ;
● Quelles animations et fonctionnalités seront présentes ;
● Quelles sont les contenus à insérer sur le site (illustrations, textes, logos,
multimédia) ;
● L’importance d’un site responsive et dynamique

Votre mission sera de satisfaire les souhaits du client, en réalisant un site internet le
plus fidèle possible au cahier des charges.

Tous les détails sont présents à la suite de ce document.

Pour réaliser ce projet, vous avez initialement 5 jours.

Le rendu de l’évaluation se fera sur Github en respectant impérativement la

nomenclature suivante :

SAYNA-HTMLCSS-BATMAN1

⚠ Si la nomenclature n’est pas respectée, le projet ne sera pas pris en compte

lors de la correction et l’évaluation ⚠

⚠ Pensez à mettre votre dépôt en “Public”. Le projet ne sera pas corrigé si le

dépôt se trouve en “Privé” ⚠
Consignes pour le rendu du projet :

➢ Nommer votre projet en respectant la nomenclature

➢ Déposer votre projet sur Github dès le début et actualisez-le au fur et à mesure
de votre avancée
➢ Les notions de responsive ont été demandées, mais pas détaillées. Vous
prendrez donc les décisions de positionnement du contenu sur format mobile.
Faites preuve de bon sens et cherchez des inspirations sur le web.

Notes pour les apprenants :

● Lisez l’intégralité de l’énoncé dès le début pour bien commencer.

● Prenez le temps de coder en commentant votre code dès qu’il est nécessaire.
Il faut que le correcteur puisse comprendre ce que vous avez fait !
● S’il vous manque certaines informations ou assets, prenez la liberté de prendre
des initiatives et d’y répondre au mieux tout en respectant les demandes initiales
du client (délais, fonctionnalités et aspects visuels).
● La maquette affiche énormément de détails sur le choix des couleurs, les
bordures, les espacements entre chaque élément et le design de chaque
composant. Faites en sorte de respecter le plus possible la fidélité de cette
maquette.
● Le prototype affiche quant à lui un aperçu des animations que vous devrez
réaliser. Lorsque vous cliquez sur le fond du site, toutes les interactions
apparaissent en surbrillance. Pratique pour voir rapidement les animations !

● Le plus important à retenir : Prenez du plaisir et surpassez-vous !

Montrez-nous de quoi vous êtes capables en nous proposant votre meilleure
version du site dédié à l’univers de BATMAN.
IV - Ressources utiles
● Maquettes
○ Batman_Home_Fil_Rouge.pdf
○ Menu_dé[Link]
⇾ Aperçu du menu déroulant présent dans le formulaire
○ Popup_Box.png
⇾ Aperçu de la Popup Box présente dans le formulaire

● Prototype
○ Animations progressives (Pitchdeck) via ce lien
○ Animations générales (Figma) via ce lien

● Assets : Illustrations
○ Home :
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ [Link]
■ Bathome_ba1.png
■ Bathome_ba2.png

● Assets : Logos
○ flèche_down_header.png
○ icon_DC.png
○ icon_facebook.png
○ icon_ig.png
○ icon_tw.png
○ icon_WB.png
○ icon_x.png
○ logo_bat_flè[Link]
 ○ logo_bat_flèche_2.png
○ logo_sayna_white.png
○ [Link]
○ logo_flèche_1.png
○ logo_flèche_2.png
○ icon_guillemets_1.png
○ icon_guillemets_2.png
○ icon_player.png

● Assets : Couleurs et Typo

○ Couleur&[Link]
○ Police BATMAN = Rajdhani (tous les détails sont présents dans le
document)

● Assets : Contenu textuel

○ Texte_Home.pdf

● Assets : Contenu multimédia

○ Bande-annonce de Batman Begins via ce lien
V - Animations et Fonctionnalités
Animations à réaliser en CSS :
● Dans le header, les rubriques du menu doivent être soulignées et en gras lorsque la
souris survole l’élément. Lorsqu’on se situe dans une rubrique, celle-ci garde cette mise
en forme (gras + souligné).

● Sur les boutons, ajouter un effet “hover” lorsque la souris survole l’élément : l’opacité
des couleurs du bouton (couleur du fond en dégradé) passe de 40% (initialement) à
100% (lorsque la souris se trouve sur le bouton).

● Les logos réseaux sociaux (présent dans le footer et sur le côté) ont un effet “hover” sur
les icônes lorsque la souris survole un élément : les lignes du logo passent en jaune
batman. Il en est de même pour les logos BATMAN (présent dans le header et sur le
côté).

● Initialement, les cartes des personnages affichent uniquement une illustration encadrée.
Au passage de la souris sur l’une d’entre elles, un zoom léger (10%) s’effectue.

● TOUS LES ÉLÉMENTS (titre, texte, illustrations) du site doivent apparaître avec un
“fade in” en démarrant de la gauche (mouvement de gauche à droite).

● Attention, des lignes discrètes sont présentes pour tracer les contours de la page, vous
devrez les faire apparaître avec le code couleur suivant : #BCBBBD.
Voici le détail des mesures pour faciliter leur intégration :
○ Espace sur la largeur : 102px de chaque côté
○ Espace au niveau du header : 132px de la bordure haute
Animations à réaliser en HTML :
● Les icônes Logos réseaux + Batman sur le côté de la page, doivent défiler en suivant le
scroll de la page. De plus, un clic sur l’icône Batman supérieur, renvoie tout en haut de
la page. L’icône inférieure renvoie en bas de la page, au niveau du formulaire.

Fonctionnalités à réaliser :
● Les boutons “Voir le héros” et “Les adversaires” doivent renvoyer respectivement vers
les sections “Batman au cinéma” et “Némésis”.

● La partie Multimédia de la page home affiche une fiche descriptive de film accompagnée
d’une bande-annonce (lien vers multimédia).

● Lorsque que l’utilisateur remplit le formulaire + clique sur la checkbox + clique le bouton
“Confirmer” = un Popup Box doit s’afficher pour signaler que l’opération a été effectuée.
Respecter le design de la maquette.
Attention, il y a deux particularités dans le remplissage formulaire :
○ Un menu déroulant pour choisir la fréquence à laquelle on souhaite recevoir la
newsletter : Par jour, Par semaine, Par mois
○ Sélection de la thématique de la newsletter que l’on souhaite recevoir avec des
boutons. Ces boutons disposent du même effet “hover” que tous les autres.

Vous pouvez également proposer des messages lorsque l’utilisateur ne réalise pas
correctement les étapes (saisie des informations manquantes, checkbox pas confirmée).