<div class="profil_perso"><div class="nom_perso"><!-- NOM DU PERSONNAGE -->Prénom Nom</div><div class="avatar_perso"><!-- AVATAR DU PERSONNAGE --><img src="https://www.zupimages.net/up/18/49/1xul.png" /></div><div class="rang_perso"><!-- RANG OU TITRE -->Rang / Titre</div><div class="infos_perso"><!-- DEBUT INFORMATIONS PERSONNAGE --><span>Fiche</span> - <a href="#">ICI</a>
<span>Journal</span> - <a href="#">ICI</a>
<span>Compétences</span><div class="inventaire_contenu">Puissance : ???
Connaissances : ???
Réactivité ??
Physique ??
PM : ????
Endurance : ???.</div>
<span>Inventaire</span><div class="inventaire_contenu">Contenu de l'inventaire du personnage...</div></div><!-- FIN INFORMATIONS PERSONNAGE --></div><div class="contenu_rp"><!-- DEBUT DU RP -->

<style>.fond_pres {background: #FFFFFF; width: 500px; margin: auto; box-sizing: border-box; position: relative; font-family: Times New Roman; color: #262628;} .fond_pres ::-webkit-scrollbar {background: #000000; height: 7px; width: 7px;} .fond_pres ::-webkit-scrollbar-thumb {background: #D09F01; border-radius: 27px;} .fond_pres h2 {display: block; text-align: center; text-transform: lowercase; letter-spacing: -2px; font-size: 24px; font-family: 'Arial', sans-serif; margin: -230px 0 0 0; position: relative; color: #ffffff; } .fond_liens_cont { margin: auto; margin-top: 230px; pading: 10px; } .fond_pres h3 {font-family: 'Bigelow Rules', cursive; font-size: 24px;  text-align: center; font-weight: bold; margin: 2% 0 0 5%; color: #D09F01; } .fond_pres h3::before {background: url('https://zupimages.net/up/23/08/ehw1.png'); content: ""; width: 10px; height: 10px; display: inline-block; margin: 0 2% 0 0;} .liens_relations a {text-decoration: none; color: #d9d9d9; transition: .5s all;} .intro_relation {background: #222224; padding: 5%; width: 80%; max-height: 300px; margin: 0 auto 2%; overflow: auto; color: #ffffff; } .intro_relation span { margin-bottom: 3px; margin-left:5px; padding: 1px; text-transform: uppercase; font-weight: 900; font-size: 15px; font-family: 'Bigelow Rules', cursive; background: #D09F01; color: #000000; ); } img.image_footer {border: 5px solid #D09F01; float: left; margin: 0 3%; width: 100px; height: 100px; object-fit: cover;} .informations_footer {background: #222224; border-left: 2px solid #D09F01; padding: 2% 5%; float: left; width: 60%; height: 90px; overflow: auto; font-family: Times New Roman; color: #ffffff; } .informations_footer span {font-weight: 700; text-transform: uppercase;} .informations_footer h4 {margin: 0 0 0 2%; display: inline-block; line-height: 3;} img.image_footer.gryffondor1 { border: 5px solid #87262A; } .informations_footer.gryffondor1 { border-left: 2px solid #87262A; } .informations_footer.gryffondor1 h4 { color: #87262A; } .informations_footer.gryffondor1 span { background: #87262A; padding: 1%; } img.image_footer.poufsouffle1 { border: 5px solid #B68D01; } .informations_footer.poufsouffle { border-left: 2px solid #B68D01; } .informations_footer.poufsouffle1 h4 { color: #B68D01; } .informations_footer.poufsouffle1 span { background: #B68D01; padding: 1%; } img.image_footer.serdaigle1 { border: 5px solid #3B4B8C; } .informations_footer.serdaigle1 { border-left: 2px solid #3B4B8C; } .informations_footer.serdaigle1 h4 { color: #3B4B8C; } .informations_footer.serdaigle1 span { background: #3B4B8C; padding: 1%; } img.image_footer.serpentard1 { border: 5px solid #388553; } .informations_footer.serpentard1 { border-left: 2px solid #388553; } .informations_footer.serpentard1 h4 { color: #388553; } .informations_footer.serpentard1 span { background: #388553; padding: 1%; } img.image_footer.poudlard1 { border: 5px solid #DB9214; } .informations_footer.poudlard1 { border-left: 2px solid #DB9214; } .informations_footer.poudlard1 h4 { color: #DB9214; } .informations_footer.poudlard1 span { background: #DB9214; padding: 1%; } img.image_footer.ministere1 { border: 5px solid #693B94; } .informations_footer.ministere1 { border-left: 2px solid #693B94; } .informations_footer.ministere1 h4 { color: #693B94; } .informations_footer.ministere1 span { background: #693B94; padding: 1%; } img.image_footer.nonaffilie1 { border: 5px solid #69296B; } .informations_footer.nonaffilie1 { border-left: 2px solid #69296B; } .informations_footer.nonaffilie1 h4 { color: #69296B; } .informations_footer.nonaffilie1 span { background: #69296B; padding: 1%; } img.image_footer.moldu1 { border: 5px solid #1697A8; } .informations_footer.moldu1 { border-left: 2px solid #1697A8; } .informations_footer.moldu1 h4 { color: #1697A8; } .informations_footer.moldu1 span { background: #1697A8; padding: 1%; } a.morsmordre_credits {color: #d9d9d9; display: block; font-family: Helvetica; font-size: 10px; font-style: italic; letter-spacing: -1px; margin: 4% 0 0; text-align: center; text-decoration: none; text-transform: lowercase; padding: 0 0 1%;}</style>

<div class="fond_pres"><img src="https://zupimages.net/up/23/09/z4h6.png" class="header_pres" alt="" /><h2>Nom Prénom</h2><div class="fond_liens_cont">

<h3>Mon histoire de ma naissance à l'été 2013</h3>
<div class="intro_relation">Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.</div>

<h3>Liens recherchés</h3>
<div class="intro_relation"><span>Type</span> : Descriptions
<span>Type</span> : Descriptions
<span>Type</span> : Descriptions </div>

<h3>Mes rencontres</h3>
<img src="https://i.imgur.com/52URZXh.jpg" alt="" class="image_footer gryffondor1" /><div class="informations_footer gryffondor1"><span>Nom prénom</span> <h4>Type de relation</h4>
Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.</div>
<div class="clear"></div>

<h3>Mes notes</h3>
<div class="intro_relation">Listez ici vos cours et les notes de l'année si vous êtes élèves, sinon, supprimez la div.</div>

</div><a href="http://ls-halloween.fr/" class="morsmordre_credits">Halloween</a>
</div>


<!-- FIN DU RP --></div>
<!-- NE PAS TOUCHER CE QUI SUIT --><div style="clear: both;"></div>

<img src="https://i.imgur.com/52URZXh.jpg" alt="" class="image_footer gryffondor1" /><div class="informations_footer gryffondor1"><span>Nom prénom</span> <h4>Type de relation</h4>
Sed laeditur hic coetuum magnificus splendor levitate paucorum incondita, ubi nati sunt non reputantium, sed tamquam indulta licentia vitiis ad errores lapsorum ac lasciviam. ut enim Simonides lyricus docet, beate perfecta ratione vieturo ante alia patriam esse convenit gloriosam. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.</div>
<div class="clear"></div>