Cette fiche de présentation va avec une fiche de scénario disponible ici : clic

HTML

Code:

<div class="fichepreskom"><div class="gifnom"><img src="https://64.media.tumblr.com/54c2c93be3c9667f63cff3acd92c4ec6/7869f4e87d5b8d5a-f6/s540x810/9193b2000556cce50e92cb3c0694205f649f43bb.gifv"><h1>Alexandre Carotte Machin</h1></div>
<div class="avaident"><img src="https://i.servimg.com/u/f30/19/45/51/53/lionli10.jpg"><div><strong>Groupe & Type de créature :</strong>
<strong>Âge :</strong>
<strong>Origines :</strong>
<strong>Famille & Statut marital :</strong>
<strong>Métier / Etudes / Occupation :</strong>
<strong>Que pense-t-il en général des autres créatures ?</strong> a faire librement, s'il en pense rien, il en pense rien.</div></div>
<div class="carapouv"><div class="carakom"><h2>Caractère</h2><span>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!"

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!"</span></div><div class="pouvkom"><h2>Pouvoirs</h2><span>A faire librement, mais attention à bien lire la partie sur les créatures, à ne pas faire trop cheaté, et finalement, a donner des limites à vos pouvoirs !  

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!"

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!"</span></div></div>
<div class="storykom"><div class="gifnom"><img src="https://64.media.tumblr.com/a446c816880d24a67ab7aabfff00d669/tumblr_o45g5kJ0kA1v6l8b2o1_500.gifv"><h1>Histoire</h1></div>
<div class="contentstory">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!"

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!"

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!"

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!"</div></div>
<div class="horsjeukom"><div class="hjright"><h3>Pseudo</h3><img src="https://i.servimg.com/u/f30/19/45/51/53/tomhid18.jpg"></div><div class="hjleft"><strong>D'où viens-tu petit inconnu ?</strong>
<strong>Et où as-tu trouvé le forum ?</strong>
<strong>Et qu'est ce que tu en penses ?</strong>
<strong>Et sinon tu as quelque chose à nous dire sur toi ?</strong></div></div>
</div>

CSS

Les couleurs sont modifiables grâce au root placé au début.

Code:

/* Couleurs */

:root{
  --white:#fff;
  --grey1:#dedede;
  --grey2:#555;
  --grey3:#999;
  --grey4:#EAEAEA;
  --main-color:#547387;
  --snd-no-color:#5F748F;
  --snd-color:#847467;
  --three-color:#EE7F30;
  --four-color:#FDB508;
  --four-color-c:#ACD9EC;
  --four-color-cc:#9CA0AC;
  
    --font1:'Pacifico', cursive;
  --font2:'Montserrat', sans-serif;
  --font3:Verdana;
 
}

/* Fiche de présentation */

.fichepreskom{ width:450px; margin:0 auto; font-family:var(--font3); font-size:12px; line-height:16px; text-align:justify; }
.fichepreskom *{ box-sizing:border-box; }
.fichepreskom strong{ color:var(--main-color); font-family:var(--font2); }
.gifnom{ position:relative; width:100%; height:175px; }
.gifnom img{ width:100%; height:175px; object-fit:cover; }
.gifnom h1{ width:100%; position:absolute; bottom:-2px; font-size:18px; font-family:var(--font1); margin:0;
  padding:12px; text-align:center; clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); background-color:var(--white); color:var(--snd-color); }

.avaident{ display:flex; justify-content:space-between; }
.avaident img:first-child{ max-width:180px; height:220px; object-fit:cover; padding:3px; border:1px solid var(--snd-color); }
.avaident div{ height:220px; background-color:var(--white); color:var(--grey2); padding:10px; overflow:auto; margin-left:10px; }

.carapouv{ display:flex; justify-content:space-between; }
.carapouv div{ width:49%; }
.carapouv h2{ margin:5px 0px; color:var(--white); background-color:var(--snd-color); text-align:center; padding:5px; font-size:13px; font-family:var(--font2); }
.carapouv span{ height:240px; background-color:var(--white); padding:10px; overflow:auto; display:block; }

.contentstory{ height:350px; overflow:auto;  background-color:var(--white); padding:10px;  }

.horsjeukom{ display:flex; justify-content:space-between; align-items:center; flex-direction:row-reverse; }
.hjright{ width:100px; }
.hjright h3{ width:100px; margin:5px 0px; color:var(--white); background-color:var(--snd-color); text-align:center; padding:5px; font-size:13px; font-family:var(--font2); }
.hjright img{ width:100px; height:100px; object-fit:cover; padding:3px; border:1px solid var(--snd-color); }
.hjleft{ width:343px; margin:5px 0px; height:150px; overflow:auto;  background-color:var(--white); padding:10px; }

.codekom{ margin-top:5px; }
.codekom h2{ margin:0 auto; color:var(--white); background-color:var(--snd-color); text-align:center; padding:5px; font-size:13px; font-family:var(--font2); }
.codekom div{ background-color:var(--white); padding:10px; }