J'avais loupé cette fiche ! Elle est trop belle je l'ajoute à la liste et voici quelque tuto qui pourrais être utile :

Les DIV et les SPAN
Le Float ou Les displays

Je m'ennuyai un peu, alors j'ai fait ça :3
https://codepen.io/anon/pen/rqLNjK?editors=1000#

Hello @Tigrlion :D

Ton rendu et ton code sont tops à première vue, déjà bravo pour ça :DD
Maiiiis on est ici pour s'améliorer donc je vais pointer quelques petits défauts (ce ne sont que détails à mes yeux).

1/ Pour un rendu vraiment identique à l'original, le background-position: center n'était pas l'idéal. Mais je t'avoue que j'ai chipoté pour trouvé la bonne combinaison parce que c'était pas super simple avec cette image xD Donc les paramètres optimaux sont

Code:

background-position: bottom; background-size: cover;

à la place de ton autre background-position. Le background-size: cover indique que l'image prend la largeur complète du bloc dont elle est le background (en coupant éventuellement la hauteur si elle ne correspond pas, ce qui est le cas ici).
Toujours dans le rendu exact, si jamais tu voulais aussi personnaliser la scrollbar comme sur le schéma, je te laisse aller lire ce tutoriel > https://www.epicode-entraide.com/t1964-personnalisation-de-la-srollbar

2/ Pour ton bloc de texte, il n'était pas nécessaire d'utiliser une div + un p, le p aurait suffi seul, en lui ajoutant du coup ton background, ta color, ton font-family et ton height. D'ailleurs au passage, en choisissant de séparer la mise en forme du bloc et du p, il aurait été judicieux de le faire avec tes paramètres également, et donc de mettre color et font-family dans le p
Et du coup, pour l'espace entre le haut de ton texte et le bord du bloc, tu pourras jouer sur le padding (qui marche comme les margin, cad padding: haut droite bas gauche). Et, pour ne pas devoir régler la taille de ton bloc en fonction de ces paddings, il te suffit d'ajouter le paramètre 'box-sizing: border-box;' Ce paramètre dit en fait à ton bloc d'adopter le width et le height que tu lui as donné sans y ajouter la taille de ses paddings et bordures (ce qu'il fait par défaut).

3/ Concernant ton titre et ton feat, les positionner à l'aide d'un inline-block plutôt qu'avec des positionnements relative et absolute t'aurait, à mon avis, simplifié la vie (d'autant plus que la div générale t'aurait été bien inutile dans ce cas). Je te propose d'aller consulter ce tutoriel > https://www.epicode-entraide.com/t12650-positionnement-avec-display pour obtenir plus d'informations à ce sujet x)
Il me semble également qu'il aurait été utile de leur ajouter un width à chacun, pour éviter qu'en allongeant ton titre (ou ton feat), ils ne se superposent comme ceci > https://i.gyazo.com/dc3f248db30149ba38096f7a323a63c3.png

4/ Concernant le titre uniquement, la balise span n'est pas la plus appropriée pour lui. En effet, tu aurais pu utiliser plutôt un h1 (ou h2/h3 mais en général les titres principaux sont notés h1). Les span sont plutôt utilisés uniquement pour quelques mots (d'autant plus qu'ils n'ont pas la même propriété display par défaut) tandis que les balises h sont spécifiques aux titres, sous-titres etc.


Voilà, je pense avoir tout dit x) J'espère avoir été claire et avoir pu t'aider un peu :D

Je réponds ici un mois plus tard, parce que j'avais pas répondu tout de suite et après j'ai oublié, sorry

Alors, je m'étais cassé la tête avec le background, j'arrivais vraiment pas à trouver comment faire pour avoir le même rendu que l'image que le schéma, et c'est pas étonnant, je connaissait pas la propriété background-size, alors je risquais pas d'y penser x) Je comprends pas trop bien ce qu'elle fait, va falloir que je fasse des tests de mon côté et que je me renseigne là-dessus alors :3

Pour la scrollbar, je t'avoue que comme je suis sur Firefox et que les scrollbar personnalisée ne marchent pas sur Firefox, je cherche même pas à en faire, c'est pour ça que je l'ai pas fait x)

Cela dit, si j'ai fait une div + un p, c'était justement par rapport à la position de la scrollbar, si j'avais juste mis un p, la scrollbar aurait était collée aux bords du bloc malgré le padding, alors j'ai fait ça comme ça. Mais c'est vrai que je me suis emmêlé les pinceaux en mettant les paramètres de ma police un peu partout, je modifie pour tout mettre dans le paragraphe !

Pour le titre, je sais pas pourquoi j'ai mis en absolute, mais tu as raison, c'est clairement mieux en inline-block. Par contre, j'aime bien les spans, j'ai du mal avec les h1 et compagnie à cause de leurs taille et marge par défaut tout ça, ça me perturbe, je me sens pas très à l'aise avec ça, alors... x'3

Du coup, j'ai fait une version corrigée avec tous tes conseils ici : https://codepen.io/anon/pen/QJKJgm?editors=1000

Hop là, je reviens pour éclaircir les quelques questions qu'il te reste @Tigrlion x)

•

Tigrlion a écrit:Alors, je m'étais cassé la tête avec le background, j'arrivais vraiment pas à trouver comment faire pour avoir le même rendu que l'image que le schéma, et c'est pas étonnant, je connaissait pas la propriété background-size, alors je risquais pas d'y penser x) Je comprends pas trop bien ce qu'elle fait, va falloir que je fasse des tests de mon côté et que je me renseigne là-dessus alors :3

En fait, la propriété background-size définit tout simplement la taille de ton background (quand c'est une image) *paf* Si tu veux que le background prenne donc toute la largeur du code (en étant visible totalement), tu peux par exemple mettre background-size: 100%; (par défaut, un background restera à sa taille initiale et ton codage ne serait pas forcément assez grand, un background-size 100% va également redimensionner ton image pour qu'elle prenne la taille de la div autour).

• La scrollbar sur Firefox peut fonctionner avec les préfixes -moz Mais je t'avoue que ça ne fonctionne pas toujours chez moi sans que je comprenne pourquoi, donc à tester, mais en théorie, ça fonctionne.

• Pour les h1 et compagnie, si tu veux "réinitialiser" les margin, tu peux mettre margin: 0; (et après tu travailles comme tu veux, ça réinitialise juste, fin annule ce qui est prédéfini).

Voilà, ça peut être utile à savoir x)

Bonjour ! Je trouvais l'exercice intéressant du coup j'ai voulu tenter ma chance ! Voici !

Poupiloup~
Petite envie de coder

Bonjour, @alysszen.

Ton rendu est plutôt pas mal, il y a par contre de petits soucis visuels au niveau des titres et du bloc de texte.
Sur codepen si tu vas dans "Change view" et tu passes les onglets sur le côté dans Layout tu verras mieux de quoi je parle. Je mets les onglets par défaut à droite donc impossible de rater les titres qui dépassent :p

Ton HTML est parfait, bravo ! Je vois des balises sémantiques c'est tout beau et choupi **

Les petits problèmes d'affichage viennent évidemment du CSS. Voici mes remarques dessus :

Ton bloc parent (.backgroundexo) n'a pas de largeur fixe, il prend donc par défaut la largeur de toute la page. Un petit astuce que tu peux faire pour voir la taille réelle d'un bloc est de lui ajouter une bordure dégueulasse (border: 1px solid;). Je te laisse essayer, tu seras surprise :p
En réalité la position center sur ton background est la raison qui t'a poussé à croire que ton bloc à la bonne dimension.
D'ailleurs, je vois que tu as mis une hauteur (height) à ton bloc pourtant ça n'était pas nécessaire. Logiquement, la largeur d'un message est limitée mais sa hauteur peut prendre autant que nécessaire. Ceci dit tu peux garder la hauteur ce n'est pas un problème mais tu dois absolument fixée la largeur car c'est plus important surtout qu'il va falloir positionner les titres sur la même ligne aux extrémités du bloc par la suite.  
Aussi pour centrer un bloc, on utilise la déclaration margin: 0 auto; (je mets 0 mais tu peux fixer la marge que tu veux ça s'appliquera à la fois au haut et au bas du bloc. En réalité c'est la 2ème valeur auto qui sert à centrer horizontalement).
Mais encore une fois, on ne peut centrer un bloc que si on connait sa largeur, il faut donc avoir un width pour que le margin: auto; soit effectif.

Pour tes titres h1 et h2, il y a deux choses dont j'ai envie de parler.
- un display: inline va faire en sorte que ton bloc devient un élément linéaire et donc il ne peut plus accepter les propriétés liées aux blocs dont margin. Il existe une valeur display hybride qui permet au bloc de rester sur la même ligne tout en gardant ses propriétés de bloc, cette valeur est appelée : inline-block.
Tu trouveras un tutoriel sur les valeurs possibles de la propriété display dans le message de Batty.
- Je vois que tu as essayé de positionner tes titres avec de grosses marges, ce qui n'est pas très correct.
Les marges servent uniquement à faire en sorte qu'un bloc ne touche pas ses blocs voisins. Donc on peut créer un petit espace avec margin, sans en abuser.

Ici pour bien positionner tes deux titres, il faut d'abord leur donner une largeur qui ne dépasse pas la moitié de la largeur totale du bloc. Ainsi le navigateur saura exactement combien d'espace le bloc titre devrait prendre. Après tu as le choix entre utilisé le inline-block avec display ou bien le float. A savoir que si tu utilises inline-block assure toi d'aligner le texte à droite pour h2 (text-align).
Le tuto sur le float est aussi disponible dans le message de Batty.

Une fois les titres bien positionnés, tu pourras mieux adapter la hauteur du paragraphe.

La dernière chose est sur la forme du padding :

Code:

padding:10px 10px 20px 10px;

Quand on met 4 valeurs dans padding ou margin, la direction suit celle des aiguilles d'une montre, on a donc. padding:haut droit bas gauche;
Dans ton code la droite et gauche ont la même valeur, donc tu peux utiliser la forme en 3 valeurs pour raccourcir ton code

padding:haut droit=gauche bas ;

Code:

padding:10px 10px 20px;

Pour ce que j'ai mis plus haut :

Code:

margin : 0 auto;

C'est la déclaration à deux valeurs margin: haut=bas droit=gauche;

Et comme tu dois déjà le savoir, si j'écris une seule valeur c'est qu'elle s'applique à toutes les directions.

Voilà j'espère que tu as appris des choses en lisant mon message, bon courage à toi. Je reste disponible sur tu as des questions et je m'excuse pour le temps qu'on a mis avant de corriger ton exercice :3

EDIT : Ah il y a un truc important que j'ai oublié de mentionner au fait.
Tu as utilisé des balises sémantiques (h1, h2 et p) c'est super mais tu n'as pas vraiment profité de ça. Un des intérêts de l'utilisation de ces balises est la réduction de l'utilisation des classes. Au lieu d'avoir 4 div avec 4 classes, avec ces balises tu peux utiliser les sélecteurs combinés et notamment le sélecteur de descendants. Tu auras donc uniquement une classe pour la div parente et pour sélectionner le reste on combine la classe du parent avec la balise :

Code:

.backgroundexo h1 {}

.backgroundexo h2 {}

.backgroundexo p {}

Alek je te réponds après :3

Coucou, @Alek

Ta fiche est très jolie, j'ai du passer par Chrome pour voir la beautiful scrollbar vu que sur Firefox les scrollbars ne fonctionne pas T.T

Ton code est plutôt propre c'est cool, par contre je regrette l'absence des balises sémantiques dans ton code. Par exemple au lieu d'une div qui porte la classe titre, j'aurais aimé voir une vraie balise titre hn (n pour le numéro 1 à 6 selon l'importance du titre).

Pour ton CSS, je n'ai pas grand chose à dire là également. Voici mes remarques toutes petites :
- En codage quand la valeur est 0 on ne met pas d'unité, parce que que ça soit en pixel, en pourcentage ou même en litre 0 c'est nul.

- Un bloc par définition, prend toute la place disponible. Ton cadre fait 50px de hauteur, alors forcément titre et feat seront haut de 50px, nul besoin de le préciser.

- En parlant de blocs qui héritent la taille du parent, il aurait était plus judicieux d'explorer un peu plus le flexbox vu que tu as choisi de l'utiliser dans l'exercice. Au fait le flexbox comme son nom l'indique permet de gérer le positionnement de façon flexible, ça t'évite de calculer la largeur et les marges des éléments enfants qui subissent le flexbox.
Donc plutôt que de mettre une largeur et des marges à ton titre et feat, tu aurais pu mettre une largeur au cadre qui est plus petite que celle du bloc parent et le centrer (j'aurais mis simplement width:90% parce que je suis flemmarde mais tu peux tout aussi mettre une largeur fixe en retirant la valeur marginale, 350px par exemple). Après pour mettre automatiquement les deux blocs aux extrémités on utilise la propriété lié au flexbox "justify-content". Bref, j'aurais un truc du genre :

Code:

.cadre {
 width: 350px;
 height: 50px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 }

.titre {
 color: #F1F1F1;
 font-size: 40px;
 font-family: 'Katibeh';
}

.feat {
 color: #F1F1F1;
 font-size: 25px;
 font-family: 'Katibeh';
 margin-top: 15px;
}

Ceci dit ta façon de faire n'est pas fausse, j'essaie juste de te faire explorer le flexbox qui te fera des lignes et du calcul en moins (méthode privilégiée par les flemmards comme moi). D'ailleurs si tu n'as pas de problème avec l'anglais, voici un petit guide très utile par ici.

Je m'arrête là parce que ton code était vraiment très bien fait de toute façon, bravo :3

Je retiens cette méthode de flemmard, ça peut etre pratique /PAN xD
Le guide est complet, c'est cool, je me le suis enregistrer, histoire que je pense à mettre un peu plus de flex box dans mes codes~

(au niveau des div's -que je met juste partout à outrance *tousse*- là c'est rien.. j'ose même pas imaginer ta tête quand tu verras mes autres codes, si c'est toi qui les corrige xD)

Merci beaucoup pour la correction Reine \o/
ps: au passage, pour la personne qui a effacer tout mon code, que j'avais bien heureusement enregistrer ailleurs --> recommence et je te bouffe éé

Bonjour Reine !

Merci beaucoup pour la correction ! J'irais voir les tutos de Batty ! J'ai apporté quelques corrections que tu as indiqué et je finirais les corrections avec les tutos. Je n'avais pas remarqué que mes titres n'étaient pas dans mon code, merci du conseil pour la view et d'avoir prit le temps de me répondre !

Merci pour le compliment sur le HTML !
C'est juste ... quand je l'ai vu sur le coup !

I WILL DO MY BEST !

Hola.
J'essaie aussi, pour m'entraîner :

Coucou @Yozora !
Dans l'ensemble, ton code est tout beau tout propre, je n'ai pas grand-chose à redire dessus. c:

L'utilisation des id est correcte dans ce cas précis mais, si tu comptes te servir de cette fiche sur un forum, il faudra privilégier les class, plutôt. En effet, on utilise l'id pour cibler dans le css quelque chose qui n'apparaîtra qu'une seule fois sur la page (un qeel, par exemple !) ; pour les fiches, donc, on préfère utiliser les class. c:

Une balise p pour englober ton texte, au lieu d'une div #rp aurait rendu ton code par-fait mais je chipote

Continue comme ça, c'est un très bon début.

Merci @Artemis, je prends note. **

Plop (oui encore moi, je suis effectivement en train de faire tous les exercices XD)
Voilà mon résultat, pour une fois je n'ai pas eu de difficultés  J'ai opté pour des flex, c'est sympa pour se remettre à bidouiller dessus !



Le HTML :

Code:

<div class="ficheRP2"><div class="titreRP2"><!--
--><h1>Titre du RP</h1><!--
--><p>Feat. Pseudo</p><!--
--></div><div class="textRP2"><!--
--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis dictum nibh, in lacinia nulla. Nunc vel aliquam purus. Donec eget risus sit amet dolor consequat ultricies finibus at lacus. Ut mi augue, imperdiet eu tellus sit amet, fermentum suscipit turpis. Aliquam consectetur bibendum porttitor. Pellentesque leo neque, dapibus a cursus blandit, tincidunt eget eros. Mauris iaculis risus ac eleifend dictum. Proin eleifend risus ut turpis bibendum blandit. Cras vitae metus et nunc malesuada elementum vehicula eget diam. Pellentesque ut dignissim massa. Donec sollicitudin arcu in augue pellentesque accumsan.

<span>“ Une jolie petite phrase de dialogue... ”</span>

Donec ut tempus augue. Pellentesque laoreet tincidunt facilisis. Etiam in turpis sapien. Morbi augue risus, ultricies non pellentesque id, convallis sit amet turpis. Proin finibus sem lectus, ut aliquam sem tincidunt nec. Sed finibus elit tortor, quis mattis elit venenatis vel. Donec rutrum nulla ac malesuada tristique. Nulla non blandit tortor. Quisque cursus, dolor eget condimentum semper, sapien leo aliquet sapien, sed maximus ipsum magna nec nibh. Fusce tempus massa at posuere sagittis. Donec nec tincidunt ipsum, in iaculis metus. Aliquam erat volutpat. Donec non consequat sem. Maecenas vitae nibh consequat, vulputate lacus feugiat, euismod lorem.

Proin sit amet est lobortis velit fermentum aliquam in vitae ante. Phasellus sit amet erat id tellus efficitur dictum ut ac nulla. Nunc mi mi, varius at fringilla commodo, scelerisque sed nisl. In non blandit leo, vitae imperdiet turpis. Donec vel egestas enim. Suspendisse id porttitor orci, sit amet porta lorem. Sed ultricies venenatis tortor at imperdiet. Proin sodales quis massa et ornare. Cras ullamcorper maximus ornare. Nam ac enim viverra, commodo risus id, porttitor velit. Proin et risus eleifend, lobortis ex nec, pretium magna.

Donec at luctus nisl, at rutrum diam. Praesent eget blandit augue. Suspendisse et leo felis. Nullam quis dictum urna. Aliquam a purus quis eros posuere aliquet. Sed felis enim, feugiat in sem placerat, pharetra convallis mauris. Suspendisse condimentum tristique ante, eu fringilla massa. Praesent aliquam aliquet massa, in tincidunt ipsum mattis vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse at rhoncus diam, sit amet porttitor libero. Donec hendrerit molestie elit a dapibus. Duis lobortis convallis odio in scelerisque. Integer posuere rhoncus libero vitae pretium. Sed luctus lacinia nunc accumsan fermentum.

Mauris vitae faucibus felis. Integer pellentesque venenatis imperdiet. Etiam placerat sit amet nisl non ornare. Pellentesque a euismod nibh. Donec pellentesque est in sapien pulvinar, nec feugiat sapien vehicula. Integer imperdiet dolor a blandit posuere. In ultricies, arcu nec ultricies varius, arcu tellus tincidunt enim, eget dignissim lectus ex vel ipsum. Phasellus ultricies lacus at sagittis ultricies. Cras maximus commodo tempor. Vestibulum porta, justo nec laoreet semper, nibh mauris imperdiet elit, sed maximus dolor neque et est. Aenean sit amet dignissim velit, eu ornare ipsum. Nam varius arcu urna, at ultrices nibh tempus vitae. Etiam aliquam dui lorem, sed tempus est semper non. Quisque fermentum elit eros, ac euismod tortor finibus in. Proin sapien urna, interdum eu velit ut, consectetur mollis mauris. Nulla venenatis elit ut nisi suscipit iaculis. Integer id enim vehicula, commodo enim nec, suscipit tellus.

Pellentesque feugiat lacinia elit, a pulvinar lectus vulputate non. Maecenas imperdiet aliquam ex, at tristique magna tincidunt in. Donec eget ipsum consequat, rutrum metus non, ultricies ligula. Pellentesque commodo tellus ut justo posuere cursus. Nam non viverra nulla, rutrum accumsan orci. Mauris cursus orci non imperdiet vehicula. Suspendisse molestie libero eget enim pretium molestie.Pellentesque commodo diam sapien, at venenatis ipsum tincidunt eu. Nam quis fermentum mauris. Nulla facilisi. Nullam vulputate mauris sed hendrerit laoreet. Nam dignissim, sapien ac vehicula pellentesque, velit enim porta odio, eget consequat elit erat ac erat. Praesent molestie leo est, ac scelerisque ligula vestibulum ac.</p></div><!--
--><div class="credRP2">ori & void — <a href="https://www.epicode-entraide.com/t12951-facile-exercice-6-fiche-simple-reine#355973">epicode</a></div></div>

Le CSS :

Code:

/*********************EXERCICE 8*********************/
.ficheRP2 {
    width: 500px;
    height: 650px;
    margin: 0 auto;
    padding: 15px;
    background-image: url(https://www.zupimages.net/up/23/10/1jiu.jpg);
    background-size: cover;
    font: 12px roboto, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.titreRP2 {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.titreRP2 h1, .titreRP2 p {
    border: none;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    font-weight: bolder;
    text-transform: uppercase;
}

.titreRP2 h1 {
    font-size: 45px;
    font-style: italic;
    color: #fff;
    text-shadow: 3px 3px 0 #144d93;
}

.titreRP2 p {
    font-size: 14px;
    color: #1a5894;
    text-shadow: 1px 1px 0 #ffffff;
}

.textRP2 {
    padding: 5px;
    background-color: #ded5ccdb;
}

.textRP2 p {
    margin: 0;
    height: 540px;
    text-align: justify;
    font: 12px roboto, sans-serif;
    padding: 5px;
    overflow: auto;
    color: #000;
    scrollbar-width: 3px;
    scrollbar-color: #1a5894;
}

.textRP2 p span {
    font: 14px Georgia, serif;
    font-weight: bolder;
    color: #1a5894;
}

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

.textRP2 p::-webkit-scrollbar-thumb {
    background: linear-gradient(#e52d2b, #1a5894);
}

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

.credRP2 {
    color: #fff;
    text-align: center;
    padding-top: 10px;
}

.credRP2 a {
    font-weight: bolder;
    color: #fff;
    text-decoration: none;
}

.credRP2 a:hover {
    color: #1a5894!important;
}
/*********************FIN EX 8*********************/

Hello @Void, me revoilà pour te pondre un pavé.

Côté HTML, rien à redire, c'est simple, clair, facile à exploiter en tant que fiche sous Forumactif. Puisque je n'ai rien à dire de très intéressant sur le sujet, je vais dériver un peu, parce que je suis ce genre d'emmerdeuse.

Les balises de paragraphe, comme leur nom l'indique, servent à afficher des paragraphes. Si cette fiche était codée sur une page web normale, il faudrait donc placer chaque paragraphe de texte entre balises <p></p>. Puisque nous sommes sur Forumactif, quand je donne mon avis sur un code, je prends en compte les particularités du support : La plupart des utilisateurs novices ne prendrait pas la peine de mettre tous ses paragraphes entre balises adéquates, et le code généré par Forumactif quand on poste un message se contente de renvoyer un gros pavé de texte avec des sauts de ligne <br>. Garde cependant en tête que ce qui est une pratique "correcte" sur Forumactif ne l'est pas dans un contexte différent.

Tout ce blabla pour dire que dans le cas précis de "ceci est le bloc dans lequel on place le texte du RP", il vaudrait mieux se contenter d'une balise <div>.

Toute la magie du code se passe dans le CSS, donc c'est là dessus que je vais davantage me concentrer.

→ Je me demande pourquoi tu as choisi d'utiliser flex-direction:column. Si c'est inspiré par une autre de mes reviews, c'était une piste de réflexion qui nécessitait d'approfondir un peu plus la question (j'en reparle plus bas). En ce qui concerne le fonctionnement de ton code, sur Firefox, je ne vois pas ce que ça apporte par rapport à l'usage classique de blocs de contenus. L'usage de la propriété align-items m'intrigue également (d'autant que ça te force à rajouter un width:100% qui aurait pu être évité)

→ Pour développer un peu plus la question d'utiliser flex en colonne, si j'en parlais dans un précédent exercice, c'était pour exploiter flexbox pour que le bloc "central" (celui qui contient le texte) change de hauteur automatiquement en fonction du contenu des autres blocs, plutôt que d'être fixé. Ainsi, si la fiche est limitée en hauteur et que le bloc de classe .textRP2 se voit appliqué un overflow:auto, le bloc sera automatiquement défilant et à la bonne taille quoi qu'il arrive au reste des éléments. Et ça t'épargne le besoin de fixer une hauteur au bloc de texte.

→ En parlant du reste des éléments, tu n'as pas pris en compte la possibilité d'un titre très long, ou d'un pseudonyme long, ou les deux en même temps. Le visuel dans ces circonstances prend malheureusement assez cher. Outre le fait que le titre et le feat côte à côte ne rendent pas très bien dans ces circonstances (un petit flex-wrap:wrap serait une solution au problème), il y a également le fait que la zone de texte dépasse de l'image de fond (la fameuse hauteur fixe à éviter XD).

→ Je te renvoie aussi à ma précédente review en ce qui concerne l'utilisation de scrollbar-width et scrollbar-color

Et... je crois que c'est tout ce que j'ai à relever ? J'espère que la lecture aura été informative o/