Page temporaire

Cette étape concerne l’agent de promotion de votre équipe. Vous devrez dans celle-ci créer une page temporaire plus élaborée permettant d’annoncer avec panache la refonte à venir du site de votre client.

Aperçu du résultat 👇

Requis globaux

  1. Créez-vous un fichier HTML et CSS afin de concevoir votre page temporaire.

  2. Choisissez une couleur de fond pour votre page et une fonte pour vos textes qui devront par défaut avoir une taille de 15px.

  3. Vous devez recréer la mise en page fournie à titre d'exemple ci-dessus 👆, mais avec les couleurs, polices, images et logo de votre client. Assurez de respecter la mise en page des blocs selon les résolutions mobile et ordinateur.

  4. Dans le 2e bloc, ajoutez une couleur de fond de votre choix et insérez le texte: "Refonte à venir le 10 décembre prochain". Ce texte doit-être en majuscules, avoir une taille de 30px, être gras et être centré horizontalement dans son bloc. Attention, de vous garder une marge intérieure de 15px de chaque côté du bloc.

  5. Dans le 3e bloc, ajoutez une image de fond en lien avec le client. Par-dessus, insérer le nom de votre équipe en majuscules, celui-ci doit avoir une taille de 30px, être gras et être centré horizontalement dans son bloc. En dessous, ajoutez le rôle de chaque membre de l'équipe suivi de son nom en gras. Attention, de vous garder une marge intérieure de 15px de chaque côté du bloc et de vous assurer que le texte reste lisible par-dessus l'image 🏙.

Requis mobile

  1. Affichez trois blocs au centre de votre page (verticalement et horizontalement). Ces blocs doivent être séparés verticalement ↕️ par un espace de 15px.

  2. Le 1er bloc doit avoir une largeur et une hauteur de 300px. Vous devez lui donner une couleur de fond de votre choix et y afficher le logo de votre client en plein centre.

  3. Le 2e bloc doit aussi avoir une largeur de 300px, mais sa hauteur doit dépendre de son contenu.

  4. Le 3e bloc doit aussi avoir une largeur de 300px, mais sa hauteur doit dépendre de son contenu.

Requis ordinateur

  1. À partir de 650px et plus, le 3e bloc doit affichez à la droite des 2 premiers et être parfaitement aligné avec eux verticalement ↕️. Un espace de 15px doit séparer horizontalement ↔️ ces deux colonnes. Attention de toujours bien garder vos éléments au centre de la page.

  2. Les 2er blocs doivent maintenant avoir une hauteur de 300px afin d'être parfaitement carrés.

Remise

La page doit être hébergée en ligne à la place de la page temporaire par défaut de votre hébergeur.