Cette fiche s'accorde avec la fiche de présentation suivante : clic

HTML

Code:

<div class="fichepreskom scenar"><div class="gifnom firstgif"><h1>Prénom Nom</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>
<strong>Caractère :</strong> En mots clés
<strong>Avatar (uniquement proposé, pas obligatoire du tout) : </strong></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!"</div></div>
<div class="horsjeukom"><div class="hjright"><h3>Prénom Nom</h3><img src="https://i.servimg.com/u/f30/19/45/51/53/tomhid18.jpg"></div><div class="hjleft"><strong>Nom du lien</strong>
résumez le lien avec le personnage ici, blablablablabla</div></div>
<div class="codekom"><h2>Possible évolution</h2>
<div>Noter tout ce que le personnage peut devenir, des idées d'éventuels liens, de rps, de trucs
</div></div></div>

CSS

Si vous avez déjà pris la fiche de présentation qui va avec cette fiche de prédef, vous avez juste ce bout de code à prendre :

Code:

/* Fiche scenario */

.fichepreskom.scenar .gifnom img, .fichepreskom.scenar .gifnom{ height:150px; }
.fichepreskom.scenar .gifnom.firstgif{ height:50px; }
.fichepreskom.scenar .contentstory{ height:250px; }
.fichepreskom.scenar .hjleft{ height:100px; }
.fichepreskom.scenar .hjright img{ height:67px; }

Sinon, prenez donc le code entier :

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; }

/* Fiche scenario */

.fichepreskom.scenar .gifnom img, .fichepreskom.scenar .gifnom{ height:150px; }
.fichepreskom.scenar .gifnom.firstgif{ height:50px; }
.fichepreskom.scenar .contentstory{ height:250px; }
.fichepreskom.scenar .hjleft{ height:100px; }
.fichepreskom.scenar .hjright img{ height:67px; }