<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash|Playball&subset=latin,latin-ext' rel='stylesheet' type='text/css'><style>.fond {margin-left: auto; margin-right : auto; width: 550px; background-color: #BFBDBD; background-image: url(); background-repeat: repeat; border-top:10px solid #444444; border-bottom: 10px solid #444444; border-left: 1px solid #444444; border-right: 1px solid #444444; border-radius: 0px 0px 10px 10px;  box-shadow: 0px 0px 0px #3B1F2D;}.head {width: 550px; border-bottom: 10px solid #444444}.titre{transition: 2s ease; display: inline; color: #F6ECDB; font-family: 'Berkshire Swash', cursive; font-size: 35px; position: relative; top: -15px}.titre:hover{color: #444444} .soustitre{font-family: 'Playball', cursive; color: #444444; margin-left: auto; margin-right: auto; width: 550px; text-align: center; font-size: 25px; margin-bottom: -5px; transition: 2s ease;} .soustitre:hover{color: #F6ECDB} .bloc{background-color: #696969; border-left: 2px solid #444444; border-right: 2px solid #3B1F2D; margin-right: auto; margin-left: auto; width: 500px; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px} .mef1,.mef2,.mef3,.mef4,.mef5,.mef6,.mef7 {color: #C8C6C4;text-shadow: 0px 0px 2px #C8C6C4; transition: 1s;}.mef1:hover {color: #EFEFEF;text-shadow: 0px 0px 2px #EFEFEF; }.mef2:hover {color: #EFEFEF;text-shadow: 0px 0px 2px #EFEFEF; }.mef3:hover {color: #EFEFEF;text-shadow: 0px 0px 2px #EFEFEF; }.mef4:hover {color: #EFEFEF;text-shadow: 0px 0px 2px #EFEFEF; }.mef5:hover {color: #EFEFEF;text-shadow: 0px 0px 2px #EFEFEF; }.mef6:hover {color: #EFEFEF;text-shadow: 0px 0px 2px #EFEFEF; }.mef7:hover {color: #EFEFEF;text-shadow: 0px 0px 2px #EFEFEF; }.icone{margin: auto; display: inline-block; border-radius: 50px 50px 50px 50px;border-top: 2px solid #3B1F2D; border-bottom: 2px solid #444444; transition: 2s; }.icone:hover{transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); }.bulle span{position: absolute; top: auto; left: auto; width: 300px; height: auto; display: none; background-color: #644A52; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px; z-index: 999; }.bulle:hover span{display: block}.titre2{font-family: 'Playball', cursive; color: #3A1F2D; margin-left: auto; margin-right: auto; width: 240px; text-align: center; font-size: 25px; margin-bottom: -5px; transition: 2s ease;} .titre2:hover{color: #F6ECDB} .bloc2 {background-color: #696969; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; margin-right: auto; margin-left: auto; width: 240px; height: 250px; overflow: auto; padding: 5px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px}#deroulant div {background-color: #696969; padding: 10px; text-align: justify; color: #A19D99; font-family: times new roman; font-size: 12px; width: 180px; height: 300px ; border-left: 2px solid #3B1F2D; border-right: 2px solid #3B1F2D; position: relative; overflow: hidden; } #deroulant div img {left: 0px; top: 0px; position: absolute; transition: transform 0.5s ease-in-out; -moz-transition: -moz-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out;} #deroulant div:hover img { transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px);} #deroulant a {text-decoration : none!important; color: #C8C6C4; transition : 1s} #deroulant {text-decoration : none!important; color: #C8C6C4; text-shadow: 0px 0px 2px #C8C6C4; transition : 1s}</style><div class="fond"><img class="head" src="IMAGE 550*350px" alt="550 de large"><center><span class="titre">Prénom P. Nom</span></center>
<div style="width: 500px"><div style="width: 300px; float: left"><div class="soustitre" style="width: 300px">Informations</div><div class="bloc" style="width: 250px; height: 297px; overflow: auto;">
<span class="mef2">Nationalité</span> ICI
<span class="mef3">Âge</span> ICI
<span class="mef4">Date de naissance</span> ICI
<span class="mef5">Lieu de naissance</span> ICI
<span class="mef6">Groupe</span> ICI
<span class="mef6">Race</span> ICI
<span class="mef7">Pouvoir</span> ICI
<span class="mef7">Décris le en quelques lignes</span> ICI</div></div><div style="width: 200px; float: right"><div id="deroulant"><div><p style="font-family: times new roman; font-size: 12px; text-shadow: none;"><span class="mef1">Où nous as tu trouvé? </span> ICI
<span class="mef1">Tes disponibilités ?</span> ICI
<span class="mef1">Tu as lu le règlement ?</span> ICI
<span class="mef1">Tu as envie de nous dire un petit mot doux tout mignonnet ? Ou truc constructif ?</span> ICI



</p><img src="IMAGE 200*320px" /></div></div></div></div><div style="clear:both"></div><br /><div class="head"></div><center><span class="titre">Citation</span>
</center>

<div style="margin-left: auto; margin-right: auto; width: 500px"><div style="width: 240px; height: 300px; float: left"><div class="titre2">Physique</div><div class="bloc2"><span class="mef7">Raconte nous à quoi tu ressemble en 10 lignes minimum</span></div></div><div style="width: 240px; height: 300px; float: right"><div class="titre2">Caractère</div><div class="bloc2"><span class="mef1">Tu as un sale caractère ou pas du tout ? Dis nous tout en 10 lignes minimum</span></div></div><div style="clear: both"></div></div><br /><div class="soustitre">Je veux savoir ta vie !</div><div class="bloc"><span class="mef5">Raconte nous tous en minimum 20 lignes</span><br /><br /><br /></div><center><a href="http://www.never-utopia.com" style="color: #3B1F2D; font-size: 10px">© Narja - Never-Utopia</a></center></div>