Partiel 2016

Partie_1.md

Recréer la page suivante - 5 points

Contraintes HTML

N'utiliser que les éléments suivants et dans les quantités indiquées!

• un header
• deux sections
• trois articles
• un footer
• un h1
• trois h2
• quatre p
• deux div

Je n'ai utilisé aucune classe CSS, seulement 3 id.

Contraintes CSS

• utiliser flexbox pour gérer la mise en page (un indice, j'ai utilisé 6 fois display: flex)
• tout est englobé dans une div avec width: 100vw; et height: 100vh;
• la police utilisée s'appelle VT323
• h1 avec une font-size de 64px
• h2 avec une font-size de 48px
• p avec une font-size de 32px
• l'animation du Nyan Cat est faite à partir de l'image jointe (un indice ici: http://codepen.io/xseignard/pen/QGqNjQ)
• il y a une margin-top de 50px sur la seconde section
• il y a un padding de 8px pour les articles
• j'ai utilisé à plusieurs reprises la technique flexbox de centrage
• le bleu de fond du Nyan Cat est #003468
• l'image du Nyan Cat est la suivante: http://i.imgur.com/WrfRJ.png

Partie_2.md

A faire sous codepen! - 2 points

Que manque-t-il?

http://codepen.io/xseignard/pen/mOjNVy

Quelle ligne CSS (une seule!!), et sur quelle classe/id la rajouter afin de centrer l'iris blanc sur l'oeil rouge? Ne pas modifier le CSS existant

Créer un carré avec un rond à chaque coin

Ne tenter cette question que si vous avez fini le reste!!

Un carré rouge de 200px par 200pxet positionner un rond bleu de 30px dans chaque coin. Si je déplace le carré rouge, les ronds doivent se déplacer avec lui et rester dans les coins.

Me fournir un lien codepen!