Accueil
Maquette d'Exercice - Fiche de RP
Créée par : Clyde (Aed)
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
![[Facile] Exercice 13 - Fiche de RP | Aed FpoVO30](https://i.imgur.com/fpoVO30.png)
Avec effet de survol
![[Facile] Exercice 13 - Fiche de RP | Aed XWXvSEe](https://i.imgur.com/XWXvSEe.png)
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 opacityMerci d'informer le staff d'Epicode en cas de lien mort !
_______________
Bonjouuur ![[Facile] Exercice 13 - Fiche de RP | Aed 1066248963](/users/1416/13/16/78/smiles/1066248963.gif)
J'inaugure
Merci beaucoup pour cette maquette super jolie![[Facile] Exercice 13 - Fiche de RP | Aed 3488708190](/users/1416/13/16/78/smiles/3488708190.gif)
J'ai adoré tenter de la coder ! J'ai testé les deux versions, ça m'a permis de m'initier au hover c'est cool **
Les voici sur codepen, avec une scrollbar qui apparaît en bas si le texte est trop long) :
Et ici (sans scrollbar, la fiche se redimensionne toute seule en fonction du contenu) :
J'inaugure
Merci beaucoup pour cette maquette super jolie
J'ai adoré tenter de la coder ! J'ai testé les deux versions, ça m'a permis de m'initier au hover c'est cool **Les voici sur codepen, avec une scrollbar qui apparaît en bas si le texte est trop long) :
Et ici (sans scrollbar, la fiche se redimensionne toute seule en fonction du contenu) :
_______________
|
|
|