Accueil
Maquette d'Exercice - Fiche RP
Créée par : Milou
Informations
Niveau estimé : Intermédiaire
Sujet mis à jour en mars 2023
Présentation
Coucou ! Voilà un petit schéma de fiche, j'espère qu'il pourra vous servir :) Les infos sont sur l'image, taguez-moi si il vous manque des données ^^ J'ai indiqué une hauteur maximale sur ma maquette, mais vous pouvez faire en sorte que le cadre s'allonge avec le texte, l'image d'en-tête le permet normalement ;)
La maquette
![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" FI8apJb](https://i.imgur.com/fI8apJb.png)
Détails
• Typographie titres : Kristi, couleur #EFCA76
• Typographie pseudo : Annie Use your Telescope, couleur #EFCA76
• Fond de dimensions 500*700px, couleur #6B6B7C
• Icones de dimensions 150*150px
• Image de fond, image des lanternes
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. Chaque notion est généralement accompagnée d'un lien pour en savoir plus.
- Bases du HTML : (Tutoriel Epicode sur les balises HTML / Documentation HTML francophone)
- Balises de titres (
<h1>,<h2>, etc.) ; - Blocs paragraphes
<p>ou génériques<div>; - images
<img>; - liens
<a>;
- Balises de titres (
- Bases de CSS : (Tutoriel Epicode sur les propriétés CSS / Référence CSS francophone)
- Couleurs de fond avec la propriété
background-color, image de fond avec la propriétébackground-image, voire la propriété raccourciebackground; - Couleurs de texte avec
color; - Marges externes
marginet internespadding; - Propriétés de mise en page du texte
font-family,font-size,font-weight,text-align, etc. ; - Dimensions des blocs avec
heightet (si besoin)width.
- Couleurs de fond avec la propriété
- La propriété CSS
overflowpour gérer les dépassements ; - Les barres de défilement sur les navigateurs Chromium ainsi que
scrollbar-coloretscrollbar-widthsur Mozilla. - Approfondir un peu sur la gestion d'une image de fond avec
background-positionetbackground-repeat; - La propriété
text-shadowpour l'ombre/contour du texte ; - Intéressez-vous potentiellement à la propriété CSS
object-fitet sa valeurcoverpour gérer la taille des images ; - Flexbox ou/et grid pour aligner les blocs côte à côte (alternatives pour s'entrainer :
float,position,inline-block, et, uniquement à but pédagogique, les tableaux HTML et la fusion des cellules d'un tableau) ; - Le positionnement en CSS, avec
position:relativeetposition:absolute;pour positionner l'image des lanternes dans le coin supérieur droit ; - Les pseudo-éléments
::beforeou::afterpeuvent être utilisés pour placer ces fameuses lanternes ; - Savoir utiliser
opacityet/ourgba()pour la transparence
Indications diverses
• Attention quand vous fixez des dimensions, pensez aux cas particuliers, un texte très long pour un titre par exemple.
• Pour pimenter votre exercice, entrainez vous à avoir une fiche qui s'allonge autant que nécessaire tout en conservant les lanternes en haut et la partie "with pseudo" et icones en bas à droite (ou autres variantes).
Merci d'informer le staff d'Epicode en cas de lien mort !
_______________
Hey ! C'est le premier exercice que je fais, mais j'ai essayé de faire au mieux :D
Je savais pas si le titre devait être de la taille du cadre du texte ou de la taille du fond, donc j'ai fait selon ce que je trouvais le plus pratique (flemmarde/20)
Pareil, vu que je suis une flemmarde, j'ai fait en sorte que le fond et le cadre du texte s'adapte selon la taille du texte.
Je mets le lien vers le code en hide, vu que les gens peuvent le modifier à leur guise dès qu'ils y ont accès, je préfère pas qu'ils cassent tout ^^'
(Et de toute façon, je viens de voir dans les règles de la section qu'il fallait faire comme ça 8D Comme c'est pratique !)
Voilà
Des bisous
Je savais pas si le titre devait être de la taille du cadre du texte ou de la taille du fond, donc j'ai fait selon ce que je trouvais le plus pratique (flemmarde/20)
Pareil, vu que je suis une flemmarde, j'ai fait en sorte que le fond et le cadre du texte s'adapte selon la taille du texte.
Je mets le lien vers le code en hide, vu que les gens peuvent le modifier à leur guise dès qu'ils y ont accès, je préfère pas qu'ils cassent tout ^^'
(Et de toute façon, je viens de voir dans les règles de la section qu'il fallait faire comme ça 8D Comme c'est pratique !)
Voilà
Des bisous _______________
Coucou @Emi ! ![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" 3775839356](/users/1416/13/16/78/smiles/3775839356.gif)
Alors, si le rendu est plutôt similaire, ton code gagnerait à être plus propre. Je vois que le positionnement te pose problème (ou que tu ne connais pas encore ces propriétés-là) car tu positionnes en margin, et ça cépabien. 8D En effet, les margins ne servent pas à positionner des blocks, mais, comme leur nom semble l'indiquer, à créer de petites marges entre les blocks afin de les espacer de quelques pixels, par exemple. Là, tu places tes blocks avec de très gros margins négatifs, ce qui n'est pas fait pour. ;)
Ensuite, je vois du CSS dans le HTML. Pourtant, tu as séparé la plupart du CSS, alors pourquoi ne pas l'avoir fait en entier ?
Même si ce n'est pas faux en soit, c'est pas propre (et donc pas lisible). Ce n'est pas grave si tu ne sais pas tout à fait cibler tes balises avec le CSS (c'est sans doute pour ça que tu as opté pour le mettre directement dans le HTML), mais tu verras qu'avec les sélecteurs, on peut cibler précisément les balises ! Je te donnerai le lien du tuto à la fin du post, mais vas-y à ton rythme, une chose à la fois, l'idée n'est pas de t'assommer de jargon mais de te donner quelques conseils. :3
Ensuite, ce morceau de code :
Tu n'as pas vraiment besoin de créer deux balises pour mettre en place ton texte. Tu peux le mettre dans une balise p, par exemple, qui est une balise block (comme les div) et donc fusionner le CSS de cadretexte et texte :
comme ceci :
Tu verras que le résultat est le même. <3
Je vois également que tu places très souvent la valeur inline-block dans tes blocks, or on l'utilise souvent pour mettre deux blocks côte à côte par exemple, ce qui n'est pas le cas ici... Essaye de retirer ces valeurs, tu verras que rien ne change. Si tu as du mal à savoir exactement à quoi ça sert et ce que ça fait, pas d'inquiétude, c'est expliqué dans les tutos que je vais te passer. c:
Enfin, voici quelques tutos qui vont t'être super utiles, je n'en doute pas, et qui vont te faciliter la vie à l'avenir 8D
Ce tutoriel te récapitule les balises et t'explique leurs fonctions. Cela va t'aider à avoir un html plus lisible en utilisant sémantiquement les balises ! Et tu verras qu'avec plus de sémantique, il est beaucoup plus simple de cibler les éléments dans le CSS (en effet, c'est plus facile de cibler une balise p bien utilisée qu'une énième div sans trop de signification sémantique).
Ce tutoriel sur le positionnement te permettra, tout d'abord, de connaître d'autres manières de positionner tes éléments. Tes images par exemple, auraient pu être placées en absolute (c'est une autre manière de sortir les éléments du flux, un peu comme le float, sauf que positionner en float cépa top, mais ça, le tuto te l'expliquera 8D)
Et pour finir (mais c'est facultatif à ton niveau, c'est vraiment à titre informatif, pour commencer à appréhender les sélecteurs, donc no stress si tu comprends pas !) Une bonne introduction aux sélecteurs afin de voir qu'il est possible de cibler un élément dans ton HTML sans forcément utiliser de class ou d'intégrer le style directement dans la balise. (;
En tout cas, c'est un très bon début ! Ne te décourage pas face à ce petit pavé, moi aussi, en débutant, je positionnais en margins, mon code était plein de div et de spans pas joulis et finalement, avec un peu de pratique, ça vient tout seul ! Bon, j'ai arrêté les cours sur le forum mais si tu as des questions, n'hésite pas à venir en MP
Alors, si le rendu est plutôt similaire, ton code gagnerait à être plus propre. Je vois que le positionnement te pose problème (ou que tu ne connais pas encore ces propriétés-là) car tu positionnes en margin, et ça cépabien. 8D En effet, les margins ne servent pas à positionner des blocks, mais, comme leur nom semble l'indiquer, à créer de petites marges entre les blocks afin de les espacer de quelques pixels, par exemple. Là, tu places tes blocks avec de très gros margins négatifs, ce qui n'est pas fait pour. ;)
Ensuite, je vois du CSS dans le HTML. Pourtant, tu as séparé la plupart du CSS, alors pourquoi ne pas l'avoir fait en entier ?
- Code:
<span style="font-size:60px; font-family: 'Kristi', cursive; color:#F7DC6F;padding:10px;text-shadow: 1px 1px 2px black;">Titre du RP</span>
Même si ce n'est pas faux en soit, c'est pas propre (et donc pas lisible). Ce n'est pas grave si tu ne sais pas tout à fait cibler tes balises avec le CSS (c'est sans doute pour ça que tu as opté pour le mettre directement dans le HTML), mais tu verras qu'avec les sélecteurs, on peut cibler précisément les balises ! Je te donnerai le lien du tuto à la fin du post, mais vas-y à ton rythme, une chose à la fois, l'idée n'est pas de t'assommer de jargon mais de te donner quelques conseils. :3
Ensuite, ce morceau de code :
- Code:
<div class="cadretexte"><div class="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt venenatis euismod.
</div></div>
Tu n'as pas vraiment besoin de créer deux balises pour mettre en place ton texte. Tu peux le mettre dans une balise p, par exemple, qui est une balise block (comme les div) et donc fusionner le CSS de cadretexte et texte :
- Code:
.cadretexte {
margin: -10px 10px 10px;
width:300px;
height:600px;
background-color : rgb(255, 255, 255,50%);
display:inline-block;
vertical-align:top;
}
.texte {
font-family:Times new roman;
font-size: 11px;
height:580px;
color:#ffffff;
padding:4px;
text-align:justify;
overflow:auto;
display:inline-block;
margin:5px;
comme ceci :
- Code:
.cadretexte {
margin: -10px 10px 10px;
width:300px;
height:600px;
background-color : rgb(255, 255, 255,50%);
vertical-align:top;
font-family:Times new roman;
font-size: 11px;
color:#ffffff;
padding:4px;
text-align:justify;
overflow:auto;
display:inline-block;
Tu verras que le résultat est le même. <3
Je vois également que tu places très souvent la valeur inline-block dans tes blocks, or on l'utilise souvent pour mettre deux blocks côte à côte par exemple, ce qui n'est pas le cas ici... Essaye de retirer ces valeurs, tu verras que rien ne change. Si tu as du mal à savoir exactement à quoi ça sert et ce que ça fait, pas d'inquiétude, c'est expliqué dans les tutos que je vais te passer. c:
Enfin, voici quelques tutos qui vont t'être super utiles, je n'en doute pas, et qui vont te faciliter la vie à l'avenir 8D
Ce tutoriel te récapitule les balises et t'explique leurs fonctions. Cela va t'aider à avoir un html plus lisible en utilisant sémantiquement les balises ! Et tu verras qu'avec plus de sémantique, il est beaucoup plus simple de cibler les éléments dans le CSS (en effet, c'est plus facile de cibler une balise p bien utilisée qu'une énième div sans trop de signification sémantique).
Ce tutoriel sur le positionnement te permettra, tout d'abord, de connaître d'autres manières de positionner tes éléments. Tes images par exemple, auraient pu être placées en absolute (c'est une autre manière de sortir les éléments du flux, un peu comme le float, sauf que positionner en float cépa top, mais ça, le tuto te l'expliquera 8D)
Et pour finir (mais c'est facultatif à ton niveau, c'est vraiment à titre informatif, pour commencer à appréhender les sélecteurs, donc no stress si tu comprends pas !) Une bonne introduction aux sélecteurs afin de voir qu'il est possible de cibler un élément dans ton HTML sans forcément utiliser de class ou d'intégrer le style directement dans la balise. (;
En tout cas, c'est un très bon début ! Ne te décourage pas face à ce petit pavé, moi aussi, en débutant, je positionnais en margins, mon code était plein de div et de spans pas joulis et finalement, avec un peu de pratique, ça vient tout seul ! Bon, j'ai arrêté les cours sur le forum mais si tu as des questions, n'hésite pas à venir en MP
_______________
Hello @Avalonne !
Je m'en viens te donner quelques petits conseils pour améliorer ton code après cette tentative tout à fait honorable ^^
Mes remarques relatives à ton précédent exercice s'appliquent ici également, notamment en ce qui concerne les largeurs (et hauteurs) et l'utilisation des balises de titre plutôt que des balises
Ce qui me chagrine dans cette tentative, c'est qu'il y a moins ce bel agencement des blocs que l'on voit dans la maquette. Ton bloc de texte est collé à droite, le bloc des avatars n'est pas centré dans la deuxième "colonne". Tu pouvais attribuer une marge interne (un
Il y a un vieux tutoriel sur flexbox sur Epicode (qui gagnerait à être mis à jour) mais si tu es à l'aise avec l'anglais, ma bible est cet article de CSS Tricks que je ressors dès que je sais plus où j'en suis. Les illustrations sont fabuleuses pour se faire une idée !
J'allais dire que y'avait trop de flexbox, mais en réalité c'était effectivement utile partout, même si tu n'as pas tout exploité idéalement :
- Sur toute la fiche, pour avoir les deux colonnes de contenu côte à côte (en gardant en mémoire que ce
- Sur la colonne de droite, pour s'assurer que le conteneur du texte prenne bien toute la hauteur sans avoir à calculer la hauteur parfaite
- Sur la colonne de gauche, pour ajuster son contenu verticalement à partir du bas et centrer le tout horizontalement
(pas besoin de marges pour éloigner du bord haut ! ON NE POSITIONNE PAS AVEC DES MARGES (╬▔皿▔)╯)
Concernant les lanternes, tu avais plusieurs façons de gérer leur affichage. Une façon "classique" est de rajouter dans la fiche un bloc contenant l'image des lanternes et de le positionner en absolu en haut à droite. Une autre façon (que j'aurais faite) aurait été d'utiliser le pseudo-élément
(désolée, lecteurs de passage, je mets en hide, vous en saurez plus sur cette solution après avoir posté vos essais XD)
Pour l'essentiel, sur le code complet de cette fiche, tu n'avais besoin de spécifier qu'une hauteur et deux largeurs pour avoir un code fonctionnel :) Pour la hauteur des blocs de texte, il vaut mieux jouer avec la propriété
Voilà voilà, je pense que j'ai dit l'essentiel, à toi de voir si tu veux essayer de faire mieux !
Je m'en viens te donner quelques petits conseils pour améliorer ton code après cette tentative tout à fait honorable ^^
Mes remarques relatives à ton précédent exercice s'appliquent ici également, notamment en ce qui concerne les largeurs (et hauteurs) et l'utilisation des balises de titre plutôt que des balises
<div>. Ce qui me chagrine dans cette tentative, c'est qu'il y a moins ce bel agencement des blocs que l'on voit dans la maquette. Ton bloc de texte est collé à droite, le bloc des avatars n'est pas centré dans la deuxième "colonne". Tu pouvais attribuer une marge interne (un
padding) à ton bloc conteneur principal, et pour les deux conteneurs enfants (les colonnes), vu qu'ils sont flexibles, attribuer à celui de droite la largeur de l'image des lanternes (et une marge côté gauche) et laisser à flexbox le soin d'ajuster la largeur du bloc de gauche avec un petit flex:1.Il y a un vieux tutoriel sur flexbox sur Epicode (qui gagnerait à être mis à jour) mais si tu es à l'aise avec l'anglais, ma bible est cet article de CSS Tricks que je ressors dès que je sais plus où j'en suis. Les illustrations sont fabuleuses pour se faire une idée !
J'allais dire que y'avait trop de flexbox, mais en réalité c'était effectivement utile partout, même si tu n'as pas tout exploité idéalement :
- Sur toute la fiche, pour avoir les deux colonnes de contenu côte à côte (en gardant en mémoire que ce
flex-direction:row; n'est pas utile)- Sur la colonne de droite, pour s'assurer que le conteneur du texte prenne bien toute la hauteur sans avoir à calculer la hauteur parfaite
- Sur la colonne de gauche, pour ajuster son contenu verticalement à partir du bas et centrer le tout horizontalement
(pas besoin de marges pour éloigner du bord haut ! ON NE POSITIONNE PAS AVEC DES MARGES (╬▔皿▔)╯)
Concernant les lanternes, tu avais plusieurs façons de gérer leur affichage. Une façon "classique" est de rajouter dans la fiche un bloc contenant l'image des lanternes et de le positionner en absolu en haut à droite. Une autre façon (que j'aurais faite) aurait été d'utiliser le pseudo-élément
::after sur ton conteneur principal, par exemple de cette façon : (désolée, lecteurs de passage, je mets en hide, vous en saurez plus sur cette solution après avoir posté vos essais XD)
Pour l'essentiel, sur le code complet de cette fiche, tu n'avais besoin de spécifier qu'une hauteur et deux largeurs pour avoir un code fonctionnel :) Pour la hauteur des blocs de texte, il vaut mieux jouer avec la propriété
line-height ! (en utilisant l'unité em pour avoir de bons résultats)Voilà voilà, je pense que j'ai dit l'essentiel, à toi de voir si tu veux essayer de faire mieux !
_______________
![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" 14n2](https://zupimages.net/up/21/30/14n2.png)
![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" Rwns](https://zupimages.net/up/21/30/rwns.png)
Merci à @Artemis pour ces magnifiques "petits quelque chose" <3
Illustration avatar ©YuumeiArt | Voir l'original
![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" 7WZJTfh](https://i.imgur.com/7WZJTfh.png)
J'aime très très fort tes maquettes et tes idées Milou ![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" 3972358593](/users/1416/13/16/78/smiles/3972358593.gif)
![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" 884671159](/users/1416/13/16/78/smiles/884671159.gif)
Voici mon résultat, je me suis un peu amusé avec les lanternes![[Intermédiaire] Exercice 10 - Fiche RP "Japanese Night" 885843852](/users/1416/13/16/78/smiles/885843852.png)
feat.
Le HTML :
Le CSS :
Voici mon résultat, je me suis un peu amusé avec les lanternes
Titre du RP
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
feat.
Prénom Nom
milou & void — epicode
Le HTML :
- Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Kristi&display=swap" rel="stylesheet"><div class="ficheRP3"><!--
--><h1>Titre du RP</h1><!--
--><div class="deco1RP3"><!--
--><img src="https://zupimages.net/up/23/10/qnnm.png"/><!--
--></div><div class="deco2RP3"><!--
--><img src="https://zupimages.net/up/23/10/a6fg.png"/><!--
--></div><!--
--><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p><!--
--><h2><b>feat.</b>
Prénom Nom</h2><!--
--><img src="https://zupimages.net/up/23/10/2w6x.png" class="ava1"/><!--
--><img src="https://zupimages.net/up/23/10/i0s5.png" class="ava2"/><!--
--><div class="credRP3">milou & void — <a href="https://www.epicode-entraide.com/t12951-facile-exercice-6-fiche-simple-reine#355973">epicode</a></div></div>
Le CSS :
- Code:
/*********************EXERCICE 10*********************/
.ficheRP3 {
position: relative;
width: 500px;
height: 700px;
margin: 0 auto;
background-color: #332e29;
background-image: url(https://zupimages.net/up/23/10/ru4j.png);
display: grid;
grid-template-columns: repeat(50, 10px);
grid-template-rows: repeat(70, 10px);
}
.ficheRP3 h1 {
grid-column: 1/51;
grid-row: 1/5;
margin: 0;
border: none;
font: 50px Kristi, cursive;
color: #fda943;
padding: 0 15px;
text-shadow: 2px 2px 0px #000;
}
.deco1RP3 {
position: absolute;
top: 0;
right: -75px;
}
.deco2RP3 {
position: absolute;
top: 0;
right: -75px;
opacity: 0;
transition: all 0.7s ease-out;
}
.deco2RP3:hover {
opacity: 1;
transition: all 0.7s ease-out;
}
.ficheRP3 p {
grid-column: 3/35;
grid-row: 7/69;
padding: 5px 10px;
margin: 0;
text-align: justify;
font: 13px roboto, sans-serif;
color: #000;
overflow: auto;
background-color: rgba(255, 255, 255, 0.5);
}
.ficheRP3 p::-webkit-scrollbar {
width: 1px;
}
.ficheRP3 p::-webkit-scrollbar-thumb {
background-color: #ffffff;
}
.ficheRP3 p::-webkit-scrollbar-track {
background: transparent;
}
.ficheRP3 img.ava1 {
width: 120px;
height: 150px;
grid-column: 37/49;
grid-row: 34/49;
}
.ficheRP3 img.ava2 {
width: 120px;
height: 150px;
grid-column: 37/49;
grid-row: 54/69;
}
.ficheRP3 h2 {
grid-column: 37/49;
grid-row: 49/54;
padding: 8px 0;
margin: 0;
border: none;
padding-left: 10px;
font: 18px 'Annie Use Your Telescope', cursive;
color: #fda943;
font-weight: bolder;
text-shadow: 1px 1px 0px #000;
line-height: 16px;
}
.ficheRP3 h2 b {
font: 10px roboto, sans-serif;
text-transform: uppercase;
text-shadow: 0 0 0;
font-weight: normal;
font-style: italic;
color: #fff;
}
.credRP3, .credRP3 a {
grid-column: 1/51;
grid-row: 69/71;
text-align: center;
font: 10px roboto, sans-serif;
line-height: 20px;
color: #ffffff;
text-decoration: none;
}
.credRP3 a:hover {
color: #fda943;
}
/*********************FIN EX 10*********************/
_______________
