Skip to content

Instantly share code, notes, and snippets.

@xseignard
Last active November 21, 2016 13:13
Show Gist options
  • Save xseignard/96283909ce7bc60abcbb0278a38d86c6 to your computer and use it in GitHub Desktop.
Save xseignard/96283909ce7bc60abcbb0278a38d86c6 to your computer and use it in GitHub Desktop.
ECV-EXAM-2

Créer un échiquier en utilisant flexbox.

HTML

N'utiliser que des divs. Chaque case de l'échiquier doit être une div. Vous pouvez grouper les cases par ligne, c'est à dire d'avoir 8 div représentant les lignes de l'échiquier et contenant chacune des div représentant chaque cases de la ligne.

Je retire 1 point par élément HTML qui n'est pas une div!!! Vous êtes prévenus!!

CSS

L'échiquier doit:

  • faire 500px par 500px
  • être centré verticalement et horizontalement sur la page (grace à flexbox).

Seules les propriétés CSS suivantes sont acceptées:

  • width
  • height
  • border
  • background-color
  • display
  • flex-direction
  • justify-content
  • align-items
  • flex

Je retire 1 point par propriété non listée ci-dessus!!! Vous êtes prévenus!!

La seule valeur de display acceptée est display: flex;.

Je retire 1 point par display autre que flex!!! Vous êtes prévenus!!

Bonus

1 point bonus pour ceux qui exploiteront les sélecteurs CSS afin de gérer les cases noires (pssst! allez voir ça: https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child)

Résultat attendu

Echiquier

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment