Informations

Niveau estimé : Facile
Sujet mis à jour en mars 2023

Présentation

Coucou !
Voici une fiche de RP (réutilisable pour d'autres choses d'ailleurs). Je vous donne deux versions, une avec hover une sans, faites celle que vous voulez ! (ou faites les deux)

La maquette

Sans effet de survol

Avec effet de survol

Détails

• Police : Montserrat (bold pour le titre, thin pour le texte).
• Image de fond. Vous pouvez modifier l'image de fond si vous voulez ! (ou la transformer en motif)

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 : balises de titres (<h1>, <h2>, etc.), blocs paragraphes <p> ou génériques <div>, pourquoi pas une utilisation pertinente de <blockquote> pour les dialogues...
Bases du CSS : image de fond, couleurs de fond et de texte, marges, espacements internes, taille de texte...
Flexbox est une piste intéressante pour positionner le contenu par rapport au fond (mais vous pouvez vous contenter de marges)
La propriété columns ou column-count pour l'affichage du texte sous forme de colonnes.
La propriété CSS overflow pour gérer les dépassements
Les bordures et contours en CSS
Les effets de survol avec la pseudo-classe :hover et (par exemple) les propriétés CSS transition et opacity