Voici un codage mit à votre disposition pour la gestion. Il contient de base les sections obligatoire et plus encore. Vous pouvez retirer les sections non-obligatoire ou en ajouter. Vous pouvez aussi altérer les couleurs ou l'ordre des sections. Laisser toutefois le crédit.

Fiche :

Code:

<center><div class="Titre">Prénom N. Nom</div>
<div class="Entete General ">
<div style="background-image: url(https://i.servimg.com/u/f87/20/47/71/97/cadre110.png); width:560px; height:300px;margin-top:28px;"></div><div class="Img"><img src="LIEN VAVA" /></div>
<div class="TitreSect">~ Role ~</div><div class="Info1"><div class="InfoEl First ">Âge</div><div class="InfoEl">Sexe ou Genre</div><div class="InfoEl">Race</div><div class="InfoEl">Alégeance</div></div>
<div class="Info2"><div class="Citation">"Citation"</div><div class="Info3">✦ Royaume d'origine
✦ Lieu de résidence
✦ Statut patrimonial
✦ Autre</div><div class="Info3">✦ Information supplémentaire qui pourrait être pertinente de mentionner.
✦ Information supplémentaire qui pourrait être pertinente de mentionne.
✦ Information supplémentaire qui pourrait être pertinente de mentionner.  </div><div class="Info4"><center><a href="LIEN VERS MUSIC" target="_blank"><img class="ImgMusic" src="LIEN ICON 100px"/></a><div class="Music"></div><center></div>
</div>
</div><div class="General "><div class="TitreSect">Mes compétences</div>
<div class="Texte">Voici un espace pour décrire vos compétences de manière textuel. Le < table > qui suit vous permet de représenter votre niveau pour chacune de vos compétences. Pour remplir les barres de progressions, il suffit de remplacer le 0 de "value=0" pour la valeur sur 100 que vous voulez.

<table style="width:725px; margin-top:-80px;">
<tr><td><center><div class="competenceC">MAGIQUE</div>

Pouvoir 1 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Pouvoir 2 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Pouvoir 3 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Pouvoir 4 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Pouvoir 5 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Pouvoir 6 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Pouvoir 7 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
</center></td>
<td><center><div class="competenceC">PHYSIQUE</div>

Force 1 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Force 2 – <i> Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Force 3 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Force 4 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Force 5 – <i>Niveau</i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Force 6 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Force 7 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
</center></td>
<td><center><div class="competenceC">INTELLECTUEL</div>

Connaissance 1 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Connaissance 2 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Connaissance 3 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Connaissance 4 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Connaissance 5 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Connaissance 6 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
Connaissance 7 – <i>Niveau </i>
<progress id="progressBar" value="0" max="100"></progress>
<span id="percent"></span>
</center></td>
</tr>
</table>
</div>
</div><div class="General "><div class="TitreSect">Mais encore...</div><div class="Info1"><div class="InfoEl First "><a href="LIEN PRESENTATION" target="_blank">Présentation</a></div><div class="InfoEl"><a href="LIEN CORRESPONDANCE" target="_blank">Correspondance</a></div><div class="InfoEl"><a href="LIEN MP" target="_blank">MP</a></div><div class="InfoEl"><a href="LIEN DEMANDES" target="_blank">Demande de Rps</a></div></div></div>
<div class="General "><div class="TitreSect">Mes relations</div>
<div class="RelImg"><img src="LIEN ICON 100PX" /></div><div class="RelDesc"><strong>Nom, Role </strong>
DESCRIPTION DE VOTRE RELATION.</div><br/>
<div class="RelImg"><img src="LIEN ICON 100PX" /></div><div class="RelDesc"><strong>Nom, Role </strong>
DESCRIPTION DE VOTRE RELATION.</div><br/>
<div class="RelImg"><img src="LIEN ICON 100PX" /></div><div class="RelDesc"><strong>Nom, Role </strong>
DESCRIPTION DE VOTRE RELATION.</div><br/>
</div>

<center><div class="General "><div class="TitreSect">Mes aventures</div>
<div class="RpBloc"><div class="RpTitre">TITRE</div>
<div class="RpTexte"><strong>Date - </strong>Description de votre rp.
</div><div class="RpBlocImg"><div class="RpImg"><img src="LIEN ICON 200px X 100px" /></div><div class="RpFeat">Feat Nom</div></div>
<div class="Btn"><a href="LIEN" target="_blank">En savoir plus</a></div></div>

<div class="RpBloc"><div class="RpTitre">TITRE</div>
<div class="RpTexte"><strong>Date - </strong>Description de votre rp.
</div><div class="RpBlocImg"><div class="RpImg"><img src="LIEN ICON 200px X 100px" /></div><div class="RpFeat">Feat Nom</div></div>
<div class="Btn"><a href="LIEN" target="_blank">En savoir plus</a></div></div>

</div>
<div class="AdminCredit">Crédit à <a href="https://rpg-chevalier.forumactif.com/u3533" target="_blank">Lyhn</a>. Réalisé pour l'usage sur <a href="https://rpg-chevalier.forumactif.com/" target="_blank">RPG-Chevalier</a> seulement.</div></center>
<style>.General {background : #b2d8d8; border: solid #66b2b2; border:0px 2px; color: #004c4c; width:750px;} .Entete {height: auto; border-radius:100% 100% 0% 0%;} .Titre {font-size: 6em; font-family : 'Passions Conflict', cursive; line-height: 60px;} .Intro {Text-align:justify;padding:20px;} .Img{width:200px; height:300px; border-radius:100px 100px 0px 0px; border:2px solid #008080; overflow:hidden; margin-top:-307px;} .TitreSect {color: #008080;font-family:'Julius Sans One', 'cursive'; border-top: 7px solid #66b2b2; border-bottom: 2px solid #66b2b2;font-size:27px;padding:15px; text-align:center;} .Texte {padding:25px;text-align:justify;} .RelImg {width:102px; height:102px; border:2px solid #008080;padding-top:2px;display:inline-block; vertical-align: top;} .RelDesc {width:540px; height:auto; border-top:2px solid #008080;display:inline-block; text-align:justify;padding:4px 10px 20px 20px;} .Music {background:url(https://i.servimg.com/u/f87/20/47/71/97/music_11.png);background-size:contain;width:157px; height:80px;margin-top:-14px;} .ImgMusic {width:100px; height:100px; border:3px solid #008080;} .Info1, .InfoEl {display:inline-block;} .Info1 {width:750px;border-bottom: 2px solid #66b2b2} .InfoEl {width:155px; font-family:'Julius Sans One', 'cursive'; border-left: 2px solid #66b2b2; font-size:18px;padding:15px;} .First {border-left: 0px solid #66b2b2 !important;} .Info2, .Info3, .Info4 {display: inline-block;} .Citation {padding:20px;text-align:center;} .Info3 {width: 280px; text-align:left;vertical-align: top} .Info4 {width: 170px; vertical-align: top} .RpBlocImg {width:200px; height:130px;border: 2px solid #66b2b2; padding:10px;display:inline-block;} .RpImg{width:200px; height:100px; overflow:hidden;} .RpBloc {width:632px; height:180px; margin:5px; border: 2px solid #008080;text-align:left;padding:20px;} .RpTitre{width:450px; height: 34px; background-color:#b2d8d8; color:#004c4c;font-weight: bold;margin-top:-30px;padding: 0px 5px;} .RpFeat {font-size: 16px;text-align:center; padding:11px;} .RpTexte{display:inline-block; width:398px; height:155px; margin-right:10px;vertical-align: top;overflow:auto;} .Btn { border: 2px solid #004c4c; padding: 5px 20px; border-radius: 20px; background: #66b2b2;width:120px;text-align:center;margin-left:284px; margin-top: 8px;}</style>


Section à l'unité :

Code:

<div class="General "><div class="TitreSect">Un titre</div>
<div class="Texte">Du texte.</div></div>


Relation à l'unité :

Code:

<div class="RelImg"><img src="LIEN ICON 100PX" /></div><div class="RelDesc"><strong>Nom, Role </strong>
DESCRIPTION DE VOTRE RELATION.</div><br/>


Rp à l'unité:

Code:

<div class="RpBloc"><div class="RpTitre">TITRE</div>
<div class="RpTexte"><strong>Date - </strong>Description de votre rp.
</div><div class="RpBlocImg"><div class="RpImg"><img src="LIEN ICON 200px X 100px" /></div><div class="RpFeat">Feat Nom</div></div>
<div class="Btn"><a href="LIEN" target="_blank">En savoir plus</a></div></div>