<style type="text/css"> .div_fond { background-color:#B5838D; border: 1px solid #E5989B; border-bottom: 3px solid #E5989B; border-radius: 0px 0px 5px 5px; } .div_irl { background-color:#B5838D; border: 1px solid #E5989B; border-bottom: 3px solid #E5989B; border-radius: 0px 0px 5px 5px; width: 400px; height: 100px; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; position: relative; margin-top: -220px; } .div_irl:hover { margin-top: -165px; -webkit-transition: margin 1s ease-in; -moz-transition: margin 1s ease-in; -ms-transition: margin 1s ease-in; -o-transition: margin 1s ease-in;  transition: margin 1s ease-in; position: relative; } .pseudo { margin-top: -16px; font-family: 'Crushed', cursive; font-size: 35px; color: #E5989B; text-shadow: 1px 1px 1px #000; text-align: center; } .icon { width: 80px; height: 80px; box-shadow: 1px 1px 2px #000; margin-right: 5px; } .titre { font-family: 'Raleway', cursive; font-size: 20px; letter-spacing: -1px; color: #E5989B; border-bottom: 1px solid #ffffff; text-shadow: 1px 1px 1px #000; text-align: left; margin-left: 5px; margin-top: -5px; } .credit { background-color: #D893AC; width: 200px; height: 15px; line-height: 15px; font-family: 'Raleway', cursive; font-size: 12px; color: #ffffff; text-align: center; } .questions_id { font-family: 'Raleway', cursive; color: #F0BED0; font-size: 13px; } .select_option { font-family: 'Raleway', cursive; font-size: 12px; color:#ffffff; background-color: #D893AC; border: none; padding: 3px; text-transform: small-caps; margin-top: 5px; margin-bottom: -5px; }</style>

<center><div style="background: none; width: 500px; height: 1250px;">
<div style="width: 500px; height: 1100px; z-index: 1; position: absolute;" class="div_fond"><img src="https://placehold.it/500x200" style="border-bottom: 6px double #ffffff; width: 500px;" /><div class="pseudo"> <font style="color: #D893AC">NOM</font> PRENOM</div><center>
<img src="https://placehold.it/100x100" class="icon" /> <img src="https://placehold.it/100x100" class="icon" /> <img src="https://placehold.it/100x100" class="icon" /></center><p class="titre">ID CARD</p><table height="340px" width="500px" cellpadding="4" style="margin-top: -35px;"><tr width="500px"><td width="200px" rowspan="2" height="340px"><img src="https://placehold.it/200x320" /><div class="credit">© credit</div></td><td width="300px" height="200px" style="font-family: trebuchet ms; color: #ffffff; font-size: 11px;">
<font class="questions_id">Âge :</font> réponse ici
<font class="questions_id">Date de naissance :</font> réponse ici
<font class="questions_id">Nationalité :</font> réponse ici
<font class="questions_id">Orientation sexuelle :</font> réponse ici
<font class="questions_id">Groupe :</font> réponse ici
<font class="questions_id">Situation amoureuse :</font> réponse ici
<font class="questions_id">Pouvoir :</font> réponse ici
<font class="questions_id">Niveau :</font> réponse ici
<font class="questions_id">FT</font> réponse ici
<table align="center"><tr><td><select class="select_option"><option>Qualités</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
<option>option 7</option></select></td><td><select class="select_option"><option>Défauts</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
<option>option 7</option></select></td></tr></table></td>
</tr><tr><td width="280px; height="140px"><div style="width: 280px; height: 140px; overflow: auto; font-family: trebuchet ms; color: #ffffff; font-size: 11px; text-align: justify; padding: 1x;">info sur ton personnage ♠ anecdote sur ton personnage ♠ info sur ton personnage ♠ anecdote sur ton personnage ♠ info sur ton personnage anecdote sur ton personnage ♠ info sur ton personnage ♠ anecdote sur ton personnage ♠ info sur ton personnage ♠  anecdote sur ton personnage ♠ info sur ton personnage ♠  anecdote sur ton personnage ♠ info sur ton personnage ♠  anecdote sur ton personnage ♠ info sur ton personnage ♠  anecdote sur ton personnage ♠ info sur ton personnage ♠  anecdote sur ton personnage ♠ info sur ton personnage ♠ anecdote sur ton personnage ♠ info sur ton personnage ♠ anecdote sur ton personnage ♠ info sur ton personnage</div></td></tr></table><p class="titre">HISTORY</p><table height="340px" width="500px" cellpadding="4" style="margin-top: -35px;"><tr width="500px"><td width="300px" height="50px" style="font-family: 'Crushed', cursive; height: 50px; color: #F0BED0; font-size: 15px; text-align: justify; overflow: auto; line-height: 12px;">citation citation citation citation citation citation citation citation citation citation citation citation citation citation citation citation citation citation (pas trop longue)</td><td width="200px" rowspan="2" height="340px"><img src="https://placehold.it/200x320" /><div class="credit">© credit</div></td></tr><tr><td width="280px; height="290px"><div style="width: 280px; height: 285px; overflow: auto; font-family: trebuchet ms; color: #ffffff; font-size: 11px; text-align: justify; padding: 1px;">Ici l'histoire de votre personnage, indiquez notamment quand et comment il a découvert son pouvoir et son arrivée à la BHH !

Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.

Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit. histoire de ton personnage à  placer ici. Racontes son enfance, ses souvenirs, ses joies, ses peines, ses rêves, sa situation actuelle, etc. Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.

Exsistit autem hoc loco quaedam quaestio subdifficilis, num quando amici novi, digni amicitia, veteribus sint anteponendi, ut equis vetulis teneros anteponere solemus. Indigna homine dubitatio! Non enim debent esse amicitiarum sicut aliarum rerum satietates; veterrima quaeque, ut ea vina, quae vetustatem ferunt, esse debet suavissima; verumque illud est, quod dicitur, multos modios salis simul edendos esse, ut amicitiae munus expletum sit.</td>
</tr></table></div></div>

<div class="div_irl"><table width="400px" cellpadding="3"><tr width="100px"><td width="100px" rowspan="2" height="100px"><img src="https://placehold.it/100x100" style="margin-top: -10px; margin-left: -5px; border-radius: 0px 0px 0px 5px;" /></td><td width="300px" height="20px"><p class="titre">AND YOU ?!</p></tr><tr><td width="300px; height="80px"><div style="width: 280px; height: 70px; overflow: auto; font-family: trebuchet ms; color: #ffffff; font-size: 11px; text-align: justify; padding: 1x; margin-top: -25px;">Parles nous de toi en quelques mots dans cette partie, si t'es pas trop inspiré(e) tu peux nous dire ton pseudo, âge, depuis combien de temps tu fais du rp, comment tu as trouvé le forum et ce que tu en penses, si tu mets le lait avant ou après les céréales, si tu penses que l'ananas sur la pizza c'est acceptable ou pas, vraiment tout ce que tu veux et qui te passes par la tête !</div></td></tr></table></div></div></center>