Cette fiche de présentation, est associée avec une fiche de prédéfini/scénario qui se trouve ici : clic
Ce code de fiche de présentation permet de faire un survol à l'avatar, et sinon d'être très simple de base

HTML

Code:

<div class="prespart"><div class="pres0"><div class="pres1"><img src="https://i.servimg.com/u/f30/19/45/51/53/tobias17.jpg"><div><h1>Prénom Nom</h1>
<h2>ft. Nom de l'avatar</h2>
<strong>Date et lieu de naissance :</strong> blablabla
<strong>Groupe :</strong> blablabla
<strong>Orientation sexuelle / Genre :</strong> blablabla</div></div><div class="pres2"><h3>Petites infos sur toi</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla risus, tempus a ullamcorper vel, vulputate nec augue. Aenean nunc tortor, aliquet et suscipit ac, vestibulum eu quam. Nam vel dui mauris. Aenean commodo odio libero, in semper lectus pretium vitae. Donec nisi dolor, porttitor id molestie sed, volutpat et ante. Cras pellentesque leo sit amet turpis viverra venenatis. Nunc velit sem, dictum eget augue id, rutrum rutrum arcu. Etiam id ultricies nibh, at rhoncus velit. Phasellus quis tortor a leo volutpat cursus sit amet in dui. Vestibulum tincidunt elit a mi ultricies, sit amet pellentesque lectus faucibus. Duis ipsum orci, convallis tincidunt turpis in, posuere facilisis augue. Duis vestibulum, nunc et aliquet consectetur, nisi turpis molestie justo, a volutpat justo metus eget augue.

Curabitur non varius est, sed auctor leo. Nullam volutpat metus in purus laoreet feugiat. Nulla pulvinar feugiat metus tristique scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus tellus ut nibh consectetur pretium. Duis tortor magna, lobortis sit amet porttitor a, dapibus et leo. Sed elementum felis sit amet eros suscipit, non ultricies ligula condimentum. Morbi sit amet imperdiet tellus, facilisis suscipit est. Suspendisse velit nisi, aliquam eu lacus vel, sodales hendrerit leo. Mauris pulvinar hendrerit magna eget convallis. Nam eget tortor ex. Ut lacinia diam tortor. Donec et felis velit. Proin porttitor dolor a dui euismod, id finibus dolor sodales. Fusce vel euismod velit, at efficitur lacus. Maecenas interdum mollis tristique.</span></div></div>
<div class="pres3"><h3>Ton caractère</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla risus, tempus a ullamcorper vel, vulputate nec augue. Aenean nunc tortor, aliquet et suscipit ac, vestibulum eu quam. Nam vel dui mauris. Aenean commodo odio libero, in semper lectus pretium vitae. Donec nisi dolor, porttitor id molestie sed, volutpat et ante. Cras pellentesque leo sit amet turpis viverra venenatis. Nunc velit sem, dictum eget augue id, rutrum rutrum arcu. Etiam id ultricies nibh, at rhoncus velit. Phasellus quis tortor a leo volutpat cursus sit amet in dui. Vestibulum tincidunt elit a mi ultricies, sit amet pellentesque lectus faucibus. Duis ipsum orci, convallis tincidunt turpis in, posuere facilisis augue. Duis vestibulum, nunc et aliquet consectetur, nisi turpis molestie justo, a volutpat justo metus eget augue.

Curabitur non varius est, sed auctor leo. Nullam volutpat metus in purus laoreet feugiat. Nulla pulvinar feugiat metus tristique scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus tellus ut nibh consectetur pretium. Duis tortor magna, lobortis sit amet porttitor a, dapibus et leo. Sed elementum felis sit amet eros suscipit, non ultricies ligula condimentum. Morbi sit amet imperdiet tellus, facilisis suscipit est. Suspendisse velit nisi, aliquam eu lacus vel, sodales hendrerit leo. Mauris pulvinar hendrerit magna eget convallis. Nam eget tortor ex. Ut lacinia diam tortor. Donec et felis velit. Proin porttitor dolor a dui euismod, id finibus dolor sodales. Fusce vel euismod velit, at efficitur lacus. Maecenas interdum mollis tristique.</span></div><div class="pres4"><h3>Ton histoire</h3><span><img src="https://www.zupimages.net/up/19/50/47hk.gif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla risus, tempus a ullamcorper vel, vulputate nec augue. Aenean nunc tortor, aliquet et suscipit ac, vestibulum eu quam. Nam vel dui mauris. Aenean commodo odio libero, in semper lectus pretium vitae. Donec nisi dolor, porttitor id molestie sed, volutpat et ante. Cras pellentesque leo sit amet turpis viverra venenatis. Nunc velit sem, dictum eget augue id, rutrum rutrum arcu. Etiam id ultricies nibh, at rhoncus velit. Phasellus quis tortor a leo volutpat cursus sit amet in dui. Vestibulum tincidunt elit a mi ultricies, sit amet pellentesque lectus faucibus. Duis ipsum orci, convallis tincidunt turpis in, posuere facilisis augue. Duis vestibulum, nunc et aliquet consectetur, nisi turpis molestie justo, a volutpat justo metus eget augue.

Curabitur non varius est, sed auctor leo. Nullam volutpat metus in purus laoreet feugiat. Nulla pulvinar feugiat metus tristique scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus tellus ut nibh consectetur pretium. Duis tortor magna, lobortis sit amet porttitor a, dapibus et leo. Sed elementum felis sit amet eros suscipit, non ultricies ligula condimentum. Morbi sit amet imperdiet tellus, facilisis suscipit est. Suspendisse velit nisi, aliquam eu lacus vel, sodales hendrerit leo. Mauris pulvinar hendrerit magna eget convallis. Nam eget tortor ex. Ut lacinia diam tortor. Donec et felis velit. Proin porttitor dolor a dui euismod, id finibus dolor sodales. Fusce vel euismod velit, at efficitur lacus. Maecenas interdum mollis tristique.</span></div><div class="pres5"><img src="https://i.servimg.com/u/f30/19/45/51/53/donald10.png"><div><strong> Pseudo :</strong> Bleh
<strong>Âge :</strong> Blouh
<strong>Comment as-tu connu le forum ?</strong> bloh
<strong>Autre chose à dire ?</strong> trolololo</div></div></div>

CSS

Les couleurs sont modifiables dans le root. Sinon vous pouvez juste modifier var(--main-color) par #e3e3e3 par exemple !

Code:

/* Fiche de pres */

:root{
  --main-color:#555;
  --snd-color:#fff;
  --third-color:#888;
  --four-color:#FCC5A0;
  --five-color:#F28977;
  --five-v-color:#FAC0B6;
  --six-color:#B9919A;
    --six-v-color:#DAC5CA;
  
  --font1: 'Source Sans Pro', sans-serif;
  --font2:'Playfair Display', serif;
}
/* Fiche de présentation par Koala Volant */

.prespart{ width:80%; margin:0 auto; color:var(--main-color); }
.prespart *{ box-sizing:border-box;}

.pres0{ display:flex; justify-content:space-between; align-items:center;}
.prespart strong{ color:var(--six-color); font-family:var(--font2); font-size:13px; }
.prespart h3{ text-align:center; padding:5px; color:var(--snd-color); font-family:var(--font1); font-size:12px; letter-spacing:3px; font-weight:normal; width:100%;  background:var(--main-color);}

/* Identité */

.pres1, .pres1 img, .pres1 div{ min-width:230px; max-width:230px; min-height:368px; }
.pres1{ position:relative; overflow:hidden; }
.pres1 img{ position:relative; top:0; left:0; z-index:888; padding:3px; border:1px solid var(--four-color);  }
.pres1 div{ position:absolute; top:0px; left:-230px; transition:800ms; z-index:999; padding:10px; text-align:justify; background-color:var(--snd-color); overflow:auto; max-height:368px; }
.pres1:hover div{ left:0;}
.pres1 div h1{ font-family:var(--font1); letter-spacing:1px; color:var(--main-color); text-align:center; font-size:22px; line-height:24px; text-transform:uppercase; margin:0px; }
.pres1 div h2{ font-family:var(--font2); color:var(--five-color); font-size:12px; line-height:16px; margin:0px; text-align:center; position:relative; top:-15px; }

/* Petites infos */

.pres2 span{ width:100%; display:block; padding:15px; text-align:justify; background-color:var(--snd-color); max-height:220px; overflow:auto; border:1px solid var(--six-color); }

/* Caractère */

.pres3 span{ width:100%; display:block; padding:15px; text-align:justify; background-color:var(--snd-color); border:1px solid var(--six-color); }

/* Histoire */

.pres4 span{ width:100%; display:block; padding:15px; text-align:justify; background-color:var(--snd-color); border:1px solid var(--six-color); max-height:400px; overflow:auto; }
.pres4 img{ width:120px; height:90px; object-fit:cover; margin:5px; float:left; }

/* Hors Jeu */

.pres5{ display:flex; justify-content:space-between; align-items:center; flex-direction:row-reverse; margin-top:20px; }
.pres5 img{ min-width:100px; max-width:100px; max-height:100px; min-height:100px; object-fit:cover; padding:3px; border:1px solid var(--five-color); }
.pres5 div{ max-width:78%; max-height:170px; padding:10px; overflow:auto; background-color:var(--snd-color); border:1px solid var(--six-color); }