Pour cet exercice, vous devez styliser un article concernant l’humoriste et ancien étudiant du collège Montmorency Adib Alkhalidey.

Aperçu du résultat 👇

Matériel

Couleurs 🎨

Noir délavé #1a1a1a
Blanc #fff

Médias 🖼️

Héros
https://ex.smnarnold.com/vw-et-vh/adib/heros.jpeg

En web, un héros est une zone contenue prenant toute la largeur d'une page et une partie importante de la hauteur de celle-ci. Il est généralement utilisé en début de page afin de définir l'ambiance désirée. Il se caractérise par une vidéo ou une image d'arrière-plan et la superposition d'un texte par-dessus celle-ci.

Par exemple, voyez la page d'accueil d'Adidas.

Requis

  1. Faites en sorte que l'élément héros ait un fond noir ⚫️ et un texte de couleur blanc ⚪️. Il devra prendre toute la largeur de la page, ainsi que la moitié de la hauteur de la fenêtre.

  2. Attribuez ensuite au héros l'image d'arrière-plan fournie. Assurez-vous que celle-ci couvre l'ensemble du héros et que le visage d'Adib reste bien visible, peu importe la résolution de la fenêtre.

  3. L'article doit être centré horizontalement ↔️, avoir une largeur correspondant à 60% de celle de la fenêtre et avoir une marge intérieure de tous les côtés équivalente à 2% de la largeur de la fenêtre.

  4. Faites en sorte que la taille de base de tous les textes correspond à 2% de la largeur de la fenêtre. Ainsi, le texte devrait se redimensionner proportionnellement avec la taille de ladite fenêtre.

    Bref, aucun mot ne devrait avoir à changer de ligne lorsque vous redimensionnez votre fenêtre, puisque ceux-ci se redimensionnent en fonction de la fenêtre en question.

  5. Une fois l'article de base terminé, créez maintenant un "blocker" par-dessus celui-ci, réduisant l'accès à l'article pour les lecteurs non connectés. Pour ce faire, faites en sorte que l'élément "blocker" prenne toute la dimension de la page et ait une couleur de fond noir semi-transparente ⚫️.

  6. À l'intérieur du "blocker", faites en sorte que le message ait un fond noir délavé ⚫️, un texte blanc ⚪️, une largeur équivalente à 40% de celle de la page et affichez-le dans le coin inférieur droit de l'écran ↘️.

  7. Finalement, empêcher la page de défiler en coupant tout ce qui dépasse de celle-ci.

🤫

Ça y est, vous savez maintenant comment plusieurs sites implémentent un “blocker” sur leurs articles!

Notes de cours 📚