Cette fiche de présentation, à été faite de base pour un forum, mais je la propose en libre service, pour ceux qui en veulent.
De fait, bien sûr, les couleurs y sont modifiables ainsi que les typos. Vous pouvez aussi enlever les éléments qui ne vous conviennent pas.

Cette fiche de présentation s'accorde aussi avec cette fiche de scénario : clic

HTML

Code:

<div class="fichepres2"><h1>Nom Personnage</h1><h2>ft. avatar
<em>qualificatif - qualificatif - qualificatif - qualificatif - qualificatif</em></h2>
<div class="pres1"><img src="https://i.servimg.com/u/f62/11/66/37/71/thomas10.png"><span><strong>Titres :</strong> blabla
<strong>Âge :</strong> blabla
<strong>Lieu de naissance :</strong> blabla
<strong>Situation maritale :</strong> blabla
<strong>Statut du sang :</strong> blabla
<strong>Statut :</strong> blabla
<strong>Groupe :</strong> blabla</span></div>
<div class="pres2"><h3>Origins is what you're become</h3><span><img src="https://media.giphy.com/media/e10IQqRNfbeFy/giphy.gif">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper justo et eros hendrerit accumsan. Aliquam arcu tortor, faucibus congue sodales ut, egestas ac leo. Suspendisse rutrum quis nisl id commodo. Mauris et vestibulum velit. Nulla elementum sed enim id egestas. Fusce ultricies vitae lectus a viverra. Donec in lectus sed nunc sagittis mattis ut et urna. Curabitur et lorem et tellus pretium ullamcorper et ut libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.

In hac habitasse platea dictumst. Pellentesque mauris turpis, hendrerit nec dictum a, lobortis in turpis. Donec enim ex, semper vitae mi quis, dignissim laoreet justo. Quisque lorem augue, fringilla eget dignissim quis, rutrum eu elit. Nullam ultricies metus nec enim viverra porttitor. Mauris viverra porttitor justo, eget blandit eros interdum eget. Integer ac mauris eget sapien imperdiet iaculis. In at felis a felis consectetur venenatis. Praesent urna elit, interdum id ligula ut, imperdiet euismod libero. Cras urna dui, interdum et vestibulum et, hendrerit et mi. Curabitur hendrerit nunc a nisl interdum tristique. Cras nec blandit dui.</span></div>
<div class="pres3"><div class="questions"><h3>Questions</h3><span><strong>Blablablabla ?</strong>
Blablabla

<strong>Blablabla ?</strong>
Blablablabla</span></div><div class="questions"><h3>Questions</h3><span><strong>Blablablabla ?</strong>
Blablabla

<strong>Blablabla ?</strong>
Blablablabla</span></div></div>
<div class="pres4"><h3>Ton pseudo</h3><div><span><strong>Surnom/pseudo :</strong> blabla
<strong>Age</strong> blabla
<strong>Pays/Région</strong> blabla
<strong>Comment as-tu connu le forum?</strong> blabla
<strong>Un dernier mot pour la route ?</strong> blabla</span><img src="https://i.servimg.com/u/f30/19/45/51/53/alecen10.png"></div></div>
</div>

CSS

Code:

/***************** FICHE DE PRESENTATION KOALA VOLANT ******************/

.fichepres2{ width:500px; margin:0 auto; padding-top:5px; border-radius:10px; color:#6C6C6C; }
.fichepres2 *{ box-sizing:border-box; }

.fichepres2 h1{ text-align:center; font-family: 'Oswald', sans-serif; color:#000; font-size:33px; letter-spacing:3px; }
.fichepres2 h2{ text-align:center; letter-spacing:4px; font-family:Verdana; font-size:13px; font-weight:normal; color:#222; margin:0; position:relative; top:-15px; }
.fichepres2 h2 em{ letter-spacing:0px; color:#666; font-size:14px; font-style:italic; }

.fichepres2 h3{ font-family:Oswald; color:#000; font-size:20px; margin:0; letter-spacing:3px;
  border-bottom:2px solid #555; background-color:#dedede;
        border-image: url('https://i.servimg.com/u/f30/19/45/51/53/12346b10.jpg') 1 round;}

.fichepres2 strong{ font-family:Oswald; color:#285977; letter-spacing:2px; font-size:13px;}

/* Structure Blocs */

.fichepres2 .pres1 span, .fichepres2 .pres2 span, .fichepres2 .pres3 .questions span, .fichepres2 .pres3 .dragon span, .fichepres2 .pres4 span, .fichepres2 .lienpre .contentpre{ background-color:#fff; }

/* Partie Identité */
.fichepres2 .pres1{ display:flex; justify-content:space-between; }
.fichepres2 .pres1 img{ max-width:150px; max-height:240px; object-fit:cover; border:1px solid #735835; padding:3px; }
.fichepres2 .pres1 span{ width:350px; height:240px; overflow:auto; padding:15px; }

/* Partie Histoire */
.fichepres2 .pres2{ margin-top:15px; }
.fichepres2 .pres2 span img{ float:left; width:160px; height:90px; object-fit:cover; padding:3px; border:1px solid #f7eeb7; margin:10px 10px 0px 0px;  }
.fichepres2 .pres2 span{ display:block; padding:15px; height:420px; overflow:auto; text-align:justify; }

/* Partie Question & Dragons */
.fichepres2 .pres3{ display:flex; justify-content:space-between; margin-top:15px; }

/* Partie Questions */
.fichepres2 .pres3 .questions{ width:240px; }
.fichepres2 .pres3 .questions span{ display:block; height:320px; padding:10px; overflow:auto; }

/* Partie Dragons */
.fichepres2 .pres3 .dragon{ width:240px; }
.fichepres2 .pres3 .dragon span{ display:block; padding:10px; position:relative; height:320px; overflow:hidden;}
.fichepres2 .pres3 .dragon .dragoncont{ width:240px; overflow:auto; height:320px; }

/*Partie Hors Jeu */
.fichepres2 .pres4 div{ display:flex; justify-content:space-between; align-items:center; }
.fichepres2 .pres4 h3{ width:390px; }
.fichepres2 .pres4 img{ width:100px; height:100px; object-fit:cover; border:1px solid #f7eeb7; padding:4px; }
.fichepres2 .pres4 span{ height:170px; overflow:auto; padding:15px; display:block; width:390px; }

/*************** FIN FICHE DE PRESENTATION KOALA VOLANT **************/

/*********FICHE PV*******/
.fichepres2 .lienpre{ display:flex; justify-content:space-between; width:100%; }
.fichepres2 .lienpre *{ box-sizing:border-box; }
.fichepres2 .lienpre img{ width:110px; height:110px; object-fit:cover; border-radius:50%; padding:3px; border:1px solid #79B6C8; }
.fichepres2 .lienpre .imgpre{ position:relative; }
.fichepres2 .lienpre .imgpre h4{ background-color:#79B6C8; color:#222; text-align:center; padding:5px; position:absolute; top:40%; transform:translateY(-50%); opacity:0; transition:500ms; font-family:Oswald;
  font-size:11px; line-height:12px; min-width:100%; max-width:100%;  }
.fichepres2 .lienpre:hover .imgpre h4{ opacity:1;}
.fichepres2 .lienpre .contentpre{ color:#222; padding:10px; height:110px; overflow:auto; line-height:17px;}