Codes et prez

<div style="width: 600px; height: auto; min-height: 500px; background-image: url(http://img15.hostingpics.net/pics/640841fondsable.png); margin: auto; border-top: 5px solid Sienna; border-bottom: 5px solid Sienna; color: Sienna;"><div style="width: 600px; height: 300px; background-image: url(http://img15.hostingpics.net/pics/837300banniere.png);"></div>
<div style="margin-top:-295px; font-size: 45px; margin-left: 20px; text-shadow: white 2px 2px 0px; font-family: Trajan pro; line-height: 55px;">TITRE</div>

<fieldset style="width: auto; height: auto; padding: 10px; border: 2px dashed Sienna; margin-top: 200px; margin-top: 150px; margin-left: 10px; margin-right: 10px;"><legend align="right"><span style="font-family: Trajan pro; font-size: 22px;">Sous titre</span></legend>
<div style="width: 500px; height: auto; margin-left: 20px; margin-top: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo dolor, ullamcorper quis ultricies sit amet, dictum adipiscing orci. Fusce scelerisque diam lorem, in rutrum est dignissim non. Suspendisse malesuada augue eget lacus malesuada, at viverra neque consectetur. Aliquam at facilisis sapien, vitae pulvinar mi. Nunc purus neque, semper scelerisque faucibus a, malesuada non risus. Proin tincidunt sem tortor, sed ultrices magna malesuada sed. Maecenas nec enim nec nulla posuere accumsan. Nam vel odio et metus feugiat tempus. Nulla eget tortor leo.

Sed ullamcorper id lorem id feugiat. Suspendisse felis nulla, facilisis ultrices mauris sed, ullamcorper luctus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium tellus lacinia condimentum fringilla. Nunc magna nisl, pharetra a posuere eu, fermentum mattis mauris. Vivamus sodales lectus libero, vitae commodo turpis imperdiet quis. Curabitur ante elit, facilisis et auctor et, suscipit ac leo. Suspendisse sed leo sit amet velit volutpat luctus id eget purus. Integer sed vulputate augue. Mauris semper euismod enim quis elementum. Nam mauris ante, viverra vel aliquet in, fermentum eu purus. Ut sagittis mauris eget purus volutpat viverra. Duis auctor feugiat dolor. Pellentesque euismod tincidunt nisi, quis lacinia nulla vehicula quis.</div></fieldset>

<div style="margin-bottom: -4px; text-align: left; font-size: 9px;">>CODAGE by Liliebia</div></div>
<link href='http://fonts.googleapis.com/css?family=Trajan pro' rel='stylesheet' type='text/css'>

[center]<link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'><div style=" font-family: Georgia; font-size: 35px; color: MediumSlateBlue; font-weight: italic;margin-bottom:-15px;text-shadow: 1px 1px 3px SteelBlue"> Nom & Prénom </div>
<div style="width: 400px; background-color: #fff; height: 130px; border: 3px solid CornFlowerBlue;"> <div style=" letter-spacing: 2px; font-family: times new roman; font-size: 15px; text-align: center; color: SteelBlue"> ♕ Une petite phrase ou une citation </div><img src="http://img4.hostingpics.net/pics/265207iconekyo.png" style="border-radius:50px; border: 0px solid FireBrick; float: right;margin-right: 10px; margin-bottom: 5px"> <div style="width: 280px; overflow: auto; height: 100px; color: CornFlowerBlue;font-size:15px; margin-top: 5px; font-family: times new roman"> Je l'ai rencontré à <b> Crocus </b> et on fait <b>5</b> missions en commun.
Eodem tempore etiam Hymetii praeclarae indolis viri negotium est actitatum, cuius hunc novimus esse textum. cum Africam pro consule regeret Carthaginiensibus victus inopia iam lassatis, ex horreis Romano populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.</div>
<div style=" font-size:9px; text-align: right; color: CornFlowerBlue;"> Fiche de lien par Amylith de Libre Graph </div>
</div></center>[/center]

<link href='http://fonts.googleapis.com/css?family=Exo+2:900' rel='stylesheet' type='text/css'>
<style> .persoinfo {background-color:#dfddd9;font-size:10px;text-align:justify;width:240px;padding-left:5px;color:#4C565F;margin-top:4px;} .contour { background-color:#eee;margin:10px;border: 5px solid #748E89;} .infoduperso { height:120px; padding-right:5px;margin3px; text-align: justify; font-size: 10px; color: #4C565F; overflow: auto; line-height: 98%; } .lienperso {background-color:#E5E5E4;padding:5px;font-family: 'Exo 2', sans-serif; font-size:20px;color:#748e89;text-transform:uppercase;font-weight:bold;margin-right:3px;margin:3px; }
</style>

<style>  .contour { background-color:#eee;margin:10px;border: 5px solid #748E89;} .nomdulien {background-color:#DFDDD9;width:315px;padding:5px;margin-top:5px;font-family: 'Exo 2', sans-serif; font-size:20px;color:#748e89;text-transform:uppercase;font-weight:bold; }  </style>

<center><table class="contour" style="margin-top:-70px;"><tr>
<td>[img]http://image.noelshack.com/fichiers/2013/16/1366136263-lacie.png[/img]</td>
<td><div style="background-color:#E5E5E4;width:235px;height:30px;padding:5px;"><div style="margin-top:5px;font-family: 'Exo 2', sans-serif; font-size:20pt;color:#748e89;text-transform:uppercase;font-weight:bold;">Nom et Prénom </div></div> <div class="persoinfo">Age : 13 ans</div> <div class="persoinfo">Nationalité : Italienne</div> <div class="persoinfo">Sexe : féminin</div> <div class="persoinfo">Date de naissance : 05/12</div> <div class="persoinfo">Lieu de naissance : Angleterre </div> <div class="persoinfo">Etudes : etudiante</div> <div class="persoinfo">Signe particulier : aucun</div> <div style="margin-top:4px;background-color:#CCCAC0;width:100px;height:100px;padding:10px;float:left;">[img]http://xtropik.net/uploads/1391435398_tropik.png[/img]</div> <div style="margin-top:4px;background-color:#CCCAC0;width:100px;height:100px;padding:10px;float:right;">[img]http://xtropik.net/uploads/1391435398_tropik.png[/img]</div></td>
</tr></table>
<div class="contour" style="width:455px;margin-top:-15px;"><div style="background-color:#DFDDD9;padding:5px; margin:3px; height: 120px;"><div class="infoduperso">Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.</div></div> <div class="lienperso">Ma présentation</div> <div class="lienperso">Mes rps</div></div></center>
[center][url=http://forum-theme.forumperso.com/]<font color="#C9C9C9">©[size=9] FICHE CRÉÉE PAR REIRA DE LIBRE GRAPH'[/size]</font>[/url][/center]

<center><div class="contour" style="width:455px;"><div class="nomdulien" style="width:445px;background-color:#748E89;color:#E5E5E4;margin-top:-5px;">Mes liens positifs </div>

<table style="margin-top:-90px;"><tr>
<td><div style="margin-top:4px;background-color:#CCCAC0;width:100px;height:100px;padding:10px;">[img]http://xtropik.net/uploads/1391435398_tropik.png[/img]</div> <div class="persoinfo" style="width:115px;">Type de lien</div></td>
<td><div class="nomdulien">Nom et Prénom </div><div style="background-color:#E5E5E4;width:315px;padding:5px; font-size:10px;line-height: 98%; text-align:justify; height: 100px;margin-top:3px;overflow:auto;color: #4C565F;">Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.</div></td>
</tr></table>

<table style="margin-top:-75px;"><tr>
<td><div style="margin-top:4px;background-color:#CCCAC0;width:100px;height:100px;padding:10px;">[img]http://xtropik.net/uploads/1391435398_tropik.png[/img]</div> <div class="persoinfo" style="width:115px;">Type de lien</div></td>
<td><div class="nomdulien">Nom et Prénom </div><div style="background-color:#E5E5E4;width:315px;padding:5px; font-size:10px;line-height: 98%; text-align:justify; height: 100px;margin-top:3px;overflow:auto;color: #4C565F;">Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.</div></td>
</tr></table>
</div></center>

<center>
<div style="width:430px;background-color: #EEEEEE;border-top:3px solid #79ADAD;border-bottom: 3px solid #883131;">
<center>
<div style="font-family:cambria;text-transform: uppercase;font-size:19px;margin-top:-10px;"> [color=#808080]demande [color=#883131]de double [/color]compte.[/color]</div>
<div style="background-color: #DDDDDD;width: 430px;"> <div style="width:340px;background-color: #EEEEEE;"> <div style="width: 280px;font-family:verdana;font-size:10px;letter-spacing:0.1px;word-spacing:0.1px;line-height:12px;"><br>
[justify][color=#808080]Je suis un texte administratif, je parle du règlement, du contexte, j'explique comment on peux se présenter, faire un scénario ou encore poster sa fiche de lien. Je suis aussi souvent utilisé pour les absences, les demandes de double compte ou encore les présentations de jeux. Bref, je suis le code que tout le monde voit dès la première fois en arrivant sur le forum. Bref, je suis important.[/color][/justify]
</div>
</div></div>
<div style="font-family: verdana; font-size:8px;#333333;opacity:0.4;margin-top:9px;"> C O D E © W H A T S E R N A M E .</div>
</div></center>

<center>
<link href='http://fonts.googleapis.com/css?family=BenchNine:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300' rel='stylesheet' type='text/css'>
<div style="background-color:#F4F3EF;text-align:justify; color:#928172;padding:20px;margin:20px;width:500px;border-left:5px solid #928185;font-size:11px;color:#aaa; line-height: 95%;"> <div style="font-family: 'BenchNine', sans-serif;color:#928185;font-size:35px;text-shadow: 1px 1px 0px white;margin-left:100px;">GRAND TITRE X</div>

<span style="font-family: 'Roboto Condensed', sans-serif;font-size:13px; color:#6D585D;">SECOND TITRE - </span>Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
<div style="border-top:1px solid #928185;margin-top:10px;"></div>
<span style="font-family: 'Roboto Condensed', sans-serif;font-size:13px; color:#6D585D;">SECOND TITRE - </span>Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.

[center][url=http://libre-graph.forumperso.com/]<font color="#C9C9C9">©[size=9] FICHE CRÉÉE PAR REIRA DE LIBRE GRAPH'[/size]</font>[/url][/center]
</div>
</center>

<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<style>.First{position:relative;top:-250px;z-index:2;transition: ease-in-out .4s;-moz-transition: ease-in-out .4s;-o-transition: ease-in-out .4s;-webkit-transition: ease-in-out .4s;} .First:hover{top:-25px;transition: ease-in-out .4s;-moz-transition: ease-in-out .4s;-o-transition: ease-in-out .4s;-webkit-transition: ease-in-out .4s;} .textbig:hover{letter-spacing:2px;} .img_zoom:hover{transform: scale(1.5, 1.5) rotate(10deg);-ms-transform: scale(1.5, 1.5) rotate(10deg);-webkit-transform: scale(1.5, 1.5) rotate(10deg);transition: ease-in-out .4s;-moz-transition: ease-in-out .4s;-o-transition: ease-in-out .4s;-webkit-transition: ease-in-out .4s;} .reserve{background-color:rgba(255, 165, 0, 0.2) !important;} .pris{background-color:rgba(255, 0, 0, 0.2) !important;} .lienanim{position:relative;top:280px;transition: ease-in-out .4s;-moz-transition: ease-in-out .4s;-o-transition: ease-in-out .4s;-webkit-transition: ease-in-out .4s;} .lienanim:hover{top:0px;transition: ease-in-out .4s;-moz-transition: ease-in-out .4s;-o-transition: ease-in-out .4s;-webkit-transition: ease-in-out .4s;}</style>

[center]<div class="textbig" style="font-size:45px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Prénom(s) et Nom</div>
<div style="font-size:12px; color:#767B77;margin-top:-10px;margin-bottom:5px;">"Petite citation"</div>
<div style="position:relative; z-index:3;width:500px; height:270px;border:1px solid #525353;border-radius:10px;overflow:hidden;"><img src="http://33.media.tumblr.com/ff11f908d7b15460f35d2a932a47364d/tumblr_inline_n018zsMaaI1rodmj1.gif" class="img_zoom" style="transition: ease-in-out .4s;-moz-transition: ease-in-out .4s;-o-transition: ease-in-out .4s;-webkit-transition: ease-in-out .4s;"/></div>
<div class="First" style="padding:25px 10px 5px 10px;border-radius:10px;height:250px; width:450px; border:1px solid #161D1B; background-color:#140A0A;"><table><tr><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Ma vie, Mon oeuvre</div>
<div style="height:155px;width:215px;overflow:auto;padding-right:7px;text-align:justify;color:#767B77;">Petit résumé de l'histoire de votre personnage</div></td><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Me, I and Myself</div>
<div style="height:155px;width:215px;color:#767B77;overflow:auto;padding-right:7px;text-align:justify;">Petit résumé du caractère de votre personnage</div></td></tr><tr><td colspan="2"><div style="width:450px;height:20px;padding:10px;"><div style="font-size:20px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">
<center>Age - Statut - Métier - Autre - Autre</center>
</div></div></td></tr></table></div>

<div style="position:relative;z-index:1;top:-200px;width:500px; height:auto;border:2px solid #140A0A;border-radius:10px;box-shadow:1px 1px 1px black;background-color:#161D1B;padding-bottom:20px;"><div style="font-size:35px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 1px black;margin-top:-22px;width:400px;">Recherche de liens particuliers</div>
<div style="height:auto;width:440px;margin-top:10px;padding-right:15px;text-align:justify;color:#767B77;"><div style="padding:6px;width:420px;height:auto;background-color:rgba(0, 128, 0, 0.2);border:1px solid #767B77;"><span style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">[M/F] Lien recherché ></span> Description du lien</div>
<div class="reserve" style="padding:6px;width:420px;height:auto;background-color:rgba(0, 128, 0, 0.2);border:1px solid #767B77;"><span style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">[M/F] Lien recherché ></span>Description du lien</div>
<div class="pris" style="padding:6px;width:420px;height:auto;background-color:rgba(0, 128, 0, 0.2);border:1px solid #767B77;"><span style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">[M/F] Lien recherché ></span> Description du lien</div> </div></div>
<div class="copyright_r">Copyright © 2015 Rainbow</div>
[/center]

[center]<table cellspacing="15px"><tr><td colspan="2"><div class="textbig" style="font-size:45px;color:black;font-family:'Serif';text-shadow:1px 1px 5px white;">
[center]Visages parmi les Ombres[/center]
</div></td></tr><table cellspacing="15px"><tr><td colspan="2"><div class="textbig" style="font-size:45px;color:black;font-family:'Serif';text-shadow:1px 1px 5px white;">
</div></td></tr><tr><td><div style="overflow:hidden;width:200px;height:320px;border-radius:10px;border:1px solid #161D1B;background:url('http://www.zupimages.net/up/15/50/yyc6.bmp');"><div style="width:180px;height:300px;background-color:#140A0A;padding:10px;" class="lienanim"><table><tr><td><div style="width:200px;height:20px;padding:10px;margin-top: -10px;padding-bottom: 25px;"><div style="font-size:20px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;"><center>Connaissance</center></div></div></td></tr><tr><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Lien avec le perso</div><div style="height:225px;width:170px;overflow:auto;padding-right:7px;text-align:justify;color:#767B77;">Description du lien</div></td></tr></table></div></div></td><td><div style="overflow:hidden;width:200px;height:320px;border-radius:10px;border:1px solid #161D1B;background:url('http://www.zupimages.net/up/15/50/yyc6.bmp');"><div style="width:180px;height:300px;background-color:#140A0A;padding:10px;" class="lienanim"><table><tr><td><div style="width:200px;height:20px;padding:10px;margin-top: -10px;padding-bottom: 25px;"><div style="font-size:20px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;"><center>Connaissance</center></div></div></td></tr><tr><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Lien avec le perso</div><div style="height:225px;width:170px;overflow:auto;padding-right:7px;text-align:justify;color:#767B77;">Description du lien.</div></td></tr></table></div></div></td></tr></table><table cellspacing="15px"><tr><td colspan="2"><div class="textbig" style="font-size:45px;color:black;font-family:'Serif';text-shadow:1px 1px 5px white;">
</div></td></tr><tr><td><div style="overflow:hidden;width:200px;height:320px;border-radius:10px;border:1px solid #161D1B;background:url('http://www.zupimages.net/up/15/50/yyc6.bmp');"><div style="width:180px;height:300px;background-color:#140A0A;padding:10px;" class="lienanim"><table><tr><td><div style="width:200px;height:20px;padding:10px;margin-top: -10px;padding-bottom: 25px;"><div style="font-size:20px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;"><center>Connaissance</center></div></div></td></tr><tr><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Lien avec le perso</div><div style="height:225px;width:170px;overflow:auto;padding-right:7px;text-align:justify;color:#767B77;">Description du lien</div></td></tr></table></div></div></td><td><div style="overflow:hidden;width:200px;height:320px;border-radius:10px;border:1px solid #161D1B;background:url('http://www.zupimages.net/up/15/50/yyc6.bmp');"><div style="width:180px;height:300px;background-color:#140A0A;padding:10px;" class="lienanim"><table><tr><td><div style="width:200px;height:20px;padding:10px;margin-top: -10px;padding-bottom: 25px;"><div style="font-size:20px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;"><center>Connaissance</center></div></div></td></tr><tr><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Lien avec le perso</div><div style="height:225px;width:170px;overflow:auto;padding-right:7px;text-align:justify;color:#767B77;">Description du lien.</div></td></tr></table></div></div></td></tr></table><table cellspacing="15px"><tr><td colspan="2"><div class="textbig" style="font-size:45px;color:black;font-family:'Serif';text-shadow:1px 1px 5px white;">
</div></td></tr><tr><td><div style="overflow:hidden;width:200px;height:320px;border-radius:10px;border:1px solid #161D1B;background:url('http://www.zupimages.net/up/15/50/yyc6.bmp');"><div style="width:180px;height:300px;background-color:#140A0A;padding:10px;" class="lienanim"><table><tr><td><div style="width:200px;height:20px;padding:10px;margin-top: -10px;padding-bottom: 25px;"><div style="font-size:20px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;"><center>Connaissance</center></div></div></td></tr><tr><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Lien avec le perso</div><div style="height:225px;width:170px;overflow:auto;padding-right:7px;text-align:justify;color:#767B77;">Description du lien</div></td></tr></table></div></div></td><td><div style="overflow:hidden;width:200px;height:320px;border-radius:10px;border:1px solid #161D1B;background:url('http://www.zupimages.net/up/15/50/yyc6.bmp');"><div style="width:180px;height:300px;background-color:#140A0A;padding:10px;" class="lienanim"><table><tr><td><div style="width:200px;height:20px;padding:10px;margin-top: -10px;padding-bottom: 25px;"><div style="font-size:20px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;"><center>Connaissance</center></div></div></td></tr><tr><td><div style="font-size:15px;color:#E1E3E3;font-family:'Poiret One';text-shadow:1px 1px 5px white;">Lien avec le perso</div><div style="height:225px;width:170px;overflow:auto;padding-right:7px;text-align:justify;color:#767B77;">Description du lien.</div></td></tr></table></div></div></td></tr></table>[/center]

<style>.flop{width: 200px; height: 320px; background-color: #fff; overflow: hidden} .flip{width: 200px; height: 320px; -webkit-perspective:1000; -o-perspective:1000; -moz-perspective:1000;} .flippin{-moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out;} .flip:hover .flippin{-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);} .sousavatar{width: 200px; height: 320px; background-color: #fff; overflow: hidden; opacity: 0; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; overflow: auto;} .flip:hover .sousavatar{opacity: 1;}</style>

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

<center><table><tr><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(http://www.zupimages.net/up/15/51/lmxa.bmp);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Nom & Prénom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">Une phrase</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">[b]Lorem ipsum[/b] dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(http://www.zupimages.net/up/15/51/lmxa.bmp);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Nom & Prénom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">Une phrase</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">[b]Lorem ipsum[/b] dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td></tr><tr><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(http://www.zupimages.net/up/15/51/lmxa.bmp);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Nom & Prénom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">Une phrase</div><div style="font-family: georgia; line-height: 100%; font-size: 12px; color: #000; text-align: justify;">[b]Lorem ipsum[/b] dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue.</div></div></div></div></div></div></td><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(http://www.zupimages.net/up/15/51/lmxa.bmp);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">[b]Lorem ipsum[/b] dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td></tr><tr><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(http://www.zupimages.net/up/15/51/lmxa.bmp);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">[b]Lorem ipsum[/b] dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td><td><div class="flop"><div class="flip"><div class="flippin"><div style="width: 200px; height: 320px; overflow: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; -moz-backface-visibility: hidden; position: absolute; -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; -o-transition: all 1.2s ease-in-out; background-image: url(http://www.zupimages.net/up/15/51/lmxa.bmp);"></div><div class="sousavatar"><div style="padding: 20px;"><div style="font-family: fjalla one; text-align: center; color: #000; line-height: 100%; font-size: 20px; text-transform: uppercase;">Prénom + Nom</div><div style="font-family: arial; text-align: center; font-size: 7px; color: #000; line-height: 100%; text-transform: uppercase; margin-bottom: 5px; border-bottom:1px solid #000">le lien</div><div style="font-family: georgia; line-height: 100%; font-size: 10px; color: #000; text-align: justify;">[b]Lorem ipsum[/b] dolor sit amet, consectetur adipiscing elit. Maecenas velit lectus, sollicitudin vitae elit in, lacinia molestie odio. Nulla rhoncus suscipit justo, id viverra orci venenatis ut. Cras dignissim orci non ex imperdiet, eu accumsan metus cursus. Nulla ut pulvinar dolor. Etiam ut augue pharetra, elementum ante at, dignissim nunc. Nullam varius sollicitudin tellus, id blandit ligula tincidunt id. Nullam vitae elementum nisi, non auctor tellus. Quisque congue venenatis elit, a euismod justo tincidunt eu. Aenean convallis nisl a massa finibus, a volutpat erat molestie. Nunc convallis neque eu fringilla tincidunt. Sed id viverra sem. Duis vel ipsum volutpat, gravida erat ac, facilisis augue. </div></div></div></div></div></div></td></tr></table></center>

/** @license
    * DHTML Snowstorm! JavaScript-based Snow for web pages
    * --------------------------------------------------------
    * Version 1.41.20101113 (Previous rev: 1.4.20091115)
    * Copyright (c) 2007, Scott Schiller. All rights reserved.
    * Code provided under the BSD License:
    * http://schillmania.com/projects/snowstorm/license.txt
    */

    /*global window, document, navigator, clearInterval, setInterval */
    /*jslint white: false, onevar: true, plusplus: false, undef: true, nomen: true, eqeqeq: true, bitwise: true, regexp: true, newcap: true, immed: true */

    var snowStorm = (function(window, document) {

      // --- common properties ---

      this.flakesMax = 128;          // Limit total amount of snow made (falling + sticking)
      this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
      this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
      this.excludeMobile = true;      // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice.
      this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
      this.followMouse = true;        // Snow movement can respond to the user's mouse
      this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
      this.snowCharacter = '•';  // • = bullet, · is square on some systems etc.
      this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
      this.targetElement = null;      // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference
      this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
      this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
      this.usePositionFixed = false;  // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported

      // --- less-used bits ---

      this.freezeOnBlur = true;      // Only snow when the window is in focus (foreground.) Saves CPU.
      this.flakeLeftOffset = 0;      // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars.
      this.flakeRightOffset = 0;      // Right margin/gutter space on edge of container
      this.flakeWidth = 8;            // Max pixel width reserved for snow element
      this.flakeHeight = 8;          // Max pixel height reserved for snow element
      this.vMaxX = 5;                // Maximum X velocity range for snow
      this.vMaxY = 4;                // Maximum Y velocity range for snow
      this.zIndex = 0;                // CSS stacking order applied to each snowflake

      // --- End of user section ---

      var s = this, storm = this, i,
      // UA sniffing and backCompat rendering mode checks for fixed position, etc.
      isIE = navigator.userAgent.match(/msie/i),
      isIE6 = navigator.userAgent.match(/msie 6/i),
      isWin98 = navigator.appVersion.match(/windows 98/i),
      isMobile = navigator.userAgent.match(/mobile/i),
      isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
      noFixed = (isMobile || isBackCompatIE || isIE6),
      screenX = null, screenX2 = null, screenY = null, scrollY = null, vRndX = null, vRndY = null,
      windOffset = 1,
      windMultiplier = 2,
      flakeTypes = 6,
      fixedForEverything = false,
      opacitySupported = (function(){
        try {
          document.createElement('div').style.opacity = '0.5';
        } catch(e) {
          return false;
        }
        return true;
      }()),
      didInit = false,
      docFrag = document.createDocumentFragment();

      this.timers = [];
      this.flakes = [];
      this.disabled = false;
      this.active = false;
      this.meltFrameCount = 20;
      this.meltFrames = [];

      this.events = (function() {

        var old = (window.attachEvent), slice = Array.prototype.slice,
        evt = {
          add: (old?'attachEvent':'addEventListener'),
          remove: (old?'detachEvent':'removeEventListener')
        };

        function getArgs(oArgs) {
          var args = slice.call(oArgs), len = args.length;
          if (old) {
            args[1] = 'on' + args[1]; // prefix
            if (len > 3) {
              args.pop(); // no capture
            }
          } else if (len === 3) {
            args.push(false);
          }
          return args;
        }

        function apply(args, sType) {
          var oFunc = args.shift()[evt[sType]];
          if (old) {
            oFunc(args[0], args[1]);
          } else {
            oFunc.apply(this, args);
          }
        }

        function addEvent() {
          apply(getArgs(arguments), 'add');
        }

        function removeEvent() {
          apply(getArgs(arguments), 'remove');
        }

        return {
          add: addEvent,
          remove: removeEvent
        };

      }());

      function rnd(n,min) {
        if (isNaN(min)) {
          min = 0;
        }
        return (Math.random()*n)+min;
      }

      function plusMinus(n) {
        return (parseInt(rnd(2),10)===1?n*-1:n);
      }

      this.randomizeWind = function() {
        vRndX = plusMinus(rnd(s.vMaxX,0.2));
        vRndY = rnd(s.vMaxY,0.2);
        if (this.flakes) {
          for (var i=0; i<this.flakes.length; i++) {
            if (this.flakes[i].active) {
              this.flakes[i].setVelocities();
            }
          }
        }
      };

      this.scrollHandler = function() {
        // "attach" snowflakes to bottom of window if no absolute bottom value was given
        scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
        if (isNaN(scrollY)) {
          scrollY = 0; // Netscape 6 scroll fix
        }
        if (!fixedForEverything && !s.flakeBottom && s.flakes) {
          for (var i=s.flakes.length; i--;) {
            if (s.flakes[i].active === 0) {
              s.flakes[i].stick();
            }
          }
        }
      };

      this.resizeHandler = function() {
        if (window.innerWidth || window.innerHeight) {
          screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
          screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
        } else {
          screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
          screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
        }
        screenX2 = parseInt(screenX/2,10);
      };

      this.resizeHandlerAlt = function() {
        screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
        screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
        screenX2 = parseInt(screenX/2,10);
      };

      this.freeze = function() {
        // pause animation
        if (!s.disabled) {
          s.disabled = 1;
        } else {
          return false;
        }
        for (var i=s.timers.length; i--;) {
          clearInterval(s.timers[i]);
        }
      };

      this.resume = function() {
        if (s.disabled) {
          s.disabled = 0;
        } else {
          return false;
        }
        s.timerInit();
      };

      this.toggleSnow = function() {
        if (!s.flakes.length) {
          // first run
          s.start();
        } else {
          s.active = !s.active;
          if (s.active) {
            s.show();
            s.resume();
          } else {
            s.stop();
            s.freeze();
          }
        }
      };

      this.stop = function() {
        this.freeze();
        for (var i=this.flakes.length; i--;) {
          this.flakes[i].o.style.display = 'none';
        }
        s.events.remove(window,'scroll',s.scrollHandler);
        s.events.remove(window,'resize',s.resizeHandler);
        if (s.freezeOnBlur) {
          if (isIE) {
            s.events.remove(document,'focusout',s.freeze);
            s.events.remove(document,'focusin',s.resume);
          } else {
            s.events.remove(window,'blur',s.freeze);
            s.events.remove(window,'focus',s.resume);
          }
        }
      };

      this.show = function() {
        for (var i=this.flakes.length; i--;) {
          this.flakes[i].o.style.display = 'block';
        }
      };

      this.SnowFlake = function(parent,type,x,y) {
        var s = this, storm = parent;
        this.type = type;
        this.x = x||parseInt(rnd(screenX-20),10);
        this.y = (!isNaN(y)?y:-rnd(screenY)-12);
        this.vX = null;
        this.vY = null;
        this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
        this.vAmp = this.vAmpTypes[this.type];
        this.melting = false;
        this.meltFrameCount = storm.meltFrameCount;
        this.meltFrames = storm.meltFrames;
        this.meltFrame = 0;
        this.twinkleFrame = 0;
        this.active = 1;
        this.fontSize = (10+(this.type/5)*10);
        this.o = document.createElement('div');
        this.o.innerHTML = storm.snowCharacter;
        this.o.style.color = storm.snowColor;
        this.o.style.position = (fixedForEverything?'fixed':'absolute');
        this.o.style.width = storm.flakeWidth+'px';
        this.o.style.height = storm.flakeHeight+'px';
        this.o.style.fontFamily = 'arial,verdana';
        this.o.style.overflow = 'hidden';
        this.o.style.fontWeight = 'normal';
        this.o.style.zIndex = storm.zIndex;
        docFrag.appendChild(this.o);

        this.refresh = function() {
          if (isNaN(s.x) || isNaN(s.y)) {
            // safety check
            return false;
          }
          s.o.style.left = s.x+'px';
          s.o.style.top = s.y+'px';
        };

        this.stick = function() {
          if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
            s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
          } else if (storm.flakeBottom) {
            s.o.style.top = storm.flakeBottom+'px';
          } else {
            s.o.style.display = 'none';
            s.o.style.top = 'auto';
            s.o.style.bottom = '0px';
            s.o.style.position = 'fixed';
            s.o.style.display = 'block';
          }
        };

        this.vCheck = function() {
          if (s.vX>=0 && s.vX<0.2) {
            s.vX = 0.2;
          } else if (s.vX<0 && s.vX>-0.2) {
            s.vX = -0.2;
          }
          if (s.vY>=0 && s.vY<0.2) {
            s.vY = 0.2;
          }
        };

        this.move = function() {
          var vX = s.vX*windOffset, yDiff;
          s.x += vX;
          s.y += (s.vY*s.vAmp);
          if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
            s.x = 0;
          } else if (vX < 0 && s.x-storm.flakeLeftOffset < 0-storm.flakeWidth) {
            s.x = screenX-storm.flakeWidth-1; // flakeWidth;
          }
          s.refresh();
          yDiff = screenY+scrollY-s.y;
          if (yDiff<storm.flakeHeight) {
            s.active = 0;
            if (storm.snowStick) {
              s.stick();
            } else {
              s.recycle();
            }
          } else {
            if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
              // ~1/1000 chance of melting mid-air, with each frame
              s.melting = true;
              s.melt();
              // only incrementally melt one frame
              // s.melting = false;
            }
            if (storm.useTwinkleEffect) {
              if (!s.twinkleFrame) {
                if (Math.random()>0.9) {
                  s.twinkleFrame = parseInt(Math.random()*20,10);
                }
              } else {
                s.twinkleFrame--;
                s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
              }
            }
          }
        };

        this.animate = function() {
          // main animation loop
          // move, check status, die etc.
          s.move();
        };

        this.setVelocities = function() {
          s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
          s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
        };

        this.setOpacity = function(o,opacity) {
          if (!opacitySupported) {
            return false;
          }
          o.style.opacity = opacity;
        };

        this.melt = function() {
          if (!storm.useMeltEffect || !s.melting) {
            s.recycle();
          } else {
            if (s.meltFrame < s.meltFrameCount) {
              s.meltFrame++;
              s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
              s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
              s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
            } else {
              s.recycle();
            }
          }
        };

        this.recycle = function() {
          s.o.style.display = 'none';
          s.o.style.position = (fixedForEverything?'fixed':'absolute');
          s.o.style.bottom = 'auto';
          s.setVelocities();
          s.vCheck();
          s.meltFrame = 0;
          s.melting = false;
          s.setOpacity(s.o,1);
          s.o.style.padding = '0px';
          s.o.style.margin = '0px';
          s.o.style.fontSize = s.fontSize+'px';
          s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
          s.o.style.textAlign = 'center';
          s.o.style.verticalAlign = 'baseline';
          s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
          s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
          s.refresh();
          s.o.style.display = 'block';
          s.active = 1;
        };

        this.recycle(); // set up x/y coords etc.
        this.refresh();

      };

      this.snow = function() {
        var active = 0, used = 0, waiting = 0, flake = null, i;
        for (i=s.flakes.length; i--;) {
          if (s.flakes[i].active === 1) {
            s.flakes[i].move();
            active++;
          } else if (s.flakes[i].active === 0) {
            used++;
          } else {
            waiting++;
          }
          if (s.flakes[i].melting) {
            s.flakes[i].melt();
          }
        }
        if (active<s.flakesMaxActive) {
          flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
          if (flake.active === 0) {
            flake.melting = true;
          }
        }
      };

      this.mouseMove = function(e) {
        if (!s.followMouse) {
          return true;
        }
        var x = parseInt(e.clientX,10);
        if (x<screenX2) {
          windOffset = -windMultiplier+(x/screenX2*windMultiplier);
        } else {
          x -= screenX2;
          windOffset = (x/screenX2)*windMultiplier;
        }
      };

      this.createSnow = function(limit,allowInactive) {
        for (var i=0; i<limit; i++) {
          s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
          if (allowInactive || i>s.flakesMaxActive) {
            s.flakes[s.flakes.length-1].active = -1;
          }
        }
        storm.targetElement.appendChild(docFrag);
      };

      this.timerInit = function() {
        s.timers = (!isWin98?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
      };

      this.init = function() {
        for (var i=0; i<s.meltFrameCount; i++) {
          s.meltFrames.push(1-(i/s.meltFrameCount));
        }
        s.randomizeWind();
        s.createSnow(s.flakesMax); // create initial batch
        s.events.add(window,'resize',s.resizeHandler);
        s.events.add(window,'scroll',s.scrollHandler);
        if (s.freezeOnBlur) {
          if (isIE) {
            s.events.add(document,'focusout',s.freeze);
            s.events.add(document,'focusin',s.resume);
          } else {
            s.events.add(window,'blur',s.freeze);
            s.events.add(window,'focus',s.resume);
          }
        }
        s.resizeHandler();
        s.scrollHandler();
        if (s.followMouse) {
          s.events.add(isIE?document:window,'mousemove',s.mouseMove);
        }
        s.animationInterval = Math.max(20,s.animationInterval);
        s.timerInit();
      };

      this.start = function(bFromOnLoad) {
        if (!didInit) {
          didInit = true;
        } else if (bFromOnLoad) {
          // already loaded and running
          return true;
        }
        if (typeof s.targetElement === 'string') {
          var targetID = s.targetElement;
          s.targetElement = document.getElementById(targetID);
          if (!s.targetElement) {
            throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
          }
        }
        if (!s.targetElement) {
          s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
        }
        if (s.targetElement !== document.documentElement && s.targetElement !== document.body) {
          s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
        }
        s.resizeHandler(); // get bounding box elements
        s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
        fixedForEverything = s.usePositionFixed;
        if (screenX && screenY && !s.disabled) {
          s.init();
          s.active = true;
        }
      };

      function doStart() {
        if ((this.excludeMobile && !isMobile) || !this.excludeMobile) {
          window.setTimeout(function() {
            s.start(true);
          }, 20);
        }
        // event cleanup
        s.events.remove(window, 'load', doStart);
      }

      // hooks for starting the snow
      s.events.add(window, 'load', doStart, false);

      return this;

    }(window, document));

.fiche input {
display: none;
}
#informations:checked ~ .boutons .lab.infos {
color: white;
}
#physique:checked ~ .boutons .lab.phys {
color: white;
}
#caractere:checked ~ .boutons .lab.car {
color: white;
}
#histoire:checked ~ .boutons .lab.hist {
color: white;
}
#ecran:checked ~ .boutons .lab.ecr {
color: white;
}
#informations:checked ~ .interne .contenu.infos {
display:block;
}
#physique:checked ~ .interne .contenu.phys {
display:block;
}
#caractere:checked ~ .interne .contenu.car {
display:block;
}
#histoire:checked ~ .interne .contenu.hist {
display:block;
}
#ecran:checked ~ .interne .contenu.ecr {
display:block;
}
.fiche .interne .contenu {
display:none;
}
.contenu {
width:90%;
text-align:justify;
font-size:13px;
color:black;
padding:10px;
margin-left:auto;
margin-right:auto;
margin-top:-50px;
height:350px;
overflow:auto;
}
.fiche {
width:600px;
background-color: firebrick;
border:1px solid black;
margin:auto;
}
.fond1 {
width:90%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin:auto;
}
.fond2 {
width:100%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin:auto;
}
.fond3 {
width:97%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
margin:auto;
padding:10px;
transform:rotate(2deg);
border: solid 1px black;
text-align:center;
}
.boutons {
transform:rotate(-90deg);
font-size:12px;
color:black;
position:relative;
left:-316px;
top:-40px;
}
.boutons .lab {
border-top-left-radius: 20px;
border-top-right-radius: 20px; 
background-color: firebrick;
padding-left:10px;
padding-right:10px;
padding-top:5px;
padding-bottom:5px;
border-top:solid 1px black;
border-left:solid 1px black;
border-right:1px solid black;
text-align:center;
}
a.credit_pre {
text-decoration:none;
color:black;
display:block;
text-align:center;
padding:5px;
}
.image_pre {
float:left;
width:200px;
height:320px;
margin-right:10px;
overflow:hidden;
}

<div class="fiche">
<div class="fond1"><div class="fond2"><div class="fond3">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br />

<input checked="" name="fiche" id="informations" type="radio" /> <input name="fiche" id="physique" type="radio" /> <input name="fiche" id="caractere" type="radio" /> <input name="fiche" id="histoire" type="radio" /> <input name="fiche" id="ecran" type="radio" />
<div class="boutons"><label for="ecran" class="lab ecr">Derrière l'écran</label> <label for="histoire" class="lab hist">Histoire</label> <label for="caractere" class="lab car">Caractère</label> <label for="physique" class="lab phys">Physique</label> <label for="informations" class="lab infos">Informations</label></div>
<div class="interne"><div class="contenu infos"><div style="float:left; width:200px; height:320px; margin-right:10px; overflow:hidden;"><img src="http://nimga.fr/f/WhA2S.png" /></div> Ici les infos
</div><div class="contenu phys">Ici la description physique.
</div><div class="contenu car">Ici la description du caractère
</div><div class="contenu hist"> Ici l'histoire
</div><div class="contenu ecr">Ici les informations joueurs
</div></div>
</div></div></div><a href="http://www.never-utopia.com/" style="text-decoration:none; color:black; display:block; text-align:center; padding:5px;">© A-Lice | Never-Utopia</a></div>

CSS
/*Fiche de présentation Epicode 1*/
.corps {
  width: 504px;
  background: #cacaca;
  border: 10px solid #141414;
  margin: auto;
  height: 1484px;
  color: #545454;
  font-family: arial;
}
.korp {
  width: 500px;
  margin: 2px 2px 2px 2px;
  background: #a09e9e;
  height: 1480px;
}
.cita {
  border-bottom: 2px solid #cacaca;
  width: 496px;
  border-top: 2px solid #cacaca;
  text-align: center;
  background: grey;
  color: white;
  padding: 2px;
  font-size: 11px;
  font-style: italic;
}

.ava1 {
  opacity: 0.6;
  -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
  border: 2px solid #cacaca;
  float: left;
  margin-left: 15px;
}
.ava1:hover {
  opacity: 1;
  -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
}
.iden {
  float: left;
  margin-left: 10px;
  width: 250px;
  height: 320px;
  border: 2px solid #cacaca;
  background: #b3b3b3;
}
.haut {
  width: 100%;
  background: grey;
  height: 21px;
  border-bottom: 1px solid #cacaca;
  text-align:center;
  font-size: 18px;
  padding-top: 5px;
}
.bloc {
  height: 135px;
  width: 95%;
  overflow: auto;
  padding-right: 4px;
  font-size: 11px;
  margin: auto;
}
.bloc1 {
  width: 464px;
  background: #b3b3b3;
  border: 2px solid #cacaca;
  margin-left: 15px;
  float: left;
  margin-top: 10px;
  height: 240px;
}
.cont {
  width: 98%;
  height: 210px;
  overflow: auto;
  padding-left: 4px;
  text-align: justify;
  font-size: 11px;
  margin: auto;
  padding: 5px;
}

.bor {
  border-bottom: 10px dotted #cacaca;
  margin-left: 50px;
  width: 400px;
  float: left;
}
.credit {
  float: left;
  width: 500px;
 margin: auto;
}
.bor {
  border-bottom: 10px dotted #cacaca;
  margin-left: 50px;
  width: 400px;
  float: left;
}
.credit {
  float: left;
  width: 500px;
}

<div class="corps"><div class="korp"><img src="http://24.media.tumblr.com/tumblr_mbfol4TAln1runxsho1_500.gif" /><div class="cita">« Y'a des silences qui disent beaucoup ♪ Plus que tout les mots qu'on avoue »</div>
  <div class="ava1"><img src="http://image.noelshack.com/fichiers/2013/19/1368375797-gaki.gif" /></div><div class="iden"><div class="haut">« FICHE D'DENTITEY »</div><div class="bloc"> ♦♦ <b>NOM</b> :: ici
 ♦♦ <b>PRÉNOM</b> :: ici
 ♦♦ <b>AGE</b> :: ici
 ♦♦ <b>DATE DE NAISSANCE</b> :: ici
 ♦♦ <b>ORIENTATION</b> :: ici
 ♦♦ <b>NATIONALITÉ</b> ::
 ♦♦ <b>GROUPE</b> :: ici
 </div><div class="haut">« DERRIERE L'ORDI »</div><div class="bloc"> ♦♦ <b>PRENOM</b> :: ici
 ♦♦ <b>PSEUDO</b> :: ici
 ♦♦ <b>AGE</b> :: ici
 ♦♦ <b>OU TU AS CONNUS LE FOW ?</b> :: ici
 ♦♦ <b>DES COMMENTAIRES ?</b> :: ici
 ♦♦ <b>CODE</b> ::
 ♦♦ <b>AVATAR</b> :: ici
</div></div>
<div class="bloc1"><div class="haut">« FICHE D'DENTITEY »</div><div class="cont">Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.

Dum haec in oriente aguntur, Arelate hiemem agens Constantius post theatralis ludos atque circenses ambitioso editos apparatu diem sextum idus Octobres, qui imperii eius annum tricensimum terminabat, insolentiae pondera gravius librans, siquid dubium deferebatur aut falsum, pro liquido accipiens et conperto, inter alia excarnificatum Gerontium Magnentianae comitem partis exulari maerore multavit.

Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.

Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.

Nihil est enim virtute amabilius, nihil quod magis adliciat ad diligendum, quippe cum propter virtutem et probitatem etiam eos, quos numquam vidimus, quodam modo diligamus. Quis est qui C. Fabrici, M'. Curi non cum caritate aliqua benevola memoriam usurpet, quos numquam viderit? quis autem est, qui Tarquinium Superbum, qui Sp. Cassium, Sp. Maelium non oderit? Cum duobus ducibus de imperio in Italia est decertatum, Pyrrho et Hannibale; ab altero propter probitatem eius non nimis alienos animos habemus, alterum propter crudelitatem semper haec civitas oderit
</div></div><div class="bor"></div><div class="bloc1"><div class="haut">« FICHE D'DENTITEY »</div><div class="cont">Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.

Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

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.

Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.
</div></div><div class="bor"></div><div class="bloc1"><div class="haut">« FICHE D'DENTITEY »</div><div class="cont">Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Circa hos dies Lollianus primae lanuginis adulescens, Lampadi filius ex praefecto, exploratius causam Maximino spectante, convictus codicem noxiarum artium nondum per aetatem firmato consilio descripsisse, exulque mittendus, ut sperabatur, patris inpulsu provocavit ad principem, et iussus ad eius comitatum duci, de fumo, ut aiunt, in flammam traditus Phalangio Baeticae consulari cecidit funesti carnificis manu.

Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.
</div></div><div class="bor"></div>
<center><div class="credit">C O D A G E  P A R  @G A K I.  S U R  <a href="http://epicode.bbactif.com/">E P I C O D E</a></div></center>
 </div></div>

<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT|Great+Vibes&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>.urielgt {font-family: 'Great Vibes', cursive; color: #46282c; font-size: 50px; display: block; text-align: center; transition: 1s;} .urielgt:hover {color: #af272f; transition: 1s;} .urielst{font-family: 'Old Standard TT', serif; display: block; text-align: center; font-style: italic; font-variant: small-caps; color: #f2b45a;} .urielfond3 {width: 400px; background-color: #46282C; margin: auto; box-shadow: 0px 0px 10px #46282C; border-left: 4px solid #F2B45A; text-align: justify; color: #F2B45A; font-size: 11px; font-family: 'Old Standard TT', serif; padding: 15px; }.urieltitre{font-variant: small-caps; Text-shadow: 0px 0px 2px #F2B45A; display: block; letter-spacing: 4px; font-size: 13px; text-align: center; border-bottom: 1px dotted #AF272F; transition: 1s;} .urieltitre:hover {color: #AF272F; text-shadow: 0px 0px 2px #AF272F; transition: 1s; }.uem{font-weight: bold; font-style: italic; transition: 1s;} .uem:hover {color: #AF272F; transition: 1s;}.urielfond3 a {text-decoration: none!important;font-weight: bold; color: #F2B45A; font-size: 8px; transition: 1s;} .urielfond3 a:hover {text-decoration: none!important; color: #AF272F; transition: 1s;}</style>

<center>
<link href='http://fonts.googleapis.com/css?family=Snippet' rel='stylesheet' type='text/css'>
<div style="background-color:#F7F2E3; border-radius:20px;padding:20px;margin:20px;width:500px;font-size:11px;color:#3B3131;text-align:justify;border-bottom: 1px solid #F7A751; border-right: 1px solid #F7A751"><div style="font-family: 'Snippet', sans-serif; font-size: 25px; color: #F7A751;text-shadow: 2px 1px 0px white;"> Avatars & Signatures</div>
<b>ACTE 1 -</b> Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
<div style="border-bottom: 1px solid #F7A751;margin-top:10px;"></div>
<b>ACTE 2 -</b> Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
</div> <!--

--> <div style="background-color:#F7F2E3; border-radius:20px;padding:20px;margin:20px;width:500px;font-size:11px;color:#3B3131;text-align:justify;border-bottom: 1px solid #F7A751; border-right: 1px solid #F7A751"><div style="font-family: 'Snippet', sans-serif; font-size: 25px; color: #F7A751;text-shadow: 2px 1px 0px white;"> Règles de RP</div>
<b>ACTE 1 -</b> Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.
<div style="border-bottom: 1px solid #F7A751;margin-top:10px;"></div>
<b>ACTE 2 -</b> Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.

[center][url=http://libre-graph.forumperso.com/]<font color="#C9C9C9">©[size=9] FICHE CRÉÉE PAR REIRA DE LIBRE GRAPH'[/size]</font>[/url][/center]
</div>
</center>

<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/ROTAR_RP.css" rel="stylesheet" type="text/css"><!-- BOITE - COULEUR BORDURE BAS PERSONNALISABLE --><div id="ROTAR" style="border-color:pink;"><!-- BOITE TITRE - COULEURS PERSONNALISABLES --><div class="tlROTAR" style="background-color:pink;"><p style="border-color:white; color:white;">Titre</p></div><div class="bdROTAR"><!-- IMAGE 100*100 - REDIMENSIONNEMENT AUTOMATIQUE --><img src="..." /><!-- CREDIT --><a class="cdtROTAR" href="http://crushcrushcrush.actifforum.com" target="_blank"><img src="http://www.aht.li/2456212/PUF.png" /></a><!-- INFORMATIONS DISSIMULEES - COULEURS PERSONNALISABLES --><p style="background-color:#db9b9b; color:white;">▬ <i>ft. ...</i><br/>Informations diverses.</p></div><!-- MESSAGE - COULEURS PERSONNALISABLES --><div class="msgROTAR" style="background-color:#ecc2cb; border-color:#db9b9b; color:#191919;"><table><tr><td style="padding-right:35px;"><center><b>The elven version</b></center><br/>hahren na melana sahlin<br/>emma ir abelas<br/>souver'inan isala hamin<br/>vhenan him dor'felas<br/>in uthenera na revas<br/><br/>vir sulahn'nehn<br/>vir dirthera<br/>vir samahl la numin<br/>vir 'lath sa'vunin'</td><td><center><b>The translation</b></center><br/>elder your time has come<br/>now I am filled with sorrow<br/>weary eyes need resting<br/>heart has become grey and slow<br/>in waking sleep is freedom<br/><br/>we sing, rejoice<br/>we tell the tales<br/>we laugh and cry<br/>we love one more day</td></tr></table><br>
BLABLABLABLABLA
</div></div>

.portrait {
    height: 252px;
    width: 252px;
    border-right: 3px #e6e6e6 solid;
    border-left: 3px #e6e6e6 solid;
    background: #212121;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -o-border-radius: 200px;
    -htm-border-radius: 200px;
    -webkit-border-radius: 200px;
    margin-top: 27px;
}

.portrait_boite1 {
    overflow: auto;
    width: 500px;
    height: 125px;
    background: #000000;
    box-shadow: 0px 1px 10px #000000;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    -htm-border-radius: 30px;
    -webkit-border-radius: 30px;
    opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    filter: alpha(opacity=80);
}

.portrait_boite2 {
    overflow: auto;
    width: 500px;
    height: 220px;
    background: #000000;
    box-shadow: 0px 1px 10px #000000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -htm-border-radius: 10px;
    -webkit-border-radius: 10px;
    opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    filter: alpha(opacity=80);
}

.portrait_shadow {
    overflow: auto;
    width: 500px;
    height: 30px;
    background: #000000;
    box-shadow: 0px 1px 10px #000000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -htm-border-radius: 10px;
    -webkit-border-radius: 10px;
    opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-transition: 1s all;
 /* Transition et ses compatibilités */
    -webkit-transition: 1s all;
    -o-transition: 1s all;
    -ms-transition: 1s all;
    -khtml-transition: 1s all;
    transition: 1s all;
}

.portrait_boite3 {
    overflow: auto;
    width: 500px;
    height: 150px;
    background: #000000;
    box-shadow: 0px 1px 10px #000000;
    border-radius: 10px 10px 110px 110px;
    -moz-border-radius: 10px 10px 110px 110px;
    -o-border-radius: 10px 10px 110px 110px;
    -htm-border-radius: 10px 10px 110px 110px;
    -webkit-border-radius: 10px 10px 110px 110px;
    opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    filter: alpha(opacity=80);
}

.portrait_id {
    font-family: Georgia;
    font-size: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.95);
    color: #046380;
    margin-top: -29px;
    text-align: right;
    margin-right: 40px;
}

.portrait_titre {
    font-family: Georgia;
    font-size: 18px;
    text-shadow: 1px 0px 7px #046380;
    color: #046380;
    text-align: right;
    border-bottom: 2px #212121 dotted;
    letter-spacing: 8px;
}

.portrait_sous_titre {
    font-family: Arial;
    font-variant: small-caps;
    font-size: 13px;
    color: #046380;
    letter-spacing: 2px;
    text-shadow: 0px 0px 1px #046380;
    text-align: left;
}

.avatar {
    border: 1px dashed #ffffff;
    -moz-border-radius: 0px 0px 0px 70px;
    -webkit-border-radius: 0px 0px 0px 70px;
    border-radius: 0px 0px 0px 70px;
}

<center><div style ="width : 550px; height : 1200px; background : url(http://i.imgur.com/x7ccjff.jpg);  border-radius: 190px;-moz-border-radius: 190px;-o-border-radius: 190px;-htm-border-radius: 190px;-webkit-border-radius: 190px; border-right : 5px solid #000000; border-left : 5px solid #000000; "><br /><div class="portrait" style="background : url(http://i.imgur.com/ofEV6iY.jpg);"><div style="font-size : 28px; font-family : Georgia; text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.95);">NOM & PRENOM</div>
    </div><div style="font-size : 11;text-shadow: 1px 0px 2px rgba(0, 0, 0, 0.95);">PETITE CITATION</div>
    <div class="portrait_boite1"><span style="color : #FFFFFF; font-size : 12px; float : right ; margin-right : 200px; padding : 3px; text-align : left;"><span class="portrait_sous_titre">✗ Nom :</span>{KUMA.}
<span class="portrait_sous_titre">✗ Prénom :</span>{KUMA}
<span class="portrait_sous_titre">✗ Sexe :</span>{genre}
<span class="portrait_sous_titre">✗ Âge :</span>{âge}
<span class="portrait_sous_titre">✗ Date de naissance :</span>{JJ/MM}
<span class="portrait_sous_titre">✗ Origine :</span>{origine}
<span class="portrait_sous_titre">✗ Groupe :</span>{KUMA}</span>
   
    </div><div class ="portrait_boite2"><div class="portrait_titre">Description du Personnage ;</div><div style="font-family : Arial; font-size : 11px; color : #FFFFFF;">Décrivez le physique et le mental de votre personnage ;
style vestimentaire, caractère, qualités, défauts, ce qu'il aime ou déteste...la rengaine, quoi.
</div>
   
</div><div class ="portrait_boite2"><div class="portrait_titre">Passé du Personnage ;</div><div style="font-family : Arial;font-size : 11px;color : #FFFFFF;">L'histoire de votre personnage...
</div>
   
    </div><div class="portrait_shadow">
       
    </div><div class="portrait_boite3"><div class="portrait_titre">what about You ?</div><span style="float: left; padding : 4px; margin-left : 4px;"><img src="http://i.imgur.com/SjtjYB1.jpg" class="avatar"></span><div style="font-family : Arial;font-size : 11px;color : #FFFFFF; text-align : left;">
<span class="portrait_sous_titre"> Votre prénom et/ou pseudo ?</span> {KUMA}
 <span class="portrait_sous_titre">Âge ?</span> {KUMA}
<span class="portrait_sous_titre">Niveau RP ?</span> {depuis combien de temps vous rp ?}
<span class="portrait_sous_titre">Comment avez vous connu le forum ?</span>{google, top-forum, d'une personne...}
<span class="portrait_sous_titre">Code ?</span>{////}</div>
          </div>
    <div style="font-variant: small-caps;font-size: 11px;color: #5C5C5C; letter-spacing: 5px;"> Code made by <a href ="http://www.never-utopia.com/">Reckoner</a></div></div></center>