Fiche à utiliser

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"><div class="tourfiche"><div class="imagefiche" style="background-image:url('URL de l'image ici ');"><span class="nomprenompres">Nom et Prénom</span><span class="citationfichepres">Citation ici</span><div class="presentationperso"><div class="itemfiche"><span class="titreitem">nom : </span><span class="texteitem">Écrire ici</span></div><div class="itemfiche"><span class="titreitem">prénom : </span><span class="texteitem">Écrire ici</span></div><div class="itemfiche"><span class="titreitem">âge : </span><span class="texteitem">Écrire ici</span></div><div class="itemfiche"><span class="titreitem">orientation : </span><span class="texteitem">Écrire ici </span></div><div class="itemfiche"><span class="titreitem">statut : </span><span class="texteitem">Écrire ici</span></div><div class="itemfiche"><span class="titreitem">groupe : </span><span class="texteitem">Écrire ici</span></div><div class="itemfiche"><span class="titreitem">Feat : </span><span class="texteitem">Écrire ici</span></div><div class="itemfiche"><span class="titreitem">emploi : </span><span class="texteitem">Écrire ici</span></div></div></div></div><div class="biografiche">[b]Point important de l'histoire[/b]
Écrire ici : Sous forme de liste ou de texte.

</div><div class="lookfor"><span class="titreitem">Pouvoirs</span>en tant que Écrire les pouvoir ici


<span class="titreitem">Lien </span>Écrire ici </div><div class="toknow"><div class="knowimage" style="background-image:url('URL de l'avatar ici');"><div class="texteknow">L'avatar du personnage est laissé en libre choix.</div></div></div><div class="exordium">code by EXORDIUM. - image by tumblr - avatar by praimfaya</div>

<style>.tourfiche {width:500px;padding:5px;border:1px solid #ddd;background-color:white;} .imagefiche {width:500px;height:250px;background-position:center center;background-size:cover;opacity:1;position:relative;overflow:hidden;} .imagefiche>span {display:block;width:300px;height:20px;text-align:center;font-family: 'Roboto Slab', serif;text-transform:uppercase;line-height:20px;position:absolute;} .nomprenompres {background-color:white;color:black;top:100px;left:100px;font-size:12px;font-weight:bold;letter-spacing:3px;transition:2s;} .citationfichepres {top:125px;left:100px;color:white;font-size:12px;letter-spacing:5px;text-shadow: 1px 1px 1px #000;transition:2s;} .imagefiche:hover>.nomprenompres {left:-500px;} .imagefiche:hover>.citationfichepres {left:600px;} .presentationperso {width:200px;background-color:white;position:absolute;right:-300px;top:17px;height:215px;transition:2s;line-height:15px;} .itemfiche {border-bottom:1px solid black;padding:5px;} .titreitem {font-family: 'Roboto Slab', serif;text-transform:uppercase;color:black;font-size:12px;font-weight:bold;letter-spacing:2px;} .texteitem {font-family:arial;font-size:12px;color:#999;} .imagefiche:hover>.presentationperso {right:15px;} .biografiche {width:490px;background-color:white;padding:10px;border:1px solid #ddd;font-family:arial;text-align:justify;color:#999;font-size:11px;line-height:12px;margin-top:5px;} .lookfor, .toknow {display:inline-block;height:180px;border:1px solid #ddd;vertical-align:top;margin-top:5px;padding:10px;} .lookfor {width:360px;background-color:white;overflow:auto;text-align:justify;color:#999;font-size:11px;line-height:12px;font-family:arial;} .lookfor>.titreitem {display:block;margin-bottom:2px;} .toknow {width:113px;margin-left:5px;padding:5px;height:190px;background-color:white;} .knowimage {width:113px;height:190px;background-position:center center;background-size:cover;position:relative;} .texteknow {width:103px;height:180px;background-color:white;overflow:auto;position:absolute;top:5px;left:5px;text-align:justify;font-family:arial;font-size:11px;line-height:12px;color:#999;opacity:0;transition:1s;} .knowimage:hover>.texteknow {opacity:0.8;} .exordium {font-family:arial;font-size:8px;color:#aaa;width:500px;text-align:center;margin-top:5px;padding:5px;border:1px solid #ddd;text-transform:uppercase;letter-spacing:2px;background-color:white;}</style>

<div class="administration"><div class="entete"><h2></h2><h3>




</h3></div><div class="contenu">

<h4>Quelques explications sur le scénario</h4>

Écrire ici
</div></div>