Merci du partage Elle est très jolie !

Je l'ajoute à la l'index et voici quelque tuto qui pourrais aider

Positionnement avec display ou Positionnement float
Différence entre DIV et SPAN
Les listes
Les balise HTML
Utilisation des sélecteurs

Si vous souhaiter mettre la fiche pub dans une page HTML :
Structure d'une page HTML
Iframe

Bloup~
Je n'ai pas respecté les tailles #thug



je n'ai pas pu faire comme sur la maquette, les blocs décalés, parce que mon tout est dans un bloc avec une largeur définis étou.. voilou

Bonsoir, @Alek :3
Je te réponds avec un mois de retard, sorry.

Concernant ton choix de coder sur scratchpad, je trouve ça pas très pertinent pour un exo, vu que le code peut être modifier en temps réel. Ce site sera plus adapté pour un tuto en direct ou pour coder un projet en collaboration entre deux ou plusieurs codeurs. Pour que ton code soit plus en sécurité il sera préférable d'utiliser un éditeur comme Codepen ou JSfiddle.

Sinon tu t'en sors plutôt bien pour cette fiche, par contre il y a quelques disparités à voir.
Niveau visuel, le dernier avatar n'est pas décalé en effet et il manque le cadre noir au bloc du contexte.
Il te manque aussi tout ce qui est interactif. contexte, prédéfini, annexe et join us sont supposé être des liens.

Alors petit faute d'inattention à la fin de ton CSS, il y a un point virgule après ton commentaire sur la couleur de l'ascenseur.

Comme tu le sais déjà, t'es très copine avec les div, un peu trop quand même x). Je t'invite donc à voir ce tuto pour découvrir les autres balises HTML.

Alors on a .bloc et .fond qui entoure le même contenu, une de moins serait bien :p
Tu n'as besoin d'un seul bloc parent, qui aura une grosse bordure droite noire (border-right).
De même pour .contexte et .texte ça fait deux div alors que tu peux juste mettre tout ton CSS dans contexte directement.

Ton titre et sous-titre ont tous les deux une marge de 8px. Tu peux si tu veux mettre un padding de 8px au cadre ça t'évitera de mettre une marge à chaque élément. Ici tu n'as que deux mais imagine quand tu en as plus et là ça te fait déjà une ligne de moins.

.pitit et .info encore deux div mais pourquoi ? Avoue que tu le fais exprès /pan.
Pour bien centrer verticalement le texte tu peux soit utiliser un padding et donc au lieu du margin-top: 5px dans info tu mets un padding-top dans .pitit. Sinon tu peux utiliser la propriété line-height (littéralement interligne), celle-ci doit avoir la valeur de la hauteur de ton bloc. Attention par contre ça ne fonctionne pas si tu as plusieurs lignes parce que comme c'est un interligne tu auras la première ligne au centre mais les autres à exactement la même distance, very far away :p

Un peu plus loin on a la div cadre autour de boite1, encore une div dont on va se débarasser grâce à la propriété magique "outline" littéralement line externe et qui fonctionne comme un border avec trois petites différences.
- une bordure fait partie de la largeur et hauteur d'un bloc, outline se place à l'extérieur :

- On peut définir à quel distance sera l'outline avec la propriété outline-offset, quand c'est positif c'est plus loin de la bordure et quand c'est négatif c'est une bordure à l'intérieur comme dans le cas de notre schéma.
on aura un truc du genre :

Code:

outline: 1px solid black;
outline-offset: -5px;

- La troisième particularité de l'outline c'est qu'il est toujours rectangulaire, donc une propriété comme le border-radius n'existe pas pour l'outline et donc si notre bloc est rond, c'est mort, on va devoir utiliser deux div comme tu aimes :p

Retournons à notre petite fiche. Alors toujours dans la boite1, ça m'étonne que tu aies utilisé des span et pas des div *sort les feux d'artifices*
mais en fait, ironiquement des div t'auraient éviter de mettre deux fois br, la div te garanti un saut de ligne et la gestion de l'espace entre les textes avec margin. Ceci dit, c'est quand même une fiche qui sera utilisée dans le message d'un forum et donc "entrer" fera très bien l'affaire. Donc les span c'est bien :p

La boite2, C'est moi ou il y a trois div ? *recompte* nan c'est trois div *meurt*
Alors là le flex ça sert strictement à rien. Tu peux supprimer le CSS de colonne et tu me diras si tu vois une différence.
Dans le schéma le dernier avatar dépasse la partie rouge et se superpose à la barre noire. Il suffit donc d'augmenter la largeur du bloc qui entoure les trois bloc (ici display). Donc pour changer uniquement la deuxième ligne vu que la line des liens est aussi appelé display tu peux soit changer de nom à la deuxième ou sélectionner le deuxième display de la sorte :

Code:

.display + .display {
  width: 500px;
}

+ veut dire "qui suit", donc là uniquement le display qui suit un autre display sera affecté.

Les images membres du mois et rpg du mois sont des avatars et pas des décorations, donc il est préférable de les mettre dans le HTML et non en background. Faire la distinction entre image décorative et image en rapport avec le contenu permet à ton code d'être accessible aux non-voyants.

Voilà voilà j'espère que mes remarques t'aideront à progresser et que tu t'es amusée en me lisant :p

Et oui c'est encore moi
Voilà mon résultat pour ce schéma bien sympathique ! J'ai choisi de le faire en iframe comme c'est une fiche de pub, du coup le css est direct dans le HTML, mais je le mets en détail quand même pour que ce soit plus simple o/


Le HTML :

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="fichePB2.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
    <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=Oswald:wght@300;400;500&display=swap" rel="stylesheet">
    <title>Fiche PB2 : Exercice 12</title>
    <style>
.fichePB2 {
    width: 460px;
    height: 500px;
    background: url(https://zupimages.net/up/23/11/08a5.png);
    font: 12px roboto, sans-serif;
    border-right: 40px solid #2f2c51;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
      
.fichePB2 p::-webkit-scrollbar {
    width: 5px;
}

.fichePB2 p::-webkit-scrollbar-thumb {
    background: #2f2c51;
}

.fichePB2 p::-webkit-scrollbar-track {
    background: transparent;
}

.fichePB2 p, .contxPB2, .fichePB2 h2 a {
    background-color: #ffffff99;
    outline: 1px solid #2f2c51;
    outline-offset: -5px;
}

.fichePB2 span, .fichePB2 h2 a, .titrePB2 h1, .linksPB2 a {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.fichePB2 h1, .fichePB2 h2, .fichePB2 h2 a, .fichePB2 p {
    margin: 0;
}

.infimgPB2, .linksPB2 {
    padding-left: 10px;
}

.fichePB2 a, .titrePB2 h1, .infosPB2 p, .imgPB2 div {
    transition: all 0.8s ease-in-out;
}
      
.contxPB2 p, .titrePB2 p {
    background: none;
    outline: none;
}

.fichePB2 span {
    font-size: 15px;
    color: #2f2c51;
}

.fichePB2 a {
    color: #2f2c51;
    text-decoration: none;
}

.fichePB2 a:hover, .titrePB2 h1:hover {
    letter-spacing: 2px;
}

.titrePB2 {
    width: 101%;
    padding: 5px 0;
    border: 1px solid #2f2c51;
}

.titrePB2 h1 {
    padding: 0 8px;
    font-size: 25px;
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 0px #030614;
    line-height: 1;
}

.titrePB2 p {
    padding: 0 20px;
    font-size: 14px;
    text-transform: lowercase;
    color: #00000099;
}

.contxPB2 {
    height: 85px;
    padding: 15px;
    margin: 0 10px 0 10px;
}

.contxPB2 p {
    height: 85px;
    padding-right: 5px;
    text-align: justify;
    overflow: auto;
    scrollbar-color: #2f2c51;
    scrollbar-width: thin;
}

.linksPB2 {
    display: flex;
    justify-content: space-between;
}

.linksPB2 a {
    padding: 0 25px;
    font-size: 18px;
    color: #fff;
    background-color: #2f2c51;
}

.infimgPB2 {
    width: 103%;
    display: flex;
    justify-content: space-between;
}

.infimgPB2 img {
    border: 1px solid #2f2c51;
}

.infosPB2 {
    position: relative;
    width: 140px;
    height: 165px;
}

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

.infosPB2:hover p {
    opacity: 1;
}

.infosPB2 p {
    position: absolute;
    top: 0;
    width: 120px;
    padding: 18px 10px;
    text-align: center;
    line-height: 12px;
    opacity: 0;
}

.imgPB2 {
    position: relative;
    display: flex;
    justify-content: center;
}

.imgPB2 img {
    width: 150px;
    height: 100%;
    object-fit: cover;
}

.imgPB2 div {
    position: absolute;
    bottom: 0;
    padding-bottom: 5px;
    opacity: 0;
}

.imgPB2:hover div {
    opacity: 1;
}

.imgPB2 div p {
    padding: 7px;
    text-align: center;
    background-color: #ffffffd9;
}

.imgPB2 div p span {
    font-size: 18px;
    line-height: 1;
    color: #2f2c51;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

.fichePB2 h2 {
    text-align: center;
    padding: 0;
}

.fichePB2 h2 a {
    padding: 0 100px;
    background-color: #ffffff70;
    font-size: 40px;
    color: #2f2c51;
}

.credPB2 {
    text-align: center;
    font-size: 10px;
    color: #fff;
    padding-bottom: 3px;
}

.credPB2 a {
    color: #7d79a9;
}
    </style>
</head>
<body>
    <div class="fichePB2">
        <div class="titrePB2">
            <h1>Nom du forum</h1>
            <p>type du forum — <b>00</b> membres — <b>0000</b> messages</p>
        </div>
        <div class="contxPB2">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <br/><br/>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        <div class="linksPB2">
            <a href="">Contexte</a>
            <a href="">Prédéfinis</a>
            <a href="">Annexes</a>
        </div>
        <div class="infimgPB2">
            <div class="infosPB2">
                <img src="https://zupimages.net/up/23/11/qorw.png" alt="img-infos-forum"/>
                <p>
                    <span>Type d'avatar :</span><br/>
                    Dessin/Manga/3D<br/><br/>
                    <span>Taille de l'Avatar :</span><br/>
                    200*400px<br/><br/>
                    <span>Min. de lignes :</span><br/>
                    RP libre<br/><br/>
                    <a href="">En savoir plus</a>
                </p>
            </div>
            <div class="imgPB2">
                <img src="https://www.zupimages.net/up/23/11/uhds.png" alt="img-membre-mois"/>
                <div>
                    <p>
                        Membre du mois<br/>
                        <span>PSEUDO</span>
                    </p>
                </div>
            </div>
            <div class="imgPB2">
                <img src="https://www.zupimages.net/up/23/11/3f6b.png" alt="img-rp-mois"/>
                <div>
                    <p>
                        RP du mois<br/>
                        <span>PSEUDO & PSEUDO</span>
                    </p>
                </div>
            </div>
        </div>
        <h2><a href="">JOIN US</a></h2>
        <div class="credPB2">sygea & void — <a href="https://www.epicode-entraide.com/">epicode</a></div>
    </div>
</body>
</html>

Le CSS :

Code:

.fichePB2 {
    width: 460px;
    height: 500px;
    background: url(https://zupimages.net/up/23/11/08a5.png);
    font: 12px roboto, sans-serif;
    border-right: 40px solid #2f2c51;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
      
.fichePB2 p::-webkit-scrollbar {
    width: 5px;
}

.fichePB2 p::-webkit-scrollbar-thumb {
    background: #2f2c51;
}

.fichePB2 p::-webkit-scrollbar-track {
    background: transparent;
}

.fichePB2 p, .contxPB2, .fichePB2 h2 a {
    background-color: #ffffff99;
    outline: 1px solid #2f2c51;
    outline-offset: -5px;
}

.fichePB2 span, .fichePB2 h2 a, .titrePB2 h1, .linksPB2 a {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.fichePB2 h1, .fichePB2 h2, .fichePB2 h2 a, .fichePB2 p {
    margin: 0;
}

.infimgPB2, .linksPB2 {
    padding-left: 10px;
}

.fichePB2 a, .titrePB2 h1, .infosPB2 p, .imgPB2 div {
    transition: all 0.8s ease-in-out;
}
      
.contxPB2 p, .titrePB2 p {
    background: none;
    outline: none;
}

.fichePB2 span {
    font-size: 15px;
    color: #2f2c51;
}

.fichePB2 a {
    color: #2f2c51;
    text-decoration: none;
}

.fichePB2 a:hover, .titrePB2 h1:hover {
    letter-spacing: 2px;
}

.titrePB2 {
    width: 101%;
    padding: 5px 0;
    border: 1px solid #2f2c51;
}

.titrePB2 h1 {
    padding: 0 8px;
    font-size: 25px;
    color: #fff;
    font-weight: 500;
    text-shadow: 1px 1px 0px #030614;
    line-height: 1;
}

.titrePB2 p {
    padding: 0 20px;
    font-size: 14px;
    text-transform: lowercase;
    color: #00000099;
}

.contxPB2 {
    height: 85px;
    padding: 15px;
    margin: 0 10px 0 10px;
}

.contxPB2 p {
    height: 85px;
    padding-right: 5px;
    text-align: justify;
    overflow: auto;
    scrollbar-color: #2f2c51;
    scrollbar-width: thin;
}

.linksPB2 {
    display: flex;
    justify-content: space-between;
}

.linksPB2 a {
    padding: 0 25px;
    font-size: 18px;
    color: #fff;
    background-color: #2f2c51;
}

.infimgPB2 {
    width: 103%;
    display: flex;
    justify-content: space-between;
}

.infimgPB2 img {
    border: 1px solid #2f2c51;
}

.infosPB2 {
    position: relative;
    width: 140px;
    height: 165px;
}

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

.infosPB2:hover p {
    opacity: 1;
}

.infosPB2 p {
    position: absolute;
    top: 0;
    width: 120px;
    padding: 18px 10px;
    text-align: center;
    line-height: 12px;
    opacity: 0;
}

.imgPB2 {
    position: relative;
    display: flex;
    justify-content: center;
}

.imgPB2 img {
    width: 150px;
    height: 100%;
    object-fit: cover;
}

.imgPB2 div {
    position: absolute;
    bottom: 0;
    padding-bottom: 5px;
    opacity: 0;
}

.imgPB2:hover div {
    opacity: 1;
}

.imgPB2 div p {
    padding: 7px;
    text-align: center;
    background-color: #ffffffd9;
}

.imgPB2 div p span {
    font-size: 18px;
    line-height: 1;
    color: #2f2c51;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

.fichePB2 h2 {
    text-align: center;
    padding: 0;
}

.fichePB2 h2 a {
    padding: 0 100px;
    background-color: #ffffff70;
    font-size: 40px;
    color: #2f2c51;
}

.credPB2 {
    text-align: center;
    font-size: 10px;
    color: #fff;
    padding-bottom: 3px;
}

.credPB2 a {
    color: #7d79a9;
}