? ? ? ? ? ? ? ? ? ? Afficher / Masquer les points
Fermer cette fenêtre

Consignes globales

La police utilisée est Nunito (graisses 300 et 700), disponible sur Google Fonts.

La couleur principale du texte est #535353

La taille de base du texte est 1em

La maquette fait 1600px de large, mais l'intégration doit occuper toute la largeur d'un écran plus grand.

Veillez à bien retirer les marges appliquées par défaut par les navigateurs à la balise <body>

N'oubliez pas les métadonnées !

L'objectif est de s'approcher au maximum de cette maquette. Il est possible que les navigateurs n'affichent pas tous exactement la même chose. Je me baserai sur un rendu dans le navigateur Firefox dans sa dernière version (57).

Le rendu se fera AU PLUS TARD LE 14 JANVIER PROCHAIN par mail à l'adresse : romain.menard@univ-poitiers.fr

En cas de problème, une adresse de secours : romain.menard@ymail.com (pas gmail, ymail)

Haut de page

Fond

Le fond s'étend sur toute la largeur de l'écran (il ne s'arrête pas à 1600px, la largeur de la maquette).

Couleur du fond : #f6f6f6

Hauteur du fond : 200px

Image

L'image doit s'afficher sur 100px X 100px. L'effet arrondi doit être fait avec CSS (ne pas retoucher l'image) ! Tu peux changer l'image, mais elle ne doit pas être ronde à la base (je vérifierai !)

Le titre

Le titre est divisé en deux parties. A toi de juger de la meilleure manière à afficher ce titre.

Les tailles : 2em et 1em

Couleur : #535353

Les titres doivent s'afficher en capitales !

Titres en bleu

Le texte

Couleur : #94bad0

Taille du texte : 1.6em

La ligne sous le titre

Pas facile (de faire proprement en tout cas) ! Utilise une technique vue dans l'exercice du Château d'Angers

Largeur : 100px

Hauteur : 1px

Couleur : #d7d7d7

A propos de moi

L'image

L'image fournie est la bonne taille : 200px X 265px. Tu peux la remplacer par une autre de votre choix, mais veille à bien l'intégrer au texte.

Le texte

Le texte peut être inventé, copié d'ailleurs, peu importe.

Il doit être justifié.

Je te demande un passage en gras.

Expériences

Couleur de fond : #94bad0

Marge interne : 20px

Marge externe en bas : 5px

Taille du titre : 1.3em

Le petit texte sous le titre fait 1em et est en italique.

Au survol

Couleur de fond : #535353

Compétences

Partie la plus compliqué de cette maquette.

Chaque élément fait 150px de large et de haut.

Important : chaque élément est distant de 20 cm de l'autre.

Les éléments sont arrondis.

Couleur de fond : #f6f6f6

Un HTML bien pensé peut t'éviter de trop te tirer les cheveux ! Je ne t'en dis pas plus...

Passions / Hobbies

Cette partie est optionnelle, en bonus.

Affiche tes passions et hobbies tout en montrant ta technique.

Essaie d'imaginer la manière dont tu voudrais les afficher, et trouve le moyen de les intégrer.

Des points en plus sont à gagner, mais l'objectif est surtout de voir comment tu maîtrises le HTML et le CSS.

Fiche

L'intitulé "Fiche informative"

Il doit ressembler à un élément de menu.

Pourtant, si vous avez bien fait votre HTML, il s'agit d'un titre.

Mettez ce titre en forme de manière à ce qu'il ressemble à un élément de menu

Largeur : 300px

Hauteur : 50px

Couleur du fond : #f6f6f6

Taille du texte : 0.8em

La fiche

Il y a un type de balise HTML qui correspond bien à ce mode d'affichage. Un indice ? On en accroche sur les murs.

Le label (Prénom, Nom, etc.) est écrit en gras. Il existe plusieurs moyens, plus ou moins propres, pour y arriver.

Vous pouvez bien sûr renseigner de fausses informations !