Hey, alors, voilà mon exercice. j'aimais bien la présentation et du coup, je me suis lancée. et puis, le code pourra garnir ma candidature ici  étant donné que je ne peux répondre au commande, dans l'immédiat et que mon ''portfolio'' est à sec

(la grosse différence visuellement est juste l'arrondi en jaune, sinon, la similitude est présente )
https://images2.imgbox.com/b4/7a/ZRf9zyZY_o.png

Bonjouuur :D Alors c’est pas mal °° Néanmoins j’ai des petites choses à redire sur le code, sinon ce serait pas drôle xD

Niveau visuel c’est bien, effectivement à part l’arrondi jaune tout est bien ressemblant :D (pour l’arrondi, tu aurais juste pu mettre une hauteur plus grande pour faire encore plus arrondi, mais ça c’est du détail)
Et sinon je sais pas si t’as zappé, ou si t’as juste décidé de faire sans, mais y a un très léger ombrage sur les titres (en blanc, un text-shadow très léger) enfin ça aussi c’est du détail xD Passons plutôt au code °^°

> La première chose que je remarque c’est la balise center. Cette balise est désormais obsolète, et peut être remplacée par un "margin: auto;" dans le CSS des éléments à centrer

> De même, en général il est mieux de ne pas utiliser la balise table, il y a pour cela d’autres façons de faire que tu peux trouver  ici (click), qui explique le fonctionnement du display en inline-block **

> Normalement, on utilise une balise pour chaque type d’élément : au lieu de ne mettre que des div, on peut mettre :

Code:

<p> </p> pour un paragraphe de texte
<h1></h1> à <h6></h6> pour des titres, du plus au moins important

Ce qui permet de nous y retrouver plus facilement : lorsqu’on voit une balise de paragraphe, on sait tout de suite qu’elle correspond à un texte sur le visuel °^° C’est question de conventions et tout ça /paf/

> Pour la bordure entre le physique et le mental, tu aurais pu faire un bloc englobant tout le physique (titre + texte) et lui mettre

Code:

border-right: 3px solid #e5b9a8;

plutôt que de la positionner avec des marges :sisi: C’est plus propre de mettre juste une bordure simple

> J’ai vu quelque part un style="" dans le HTML, en général il vaut mieux éviter et tout mettre dans des class et des id. D’ailleurs, les ID sont bien pratiques, tu peux faire un saut ici (click) pour en savoir plus :D

Voilà globalement c’est tout, ensuite tu pourras utiliser des sélecteurs pour mieux t’en sortir avec toutes ces classes (je te laisse aussi le lien (click) du tuto si jamais)

En tout cas j’espère que ça t’aura fait un bon entraînement, c’est pas mal déjà, y a 2-3 petits trucs à corriger pour le rendre + propre quoi :D

Hello /o

J'essaye de m'améliorer sur le placement, ça a été laborieux mais j'ai à peu près réussi :



Difficultés:
- L'alignement des petites informations sous le titre principal, je n'ai pas trouvé comment faire ;o; le margin auto n'a pas fonctionné
- L'enchaînement entre le dernier bloc des renseignements (année d'étude) avec le premier bloc "physique", j'ai mis un br en désespoir de cause mais comme ils ont tous un inline-block je ne trouvais pas comment faire autrement pour que le physique aille à la ligne tout en disant à son copain caractère de s'aligner à lui ;o;

Voilà, après je pense que le code est largement optimisable, si vous avez le temps je veux bien voir comment    (réduire le nombre de class ou de propriétés par exemple, parfois j'ai l'impression d'en mettre beaucoup inutilement)

Merci d'avance !

Du coup, j'ai fais quelques correctifs, j'avoue que prendre une pause du codage un certain temps, est pas toujours ultra bénéfique pour la peine, j'ai perdu le fil. du coup, c'est un bon moyen de me mettre un peu à jour, ses exercices. Du coup, il est vrai que la variable display facilite la tâche.   Ensuite, pour les titres/paragraphe, c'est surtout une habitude. je connaissais les variables, mais ça prend un petit peu de temps avant de changer ça, pourtant, j'ai fais le changement malgré tout.   Pour la bordure, il est vrai que ça aurait été plus simple en ajoutant le border-(left/right) mais, je trouvais qu'il était plus facilement repérable de cette façon, du moins dans la partie css, du coup, j'avais opté pour cette option.  

Pour la div avec le ''style'' c'est surtout parce que l'image sera modifiable par le membre, du coup, si je met cette partie en css, c'est impossible. Dans l'optique d'une fiche administrative, j'aurais mis tout en css, mais je garde en tête que c'est un code pour une fiche de présentation, donc en l’occurrence l'avatar doit être adaptable  

Holaaa @Sygea :D
Oh très beau remix de design °^°

Le code est bien aussi :D Bon alors chipotons, sinon c’est pas drôle e.e

> Euh euh :rip:
Awih, déjà j’ai vu qu’il y avait des ID à tes blocs de textes Physique et Caractère, le même ID. Or un ID doit être unique, donc il faudrait qu’il n’y en ait pas 2 mêmes dans une même page
D’ailleurs cet ID là n’est pas très utile, tu pourrais simplement remplacer par :

Code:

<div class="description">
      <h2>Titre</h2>
      <p>Ton texte</p>
    </div>


Et le CSS, remplacer le #descr par :

Code:

.description p{
  max-height: 150px;
}


Avec un sélecteur, comme tu l’as fait avec les h2 **

> De la même façon, tu pourrais retirer l’ID de l’histoire (enfin lui ça va, il est unique déjà, c’est juste si tu veux encore réduire l’utilisation des classes et ID). Et mettre un autre sélecteur, comme tu n’as qu’un seul p directement dans la div “fiche”, et remplacer dans ton CSS l’ID #hist par :

Code:

.fiche > p{
  max-height: 210px;
}

Pour plus d’infos sur les sélecteurs je te laisse ce tuto (click)
Ça c’est juste une autre façon de faire, ce que t’as fait est très bien xD
Mais faut que je trouve des trucs à dire sinon c’est pas drôle

> Euh sinon ta fiche est pas centrée ça m’a perturbée :rip: tu pouvais mettre un margin: auto dans ta classe .fiche pour ne pas me perturber e.e

> Ensuite, tes infos “âge”, “date de naissance” etc sont en div, là pareil tu pouvais mettre en span puisque t’as changé le display en inline-block donc ça marchait bien avec des span aussi
En fait, pour régler tes 2 soucis (l’alignement non centré et le “saut de ligne”) j’aurais englobé ces infos avec une div nommée “je” et à l’intérieur, je mets les span comme ceci :

Code:

<div class="je"><span>age: 101 ans</span> <span>date de naissance: 17 dec 1999</span> <span>sexe: F</span> <span>orientation sexuelle: hétérosexuelle</span> <span>année d'étude: première</span></div>

Et le CSS y a quasi rien à changer : au lieu d’avoir seulement une classe .je, tu mets juste ces propriétés dans un .je span (vive les sélecteurs) :

Code:

.je span{
  display: inline-block;
  background-image:linear-gradient(to left, #222222, black);
  justify-content: center;
  margin-top: 5px;
  color: #A80635;
  text-transform: uppercase;
  padding: 5px;
  text-align: center;
  font-size: 10px;
  font-family: verdana;
}

Ah bah globalement c’est tout ce que j’ai à dire /paf/

Donc effectivement, les sélecteurs tu peux en utiliser plus, et à part le dernier point pour régler les petits soucis, je trouve le code plutôt propre °°

Je termine les corrections quand j'ai le temps :rip:

Merci beaucoup @Kayl pour ton passage aussi rapide ! J'ai corrigé tout ce que j'avais compris + lu le tuto que tu m'as link

Par contre, désolée mais j'ai tout saisi pour l'histoire du span xD J'ai d'abord fait comme tu as dit, mais je vois toujours pas comment centrer les blocs, et du coup le margin-top pour espacer les blocs verticalement marche plus comme c'est plus des blocks mais des span ;o;
Du coup j'ai voulu voir si le flex simplifiait pas les choses, bien que je commence tout juste à l'utiliser dans mes cours avec Yuuki, et j'ai au moins réussi à centrer les petits blocs /o Je sais juste pas si c'est très propre de mixer du display inline et du flex dans le même code xD

Navrée d'insister

En codage c'est souvent mieux de chipoter pour apprendre correctement, et c'est ce que je veux, alors tant mieux tu fais bien

@Sygea alors attends xD (effectivement vaut mieux éviter de mélanger tous les displays inline-block, flex, position etc xD)

Euh le HTML est bien, c'est ce que j'avais fait

Code:

<div class="je"><span>age: 101 ans</span> <span>date de naissance: 17 dec 1999</span> <span>sexe: F</span> <span>orientation sexuelle: hétérosexuelle</span> <span>année d'étude: première</span></div>

Ensuite le CSS, au tout départ t'avais

Code:

.je{
  display: inline-block;
  background-image:linear-gradient(to left, #222222, black);
  justify-content: center;
  margin-top: 5px;
  color: #A80635;
  text-transform: uppercase;
  padding: 5px;
  text-align: center;
  font-size: 10px;
  font-family: verdana;
}

(ou un truc similaire), j'ai juste ajouté le span derrière le .je pour les cibler eux ; et ils seront pas en inline, mais en inline-block du coup, et normalement ça devrait pas changer grand chose sur ce que t'avais d'avant : au lieu de mettre que des div (en inline-block aussi), tu changes juste le nom de la balise en span dans le HTML et tu l'ajoutes dans le CSS, et les propriétés vont donc rester identiques

Code:

.je span{
  display: inline-block;
  background-image:linear-gradient(to left, #222222, black);
  justify-content: center;
  margin-top: 5px;
  color: #A80635;
  text-transform: uppercase;
  padding: 5px;
  text-align: center;
  font-size: 10px;
  font-family: verdana;
}

Et pour la div .je, on peut lui mettre une propriété "text-align: center;" pour centrer ce qui se trouve dedans

Code:

.je{
text-align: center;
}

Chez moi ça marche bien (ce qui donne donc ceci chez moi : https://i.gyazo.com/dba9359c49c5be55d866f4cac7b771d5.png )


@Cahotic  
Effectivement si c'était juste la balise style pour l'image c'est vrai que c'est une bonne idée xD
À mon avis on peut retirer certaines des balises .element
Mais je regarderai ça plus en détail quand j'aurai fini ma journée de boulot :tululu:

Ah ouiiiiiiiiii
Tout marche !
Merci beaucoup pour ton aide /o

Hello, comme ça faisait longtemps que je n'avais pas touché à une ligne de code j'ai décidé de faire cette exercice (en plus la maquette est top! )

Html:

le css:

merci encore !!

Hello @Sora !

J'ai jeté un oeil à ton code, le rendu colle bien (à part la police j'ai l'impression, mais bon entre une maquette et le rendu final il y a toujours des différences). Le code en général est plutôt propre également !

Par contre quelques remarques si tu me permets :
- Si c'est une fiche de personnage, je pense qu'il te faudra une étape supplémentaire de revue du code pour t'assurer qu'il passera dans un message de Forumactif, d'expérience je vois déjà quelques éléments qui pourraient poser souci. Ceci dit, à titre d'exercice général, c'est déjà très bien !
- En tant qu'utilisatrice de Firefox, je suis toujours très triste [insérer ici gif de chaton triste] quand les gens pensent aux scrollbars webkit, mais pas au fait qu'il existe également des scrollbar sous firefox (plus simples, certes, mais elles sont là !)
- On a aussi ce mélange de balises impromptu : <p class="derriere"> Derrière</h2>
- L'enchainement .completer et .reponse aurait pu être simplifié. Tu pouvais utiliser les balises de définition (mais ce n'est pas forcément simple à maitriser) ou bien une solution du genre :

Code:

<p class="question"><strong>La question :</strong> La réponse</p>

Code:

.question { color : #eeeeee; }
.question strong { color :#c7a194; display:block; }

- C'est généralement mal avisé de donner un style à une balise générique toute seule comme <span>. Utilise l'héritage plutôt. Donc par exemple au lieu de span { /* tes déclarations CSS */ }, ce serait plus prudent d'utiliser .info > span { /* tes déclarations CSS */ }
- Il n'y a pas besoin de mettre la propriété absolute sur la classe .text vu que c'est son parent qui est positionné par dessus l'avatar.
- Je pense qu'il doit être possible d'utiliser le pseudo-élément ::before pour le demi cercle, ce qui éviterait l'usage d'une balise vide.

Voilà voilà pour mes avis, en espérant t'avoir donné quelques pistes de réflexion intéressantes !

Hello !
Pour commencer merci d'avoir check mon code et des conseils que tu m'as donnés !!
C'est vrai que j'avais pas pensé à FA comment serait le rendu. Il faudrait que je regarde sur un de mes forum test voir ce qu'il autorise ou nonet aussi sérieusement me pencher pour tous ce qui est intégration sur FA argh (et c'est vrai que pour le coup j'ai pensé pour chrome mais pas sur d'autres navigateurs, je ferai plus attention !!)
C'est vrai que les balises de définition comme strong aurait pu simplifier mon code *mais j'avais totalement zapper argh*
Par contre tu peux me juger oui mais l'heritage fin du moins cette syntaxe

Code:

.info > span { /* tes déclarations CSS */ }

je ne connaissais. je regarderai
En tout cas encore merci ca m'a donné envie de continuer a faire les autres exercices !!!

Alors, en fait cette syntaxe, il s'agit d'un sélecteur d'enfant direct. Ce sélecteur va permettre de cibler uniquement les éléments <span> qui sont des enfants directs d'un élément ayant la classe info.
(Les "enfants directs" ce sont les éléments qui sont à l'intérieur d'un élément, mais pas leur contenu)

Bonjour, je viens occuper un peu les codeurs



C'était une reprise HTML de mon côté. Ce fut un peu compliqué, notamment pour les divs - que j'ai vainement essayé de limiter je tiens à le signaler. Les placements des éléments aussi, je pense qu'il y avait moyen d'utiliser quelque chose de plus optimisé comme le grid Au niveau de la scrollbar, je n'arrive jamais à savoir comment la rendre accessible à la majorité des navigateurs aled ?  

Voilà, n'hésitez pas si vous avez des conseils pour rendre mon code meilleur ; méthodes utilisés, syntaxes ou juste comment réduire à néant ses fichus div ! Merci d'avance

J'ai bien aimé cette maquette, même si j'ai eu un peu plus de mal à la réaliser
Voilà mon résultat :



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=Montserrat&family=Voltaire&display=swap" rel="stylesheet"><div class="fichePZ3"><div class="chapavaPZ3"></div><div class="avaPZ3"><!--
--><img src="https://zupimages.net/up/18/23/zt89.png"/><div><!--
--><h1>Derrière</h1><!--
--><p><!--
--><span>Pseudo :</span>
Écrire ici

<span>Âge :</span>
Écrire ici

<span>Avatar :</span>
Écrire ici

<span>Un petit mot :</span>
Écrire ici<!--
--></p></div></div><div class="infosPZ3"><!--
--><h1>Prénom Nom un peu long</h1><!--
--><p><!--
--><span><b>Surnom : </b>Écrire ici</span><!--
--><span><b>Âge : </b>Écrire ici</span><!--
--><span><b>Genre : </b>Écrire ici</span><!--
--><span><b>Orientation : </b>Écrire ici</span><!--
--><span><b>Nationalité : </b>Écrire ici</span><!--
--><span><b>Métier : </b>Écrire ici</span><!--
--><span><b>Groupe : </b>Écrire ici</span><!--
--></p></div><div class="caraphyPZ3"><div class="caraPZ3"><!--
--><h1>Caractère</h1><!--
--><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?</p><!--
--></div><div class="physiPZ3"><!--
--><h1>Physique</h1><!--
--><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?</p><!--
--></div></div><div class="histPZ3"><!--
--><h1>Histoire</h1><!--
--><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></div><!--
--><div class="credPZ3">cheryl & void — <a href="https://www.epicode-entraide.com/t12951-facile-exercice-6-fiche-simple-reine#355973">epicode</a></div></div>

Le CSS :

Code:

/*********************EXERCICE 9*********************/
.fichePZ3 {
    width: 700px;
    height: 825px;
    margin: 0 auto;
    color: #000;
    display: grid;
    grid-template-columns: repeat(70, 10px);
    grid-template-rows: repeat(80, 10px);
    background-color: #c7c7c7;
    border-top: 20px solid #772020;
    border-bottom: 15px solid #772020;
}

.fichePZ3 p {
 font: 12px 'Montserrat', sans-serif;
 margin: 0;
 overflow: auto;
    text-align: justify;
 scrollbar-width: thin;
 scrollbar-color: #9c3737 #d5d5d5;
}

.fichePZ3 p::-webkit-scrollbar {
    width: 3px;
}

.fichePZ3 p::-webkit-scrollbar-thumb {
    background-color: #9c3737;
}

.fichePZ3 p::-webkit-scrollbar-track {
    background: #d5d5d5;
}

.fichePZ3 h1 {
    margin: 0;
    padding: 0;
 border: none;
    text-align: center;
    font: 35px Voltaire, cursive;
    font-weight: normal;
    color: #772020;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px #ffffff;
}

.chapavaPZ3 {
    grid-column: 3/23;
    grid-row: 3/9;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background-color: rgb(177, 96, 96);
}

.avaPZ3 {
    grid-column: 3/23;
    grid-row: 9/49;
    position: relative;
}

.avaPZ3 img {
 object-fit: cover;
 width: 100%;
 height: 100%;
}

.avaPZ3 div {
    position: absolute;
    top: 0;
    width: 200px;
    height: 400px;
    padding: 10px;
    color: #fff;
    background-color: rgba(8, 6, 6, 0.9);
    opacity: 0;
    transition: all 0.3s ease-out;
}

.avaPZ3 div span {
    text-transform: uppercase;
    color: #faa1a1;
    font-size: 14px;
}

.avaPZ3:hover div {
    opacity: 1;
}

.infosPZ3 {
    grid-column: 25/69;
    grid-row: 3/20;
 padding: 0 5px 0 0;
}

.infosPZ3 p {
    height: 126px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.infosPZ3 p span, .infosPZ3 p span b {
    transition: all 0.2s ease-out;
}

.infosPZ3 p span {
    flex: 1 1 auto;
    padding: 5px 0;
    background-color: #c7b2b2;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infosPZ3 p span b {
    text-transform: uppercase;
    color: #9c3737;
 padding-right: 5px;
}

.infosPZ3 span:hover {
 background-color: #9c3737;
    color: #fff;
}

.infosPZ3 span:hover b {
 color: #c7b2b2;
}

.caraphyPZ3 {
    grid-column: 24/69;
    grid-row: 21/49;
    display: flex;
}

.caraphyPZ3 p {
    height: 230px;
    padding: 0px 5px;
}

.caraPZ3 {
    border-right: 2px solid #772020;
 padding-right: 10px;
}

.physiPZ3 {
    padding-left: 10px;
}

.histPZ3 {
    grid-column: 3/69;
    grid-row: 49/78;
}

.histPZ3 p {
    height: 245px;
    padding-right: 5px;
}

.credPZ3 {
 grid-column: 1/71;
    grid-row: 80/81;
 text-align: center;
 font: 10px 'Montserrat', sans-serif;
    color: #fff;
}
/*********************FIN EX 9*********************/

Salut @Void !

Alors déjà, pour commencer, le crédit que tu as mis en bas est incorrect, la maquette est de khydo, Cheryl s'est juste contentée de la partager ^^

Analyse du HTML

→ Je relève déjà la présence d'un bloc <div></div> vide, ce qui est à éviter quand c'est possible.
→ L'image n'a pas d'attribut alt, ce qui est une mauvaise pratique.
→ J'aurais utilisé une liste HTML pour les infos en vrac (surnom, âge, toussa)
→ Je me demande si c'est vraiment nécessaire d'avoir une classe pour chaque bloc dans la section caractère & physique
Mis à part ces petits détails, côté HTML tu gères à ce stade.

Analyse du CSS

→ Alors pour commencer, ton utilisation de grid CSS est assez inatendue. Compte tenu de la structure de la fiche, une grille de deux ou trois colonnes et quatre ou cinq lignes aurait probablement suffi, mais tu as créé une grille de 70 colonnes et 80 lignes ?_? Que se passe-t-il si on souhaite avoir une fiche de 800px de large ? Tu rajoutes dix colonnes et tu réécris l'emplacement de chaque "cellule" ? Pour le coup, la grille devient super rigide et difficile à modifier, ce qui va à l'encontre des objectifs de grid CSS ^^'

Du coup, comme je dis, revois ça de façon plus simple. Si on choisit grid pour l'affichage, on peut effectivement utiliser une colonne pour l'avatar, et deux pour le reste de la fiche. Si le titre, les infos en vrac, le bloc caractère/physique occupent chacun une "ligne", et qu'on rajoute ensuite le bloc "histoire" et la ligne de crédits, ça fait cinq lignes. Le tout sans fixer de dimensions sauf si nécessaire. Par exemple ça sera probablement utile de fixer la largeur de la colonne qui contiendra l'avatar, mais les deux autres peuvent être dimensionnées avec l'unité fr des grilles (fraction).

Niveau hauteur, c'est plus compliqué, parce que si tu veux limiter la hauteur de l'avatar à une dimension précise, considérant que ce bloc là se dispatche sur 3 lignes  (ou deux selon tes choix) de la grille, fixer leur hauteur reviendrait à créer de potentiels problèmes d'affichage. Tu pourrais cependant fixer le bloc contenant l'avatar et gérer avec grid pour qu'il s'aligne verticalement de façon élégante même si la partie textuelle est plus dense que prévu. 'fin bref, dans tous les cas cette partie est assez compliquée à gérer quand on veut un résultat aussi flexible que possible.

→ La liste des infos diverses en flex, c'est chef kiss. Par contre, pourquoi est-ce que chaque bloc d'info est aussi un élément flex ? Oh ! A cause du saut de ligne dans la fiche ! Une alternative potentielle serait également d'utiliser un .infosPZ3 p span b + br { display : none }, mais ta solution est un peu plus foolproof.

→ Je t'invite à te renseigner sur la propriété CSS inset pour le bloc qui recouvre l'avatar ;)

→ On peut potentiellement se passer de classes pour le bloc "caractère" et le bloc "physique" en utilisant la pseudo-classe :nth-child(). Vu que tu as deux blocs côte à côte, tu peux sélectionner le premier et le deuxième séparément sans avoir besoin d'une classe en plus. Non pas que ta méthode soit mauvaise, c'est juste que dans une optique "fiche utilisable par des membres" j'aime limiter le plus possible la quantité de code HTML qu'ils peuvent casser XD

→ Pour le demi-cercle au dessus de l'avatar, plutôt qu'un élément vide en HTML, je t'invite à explorer du côté du pseudo-élément ::before. Et pour la forme, tu peux aussi t'amuser avec clip-path() (border-radius marche très bien, mais quitte à te faire revoir ton code en profondeur, autant te faire expérimenter d'autres choses au passage XD)

→ Je suis dubitative relativement à l'emplacement des crédits. On dirait que tu les as positionnés sur la 81° ligne de ta grille à 80 lignes. Pourquoi utiliser une bordure et tenter de positionner les crédits par dessus quand tu pouvais juste rajouter un bloc avec la même couleur de fond que la bordure, tout simplement ?

→ Je te renvoie à ma précédente review pour la question des scrollbar sous firefox.

Voilà voilà ! J'ai probablement loupé des trucs avec tout ça mais ça fait déjà pas mal d'infos à gérer pour toi, donc on verra si j'ai d'autre trucs à ajouter plus tard o/