HTML 1er POST

Code:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
<div class="contenu"><div class="prenom"> Prénom Nom  <libre>Libre</libre></div><div class="interieur"><div class="haut"><img src="https://images2.imgbox.com/f5/1b/ximQTeCr_o.png"class="img"> <div class="texte"><aa>PRÉNOM NOM ❀</aa>  écrire ici <aa>AGE ❀</aa> écrire ici   <aa>GROUPE ❀</aa> écrire ici <aa>ORIENTATION ❀</aa>  écrire ici  <aa>PARTICULARITÉ ❀</aa> écrire ici <aa>RACE ❀</aa>  écrire ici  <aa>STATUT ❀</aa> écrire ici  <aa>MÉTIER / RANG ❀</aa>  écrire ici  <aa>NATIONALITÉ ❀</aa> écrire ici  <aa>AVATAR + CREDIT ❀</aa> Célébrité @crédit  / Célébrité @crédit <aa>Caractère ❀</aa> caractère, + caractère, + caractère, + caractère, + caractère, + caractère, +</div> <img src="https://images2.imgbox.com/f5/1b/ximQTeCr_o.png"class="img">
</div><div class="titre">Once upon a time</div><div class="histoire"><img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons"> <img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons">
<aa>+</aa> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt ipsum sit amet sapien pellentesque id porta magna ullamcorper. Praesent ultrices sapien ac ligula condimentum accumsan. Nulla vel neque in nisi cursus pretium non et mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lacinia dolor sed enim dignissim sed fermentum neque eleifend. Cras laoreet rhoncus eros at molestie. Fusce purus neque, dapibus id vehicula vel, aliquam ac massa. Nam venenatis eleifend magna mattis vestibulum. Ut suscipit dignissim tortor, in sodales est hendrerit quis. Vestibulum cursus quam eget justo tempus lacinia. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Pellentesque congue sollicitudin ante, sit amet convallis arcu commodo eget. Fusce hendrerit posuere varius. Suspendisse sit amet tristique est.
</div> <div class="ligne"></div> <img src="https://images2.imgbox.com/d6/96/vVUrNosD_o.png"style="height:100px;float:left;padding-top:5px;"><div class="pseudo"><center><aa> Prénom Nom</aa> </center>
Ici ecrire le lien avec le personnage Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. </div>
<img src="https://images2.imgbox.com/d6/96/vVUrNosD_o.png"style="height:100px;float:left;padding-top:3px;"><div class="pseudo"><center><aa> Prénom Nom</aa> </center>
Ici ecrire le lien avec le personnage Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. </div>
<img src="https://images2.imgbox.com/d6/96/vVUrNosD_o.png"style="height:100px;float:left;padding-top:3px;"><div class="pseudo"><center><aa> Prénom Nom</aa> </center>
Ici ecrire le lien avec le personnage Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. </div>
<img src="https://images2.imgbox.com/d6/96/vVUrNosD_o.png"style="height:100px;float:left;padding-top:3px;"><div class="pseudo"><center><aa> Prénom Nom</aa> </center>
Ici ecrire le lien avec le personnage Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. </div>
</div><div class="credit">@PrettyGirl</div></div>

HTML 2nd POST (ATTENTES)

Code:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
<div class="contenu"><div class="titre">Les attentes</div><div class="attentes"><img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons"> <img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt ipsum sit amet sapien pellentesque id porta magna ullamcorper. Praesent ultrices sapien ac ligula condimentum accumsan. Nulla vel neque in nisi cursus pretium non et mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lacinia dolor sed enim dignissim sed fermentum neque eleifend. Cras laoreet rhoncus eros at molestie. Fusce purus neque, dapibus id vehicula vel, aliquam ac massa. Nam venenatis eleifend magna mattis vestibulum. Ut suscipit dignissim tortor, in sodales est hendrerit quis. Vestibulum cursus quam eget justo tempus lacinia. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Pellentesque congue sollicitudin ante, sit amet convallis arcu commodo eget. Fusce hendrerit posuere varius. Suspendisse sit amet tristique est.
</div><div class="credit">@PrettyGirl</div></div>

CSS

Code:

/**------------------------Fiche de présentation Pretty Girl--------------------------------**/

.contenu {width: 475px; margin: auto; border: 1px solid #eee; padding: 10px;
overflow: auto;background-color:#BDBDBD;} /*attention aux informations inutiles qui polue le code il faut enlever 3 erreurs en tout*/
 
.prenom{font-size:25px;font-family: 'Open Sans Condensed', sans-serif;padding:10px;margin:1px;writing-mode:vertical-lr;float:right;height:525px;width:20px;}/*a quoi sert ce code ?*/

.prenom2{font-size:25px;font-family:'Open Sans Condensed',sans-serif;padding:10px;margin:1px;writing-mode:vertical-lr;float:right;height:680px;width:20px;background:linear-gradient(45deg, #DEDEDE, #ab2e37);text-align:justify;}

.interieur{width:430px;}

.haut{height:180px;display:flex;}

.img{float:left; height:160px; width:100px; border-radius: 20px 3px 3px 3px;object-fit:cover;} /*object-fit:cover permet de faire en sorte que l'image ne soit pas déformé et respecte la taille donnée, tu aurais pu faire autrement que faire une classe image ça prend de la place inutilement*/

.texte{color:black;width:21Opx;height:150px;overflow:auto; margin: 5px;padding: 1px; font-size:12px;float:left;text-align:justify;}/*attention aux informations inutiles qui polue le code il faut enlever 1 erreur en tout*/


.titre{font-size:15px;height:25px;font-family: 'Open Sans Condensed', sans-serif;text-align:center;background:linear-gradient(45deg, #DEDEDE, #ab2e37);height: auto;padding:2px;text-transform:uppercase;
}
 
.icons{width: 60px;height:60px;float:right;padding: 5px;border-radius:60px;}

.icons2{width:50px;height:50px;float:left;padding:5px;border-radius:50px;}

.histoire{max-height: 200px; text-align: justify;overflow:auto;padding:5px;margin-top:10px;}

.caractere{max-height:120px; text-align:justify;overflow:auto;padding:5px;margin-top:10px;}

.ligne {text-align:center;background:#ab2e37;height: 0.5px;margin-top: 10px;padding:2px;}

.pseudo {max-height:80px;padding:10px;text-align: justify;overflow:auto;margin-top:5px;}

.credit {text-align:center;font-size:8px;}

  .attentes{text-align: justify;padding:5px;margin-top:10px;}