Vous pouvez modifier les couleurs comme il vous plaît et les noms des parties également.
Cette fiche a déjà été utilisé pour un forum, aussi le screen le représente mais le texte du html a déjà été modifié.
Vous pouvez enlever la partie "Questions/Anecdotes" juste en enlevant toute la div "part-2"

POUR LA FICHE DE SCENARIOS C'EST ICI : Clique là ;)

HTML

Code:

<div class="fiche-pres"><div class="part1"><div class="gif1"><img src="https://66.media.tumblr.com/b88cf2bb98633b94ada8c735c850dd77/tumblr_inline_ntxjpdrLjN1qlt39u_250.gif"><span>Nom </span></div><div class="cont"><h2>Identité</h2><p>[b]Nom complet :[/b] Si votre nom dépasse les limites de celui qu'on peux donner sur un forum
[b]Surnom :[/b] C'est quoi le petit nom qu'on vous donne ?
[b]Âge :[/b]
[b]Métier / Etudes :[/b] Facultatif mais bien pour gagner quelque chose
[b]Origines :[/b] D'où venez vous ?
[b]Groupe :[/b] Mais du coup c'est quoi votre groupe ?
[b]Orientation sexuelle / Genre :[/b] Hétéro ? Asexuel ? Xénogenre ?
[b]Avatar[/b] S'il est précis merci de le préciser </p></div></div>
<!-- Partie questions / anecdotes --><div class="part2"><div><h2>Questions / Anecdotes</h2><p>Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!"</p></div></div><!-- Fin de la partie questions / anecdotes -->
<div class="part3"><div><h2>Caractère</h2><p class="bloc">Décrivez nous votre personnalité en minimum 150 mots, vous pouvez aussi y mettre des anecdotes</p></div><div class="entredeux1"></div><div><h2>Pouvoirs / Anecdotes</h2><p class="bloc">Décrivez nous vos capacités spéciales en un minimum de 100 mots</p></div></div>
<div class="part4"><h2>Histoire
<em>Citation</em></h2><div class="img-story"><img src="https://66.media.tumblr.com/a4e19680523df38cbc265001335e367d/tumblr_inline_ocueb0Lpht1tzutmw_250.gif"><div class="entredeux2"></div><img src="https://66.media.tumblr.com/2f0835c3cceab013e6115456d8d51345/tumblr_inline_ocueclKvhh1tzutmw_250.gif"></div><div class="story">Votre histoire en 300 mots minimum !</div></div>
<div class="part5"><div class="bloc hrp">[b]Votre âge :[/b]
[b]Comment avez vous connu le forum ? [/b]
[b]Présentez vous un peu : [/b]
[b]Un petit mot ?[/b]</div><div class="hrp-2"><h2>Hors RP
<em>Votre pseudo</em></h2><img src="https://66.media.tumblr.com/661e43ba7e03818361b55dbcbe6c24be/tumblr_inline_p7yezf6aC91r5tdn1_250.gif"></div></div>
</div>

CSS

Code:

/* Fiche de présentation ****/

:root{
  --fiche1-color:#ff7b00;
}

.fiche-pres{
  width:550px;
  margin:0 auto;
  background-color:#fff;
}

.fiche-pres *{
  box-sizing:border-box;
}

/* H2 */

.fiche-pres h2{
  font-family: 'Oswald', sans-serif;
  font-size:24px;
  line-height:29px;
  text-transform:uppercase;
  margin:0;
  color:var(--fiche1-color);
  border-bottom:var(--fiche1-color) 2px solid;
  letter-spacing:5px;
  text-align:center;
}

.fiche-pres strong{
  color:var(--fiche1-color);
}

/* Display flex */
.part1{
  display:flex;
}

/* Images */
.part1 img,.part4 img, .part5 img, .partpv img{
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
  border:var(--fiche1-color) 3px solid;
    object-fit:cover;
  display:block;
}

/* Partie 1 */

.part1{ padding:15px; }
.part1 img{
  width:225px;
  height:225px;
}

.part1 .gif1{
  position:relative;
  display: flex;
    justify-content: center;
  align-items:center;
}

.part1 span{
  display:block;
  background-color:var(--fiche1-color);
  padding:10px;
  position:absolute;
  width:100%;
  color:#fff;
    font-family: 'Oswald', sans-serif;
  font-size:21px; line-height:18px;
      width: 97%;
    text-align: center;
    opacity: 0.7;
}

.part1 .cont{
  width:325px;
  height:200px;
}

.part1 p{
  display:block;
  padding:15px;
  overflow:auto;
  height:175px;
}

.part1 h2{ text-align:center; letter-spacing:0px;}

/*** Partie 2 ******/

.part2{
  background-image:url('https://i.servimg.com/u/f30/19/45/51/53/_a7a3a10.png');
  background-attachment:fixed;
  width:100%;
  padding:30px;
}

.part2 h2{ text-align:center; }

.part2 div{
  background-color:rgb(255, 255, 255);
  opacity:0.9;
  padding:15px;
}

.part2 p, .part2 h2{
  opacity:1;
  display:block;
}

/*** Partie 3 ****/

.part3{
  display:flex;
  justify-content:space-around;
  padding:15px;
}

.part3 h2{
  border:none;
  text-align:center;
}

.part3 p{
  padding:10px;
  height:270px;
  overflow:auto;
  text-align:justify;
  width:250px;
}

.part3 .entredeux1{
      height: 100px;
    background-color: var(--fiche1-color);
    width: 40px;
    margin-top: 126px;
      -moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}



/*** Partie 4 ****/

.part4{
  padding:15px;
  display:flex;
  position:relative;
      flex-wrap: wrap;
}

.part4 h2{
  width:100%; text-align:center; border:none;
}

.part4 em{ font-size:15px; line-height:16px; letter-spacing:-1px;   font-family: 'Frank Ruhl Libre', serif; color:#000; text-transform:none; margin-top:-10px;}
.part4 em:before{ content:'« '; }
.part4 em:after{ content:' »'; }
.part4 img{
  width:120px;
  height:120px;
  position:relative; z-index:13; margin:-12px 0px;
}

.part4 .entredeux2{     width: 50px;
    background-color: var(--fiche1-color);
    height: 60px;
      -moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
}

.part4 .img-story{ width:110px; display:flex; justify-content:center; flex-wrap:wrap;}
.part4 .story{ width:400px;     height: 250px;    overflow: auto;  margin-top:15px;   padding: 15px 15px 15px 40px; text-align:justify;}

/** Partie 5 ******/

.part5{ display:flex; padding:15px; }
.part5 .hrp-2{ width:120px; }
.part5 .hrp-2 img{ width:120px; height:120px; position:relative; z-index:13; }
.part5 em{ font-size:15px; line-height:16px; letter-spacing:-1px;   font-family: 'Frank Ruhl Libre', serif; color:#000; text-transform:none; margin-top:-10px;}

.part5 .hrp{     margin: 0px 15px;
  padding: 15px; }
/* Bloc */

.fiche-pres .bloc{
  overflow:auto;
  background-color:#f4f4f4;
}