Modèle de fiche

<div style="width:700px; margin:auto;">
<center><div style="margin:auto; font-size:1.5em; text-transform:uppercase;">nom du personnage</div></center>
<div style="float:left; width:350px; height:210px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; margin-right:7px; padding-left:5px;"><center><span>Informations basiques</span></center><img style="float:right; padding-right:10px;" src="http://i.imgur.com/n4zu8cM.png"/>
Nom :
Nationalité :
Statut marital :
Date de naissance :
Lieu de naissance :
Orientation sexuelle :
Confession religieuse :
</div><div style="width:250px; height:210px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; padding-left:5px;"><center><span>Informations de recensement</span></center>
Classe :
Sport pratiqué :
Club :
Maison à Poudlard :
Maison à Shivas :
Ecoles précédentes :
</div>

<div style="float:left; width:250px; height:210px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; margin-right:7px; padding-left:5px;"><center><span>Physique</span></center>
Taille :
Poids :
Cheveux :
Yeux :
Corps :
Vêtements :
Particularités :
</div><div style="width:350px; height:210px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; padding-left:5px;"><center><span>Caractère et intérêts</span></center>
Quelques qualités :
Quelques défauts :
- Description morale
- Centres d'intérêts
Type de musique ?
Type de films ?
Type de livres/BD/manga ?
</div>

<div style="width:617px; height:210px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; margin-right:7px; padding-left:5px;"><center><span>Description libre</span></center>
Rôle dans l'histoire, relations en bref, famille, lieu de vie, histoire
</div>

<div style="float:left; width:300px; height:250px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; margin-right:7px; padding-left:5px;"><center><span>Compétences</span></center>
Choisir selon filière et centres d'intérêt
Maths :
SVT :
Physique :
Français :
Anglais :
Autre langue (préciser) :
Histoire :
Littérature :
Philosophie :
Spé :
Sport :
Couture :
Arts plastiques :
Théâtre :
Photographie :
Jardinage :
Cuisine :
</div><div style="width:300px; height:250px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; padding-left:5px;"><center><span>Compétences - Poudlard</span></center>
Préfet ?
Quidditch ?
Baguette :
Statut de sang :
DCFM :
Botanique :
Métamorphose :
Sortilèges :
Histoire de la Magie :
Potions :
Options :
- Description rapide
</div>
</div>

<div style="width:700px; margin:auto;">
<center><div style="margin:auto; font-size:1.5em; text-transform:uppercase;">relations</div></center>
<div style="margin-bottom:17px; float:left; width:100%; height:150px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; padding-left:5px; padding-top:10px; text-align:justify;"><img style="float:left; padding-right:10px;" src="http://i.imgur.com/n4zu8cM.png"/><span style="display:inline-block; text-transform:uppercase; font-size:1.2em;">Nom du personnage</span><span style="display:inline-block; float:right; font-style:italic; font-size:1.1em; padding-right:45px;">Relation</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>
</div>
<div style="width:700px; margin:auto;">
<div style="margin-bottom:17px; float:left; width:100%; height:150px; border: 2px solid Crimson; border-radius:3px; overflow:scroll; padding-left:5px; padding-top:10px; text-align:justify;"><img style="float:left; padding-right:10px;" src="http://i.imgur.com/n4zu8cM.png"/><span style="display:inline-block; text-transform:uppercase; font-size:1.2em;">Nom du personnage</span><span style="display:inline-block; float:right; font-style:italic; font-size:1.1em; padding-right:45px;">Relation</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>
</div>