Illustrations et media queries

Cet exercice est destiné à passer en revue quelques apprentissage (le positionnement et les bases html/css) et avancer sur d’autres : la conception d’un site de plusieurs pages, et les media queries.

Un site avec des illustrations open source

La base de cet exercice est la mise en avant d’un illustrateur et de quelques images. Quel que soit votre choix, les illustrations doivent être libre de droit, préférentiellement dans le domaine public. Ce point est non négociable. Ne pas le respecter sera compris comme de la fainéantise, ce qui n’est pas bien.
Le dépôt dans le domaine public de peintures, photos, illustrations, etc. a considérablement évolué ces dernières années, et une recherche de trois minutes suffit à trouver du matériel visuel par gigas entier. Trouvez donc des images en définition correcte, qui appartiennent au même auteur, ou au pire à la même mouvance, car vous allez devoir rassembler un peu d’informations consistante dessus. Là aussi, wikipedia est votre ami.

Trois pages en trois tailles d’écran

Sur cette base, vous allez devoir créer un site en trois pages.
Toutes les pages comporteront le titre du site, une navigation renvoyant aux deux autres pages, et une icone wikiedia avec un lien sur un contenu lié.
Toutes comporteront aussi un footer contenant votre nom et des mentions de copyleft.

La page d’entrée devra comportera une image en pleine largeur et un texte d’introduction court et un peu séducteur. Une forme de baseline : qui est-ce, qu’est ce qui est important de savoir, pourquoi c’est bien.

La deuxième page est une page de contenu texte plus long, dans lequel sera inséré deux photos au moins de la même largeur que le texte. Ça peut être un portrait de l’auteur, une vue générale d’exposition, le lieu où il/elle a vécu, etc. En tous les cas autre chose que les oeuvres d’art elles-mêmes.

La troisième page est une galerie comportant 12 images.

Medias queries

Le site doit s’adapter à des écrans de différentes tailles grâce aux medias queries, suivant le wireframes fournis pour ces différentes tailles
1) plus petit que 578 px,
2) de 578px à 1024px
3) de 1024 px 1200px
4) tout ce qui est plus grand (ce cas n’est pas décrit dans les wireframes)

/* de 0 à 576px, c'est le comportement par défaut */
/* A partir de 576px
@media (min-width: 576px) {  }

/* A partir de 992px  */
@media (min-width: 992px) {  }

/* à partir de 1200px */
@media (min-width: 1200px) {  }

Page d’entrée

Page de texte

(le footer est présent en bas de chaque page)

Page de galerie

(le footer est présent en bas de chaque page)

Détails supplémentaires

Le site doit utiliser deux typographies, dont une au moins en woff. La police par défaut, le times, est interdite.
Les couleurs, famille de typos, taille de typo et espacements de grille seront stockés dans des variables CSS.

Remise

Le site devrait être bouclé en 4 séances.