Grid ou flexbox

Pour cet exercice, vous devez reproduire l'image de chaque numéro.

Numéro 1 - Un menu

Dans ce numéro vous devez reproduire un menu classique. Flexbox ou grid? À vous de voir.

capture du numéro 1

INDICATION

  • Logo

    • Grandeur: 44px
    • Bold
    • Italic

  • Item de menu

    • espace entre chacun 20px
    • couleur : blanc
    • couleur d'hover : #6aa84f

  • Bouton

    • marge à gauche: 50px;
    • Bordure 2px #6aa84f et solid
    • marge interne h/b 5px, d/g 20px
    • hover background blanc

Numéro 2 - Les cartes

Un module composante que nous utilisons régulièrement est celui des "cards"/cartes. Vous devez faire en sorte qu'il soit sur ligne de 3 colonnes.

capture du numéro 2

INDICATION

  • ❌ Vous n'avez pas le droit de mettre de width sur vos cartes.

  • HTML

    • Faire le html des cartes
    • Le contenu vous est fourni

  • Mise en page

    • 3 colonnes de la même hauteur
    • Espace entre chaque 30px

  • zone media

    • hauteur: 250px
    • l'image doit s'étirer de manière optimal (google : object-fit )

  • zone contenu

    • background blanc
    • marge interne h/b/d/g 20px
Image de plage

Oahu, Hawaii

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur expedita, saepe accusantium rem eum ab eveniet explicabo facere.

Voir plus
Image de plage

Oahu, Hawaii

Voir plus
Image de plage

Oahu, Hawaii

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae animi assumenda autem suscipit molestias obcaecati eius iure, veniam magni officiis laborum quam. Reiciendis, minus aliquam ea nam, omnis doloremque quas repudiandae, unde aut perspiciatis soluta.

Voir plus

Numéro 3 - Monstres

Flexbox ou grid? Mise en page encore une fois très générale et souvent utilisée. Vous devez faire en sorte d'avoir deux rangées de 4 colonnes

capture du numéro 3

INDICATION

  • ❌ Vous n'avez pas le droit de mettre de width sur vos colonnes.

  • HTML

    • Faire le html
    • Le contenu vous est fourni

  • Mise en page

    • 4 colonnes avec la même largeur et le contenu centré
    • Espace entre chaque 60px

  • Images

    • largeur: 40%
death

La mort

dracula

Dracula

jason

Jason

frank

Frankenstein

ghost

Fantôme

mummy

Momie

skull

Squelette

zombie

Zombie

Numéro 4 - Les sports - Gros défi

Mise en page de deux colonnes et deux rangés avec effet de survol (tp final CW II).

capture du numéro 4

INDICATION

  • ❌ Vous n'avez pas le droit de mettre de width sur vos colonnes.

  • HTML

    • Faire le html
    • Le contenu vous est fourni

  • Mise en page

    • 2 colonnes avec la même largeur

  • Images

    • l'image doit s'étirer de manière optimal (google : object-fit )

  • contenu

    • Pensez positionnement absolu
    • Pleine largeur et hauteur
    • background noir avec alpha 40%
    • Apparait seulement en hover
    • h2
      • couleur: blanc
      • grandeur: 90px
      • text-shadow: 0px 0px 10px #969696;

Volleyball

Sport d'équipe

Natation

Sport individuel

Kayak

Sport d'équipe ou individuel

Basketball

Sport d'équipe