Informations

Niveau estimé : Intermédiaire
Sujet mis à jour en mars 2023

Présentation

C'est une très ancienne maquette qui n'a jamais été codée, aussi je n'ai malheureusement plus les images. Comme j'ai fait sur la maquette, prenez des images que vous avez en réserve qui vous plaisent ça marchera très bien.

La maquette

• La fiche fait 500*500px
• La police du titre, des liens, des pseudos et de join us est Oswald
• Le reste est calibri mais arial ou roboto passent aussi très bien

• Le bloc clair du contexte fait 440*160px
• Le bloc clair des informations fait 145*170px
• Les 2 blocs pour les membres VIP font 160*165px avec une bordure en #000000

• La barre noire à droite est en #000000
• La bordure du titre principal est aussi #000000
• Les blocs clairs sont en #ffffff opacité 0.6 ou 0.7
• Les liens sont en #000000 écrit en #ffffff
• Tout ce qui est rouge est #9f0a08

Effet(s):
Il n'y a, a priori, pas d'animations particulières, mais si vous êtes à l'aise avec tout ça, amusez vous ! Y'a moyen de faire des trucs sympas en vrai (changement de couleur du bouton rejoindre, effet de survol pour les membres VIP, transitions de couleur sur les liens...)

Compétences suggérées

(Rien ne vous oblige à utiliser toutes les suggestions si vous préférez vous concentrer sur un concept précis que vous ne maîtrisez pas encore)

Bases du HTML : titres <h1>, <h2>, etc., blocs paragraphes <p> ou génériques <div>, listes HTML <ul> et <li>, liens <a> et images <img>...
Bases du CSS : image de fond, couleurs de fond et de texte, marges, espacements internes, taille de texte...
Flexbox et/ou grid pour positionner des blocs (et groupes de blocs) côte à côte
La propriété CSS overflow pour gérer les dépassements
Le positionnement absolu et relatif pour placer le texte sur les images
Les bordures et contours en CSS, en particulier la propriété outline
Les effets de survol avec la pseudo-classe :hover et (par exemple) les propriétés CSS transition et opacity

A titre d’entraînement (uniquement !), vous pouvez également tenter d'obtenir un rendu avec les anciennes méthodes :
les tableaux HTML
La fusion des cellules d'un tableau

Pensez aux cas de figure particuliers : que faire en cas de pseudonyme très long ?