Branches - Radars vivants

Mise en page de base

1. Faites un fork du répertoire GitHub afin de vous créez une copie.

2. Le titre doit être blanc, en Arial, avoir une taille de 70px et avoir une largeur maximale de 700px.

3. Le héros doit prendre toute la largeur de la page ainsi que la moitié de sa hauteur. Utilisez flexbox afin de centrer le titre dans celui-ci de façon horizontale et verticale. Afin d'être certain que le titre ne touche jamais les extrémités de la page, ajoutez une marge intérieure de 20px de tous les côtés du héros.

4. Ajoutez l'image de la fillette de face en arrière-plan. Assurez-vous que cette image couvre entièrement le héros et que la fillette soit bien centrée.

5. Effectuez un premier commit si ce n'est déjà fait. Attention de lui donner un titre et une description pertinente.

6. Le bloc de texte dans la description doit être en Arial, être noir cassé, avoir une taille de 16px et aussi avoir une largeur maximale de 700px afin d'être aligné avec le titre.

7. Utilisez flexbox afin de centrer le bloc de texte horizontalement ↔️ dans la description et ajoutez à nouveau une marge intérieure de 20px de tous les côtés afin que le texte de la description ne touche jamais les extrémités de la page.

8. Faites en sorte que la vidéo prenne toute la largeur de la page.

9. Commitez vos modifications.

Ajustements de Gillevain

Gillevain propose une liste d'ajustements à la mise en page afin de la rendre plus percutante.

1. L'agence intriguée vous demande donc de créer une nouvelle branche à partir de votre branche principale, de la nommer "Gillevain" et de tester ses propositions.

2. Remplacez Arial par la police Times.

3. Le texte blanc dans le héros et l'arrière-plan blanc dans la description devraient tous être jaunes pour faire un rappel des panneaux de circulation.

4. Commitez vos changements sur la branche "Gillevain".

Ajustements de David

Malheureusement, après avoir présenté la vision de Gillevain à la direction, sa proposition n'a pas été retenue, mais on vous demande d'en garder une copie à titre de référence. Ne prenant plus de chance, LG2 fait maintenant appel à son VP création design David Kessous.

1. À partir de la branche principale (celle ne contenant pas les modifications de Gillevain), créez-vous une nouvelle branche intitulée "David".

2. Avoir du texte par-dessus un visage et le fait que le radar ne soit pas visible dans le héros dérange David. Il propose donc d'utiliser l'image de la fillette de dos à la place.

3. La partie de la phrase "étaient vivant?" devrait se démarquer plus selon lui. Il vous demande donc d'ajouter une balise HTML sur cette partie du texte afin de pouvoir modifier son apparence et de la rendre transparente avec une bordure blanche de 1px.

4. Les éléments sont trop compacts, la mise en page ne respire pas assez. Pour y remédier, il suggère de remplacer toutes les marges intérieures de 20px à 50px et de doubler l'interlignage dans la description.

5. Commitez vos changements sur la branche intitulée "David".

Ça y est, tout la direction est satisfaite de la nouvelle mise en page et compte la présenter au client. Cependant, elle vous demande de garder les trois copies afin de pouvoir les présenter en cas de besoin.

Vous devriez maintenant être capable d'alterner entre les trois mises en page, simplement en changeant de branche.