Pour cette partie du projet, vous allez créer la mise en page de base qui permettera de raconter votre histoire.

Aperçu du résultat 👇

Requis

  1. Choisissez une image ou une police agissant à titre de logo pour votre projet.

  2. Choisissez une police Google ou DaFont pour votre texte normal. Attention de choisir une police facilement lisible.

  3. Créez-vous une palette de 5 couleurs sur Coolors.co. Ces couleurs seront utilisées pour votre mise en page: Couleur de fond, couleur de texte, boutons, boutons survolés, etc.

  4. Créez une page HTML, ainsi qu'un fichier CSS pour réaliser votre projet.

  5. Dans cette page créez un élément qui contiendra l'ensemble de votre jeu. À titre de référence, appelons cet élément "game". Celui-ci doit mesurer entre 400 et 900px de large (à votre guise) et avoir une hauteur minimale de 100px. Centrer ensuite cet élément horizontalement ↔️ et verticalement ↕️ dans la page grâce à flexbox.

  6. Votre élément "game" doit à son tour être un flexbox afin d'afficher tous ses enfants directs un en dessous de l'autre:
    1. Votre logo,
    2. Le titre fictif d'un chapitre: "Sed ut perspiciatis".
    3. Du texte fictif: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam".
    4. Une image temporaire représentant votre histoire. Attention, celle-ci ne doit jamais dépasser la largeur de votre élément "game".
    5. Une barre d'options contenant 3 boutons: "ullamco laboris", "nisi ut aliquip", "ex ea commodo".

  7. La barre d'options doit aussi utiliser flexbox de sorte que chacun des boutons soit afficher le plus distancier possible les uns des autres.

Notes de cours 📚

Remise

  1. Renommez votre dossier de travail 📁 au format suivant:
    [prénom]-[nom de famille]
    ex: simon-arnold

  2. Compressez ensuite votre dossier de travail en fichier zip 🗜

  3. Envoyez-moi un message privé sur Teams contenant votre fichier zip.