<div id="rup"><div id="miss"><div id="vanjie"><span>Citation de la mort qui tue</span></div><div id="vanjiee" style="background: url(https://via.placeholder.com/500x300)"> </div><div id="texan"><div class="brookes"><div class="brooke"><input type="radio" id="brooke-1" name="brooke-group" checked><label for="brooke-1" style="margin-top: 10px;"> <span class="th th-planet-1"></span>
<n>data</n>
</label><div class="lynn"><div id="whi"><div class="imagen" style="background: url(https://via.placeholder.com/210x230)"></div><div class="playedby"> Feat <span>personnage - oeuvre </span></div></div><div id="datitosi"><div class="dato"> <b>Nom Prénom :</b> Ici </div><div class="dato"><b>Etage actuel</b> ici</div><div class="dato"> <b>Age</b> Ici </div><div class="dato"> <b>Equipe</b> Ici </div><div class="dato"> <b>Position Principale</b> Ici </div><div class="dato"> <b>Autres Positions</b> Ici </div><div class="dato"> <b>Rang Spécial</b>Prince/Princesse</div></div></div></div><div class="brooke"><input type="radio" id="brooke-2" name="brooke-group"><label for="brooke-2" style="margin-left: 125px; margin-top: 10px"><span class="th th-star"></span>
<n>Capacités</n>
</label><div class="lynn"><div id="lory"><div id="vida">
     <h1>Capacités de la Position 1 </h1>

:diamonds: <b>Capacité 1 </b><i>- Niveau :</i> description

:diamonds: <b>Capacité 2 :</b><i>- Niveau :</i> description

:diamonds: <b>Capacité 3 :</b><i>- Niveau :</i> description

<h1>Capacités de la Position 2 </h1>


     </div></div></div></div><div class="brooke"><input type="radio" id="brooke-3" name="brooke-group"><label for="brooke-3" style="margin-top: 10px; margin-left: 249px;"> <span class="th th-sun"></span>  
<n>Inventaire</n></label><div class="lynn"><div id="lory"><div id="vida">
     <h1>Mes possessions </h1>

 :diamonds:<b>Objet :</b> Description de l'objet
     
     </div></div></div></div><div class="brooke"><input type="radio" id="brooke-4" name="brooke-group"><label for="brooke-4" style="margin-top: 10px; margin-left: 374px;"> <span class="th th-moon"></span>  
<n>Perso</n></label><div class="lynn"><div class="rightside"><div class="shun"><div class="min"> J'aime</div><div class="mon"><b>aime</b> <b>aime</b> <b>aime</b> <b>aime</b> <b>aime</b> <b>aime</b> <b>aime</b> </div></div><div class="shun" style="margin-top: 5px"><div class="min"> J'aime pas </div><div class="mon"><b>aime pas</b> <b>aime pas</b> <b>aime pas</b> <b>aime pas</b> <b>aime pas</b> <b>aime pas</b> <b>aime pas</b> </div></div></div><div id="xtra"><div id="dat"> <h1><u>Résumé du perso :</u></h1>

blablabla

<h1><u>Liens aux factions :</u></h1>

blablabla
     </div></div></div></div></div></div></div><div id="crdts"><a href="https://illmakegaycodesforu.tumblr.com/">Gitano</a>
</div></div>

<style type="text/css">#miss {border: 5px solid #fff; outline: 1px solid #eaeaea; position: relative; color: #555; margin-top: -1px;}#rup {width: 510px; border: 10px solid #C5E5EE; outline: 1px solid #b2d4de; margin: 0 auto; color: #555; background: #fff}#vanjie {background: #f5f5f5; height: 100px; border: 1px solid #eaeaea; text-align: center}#vanjie span {margin-right: 20px; border-bottom: 5px solid #C5E5EE; font: 20px 'Noto Sans HK', sans-serif; text-transform: uppercase; font-weight: bold; position: relative; top: 28px; color: #555}#crdts{position: relative; padding: 5px; text-align: center; background: #f9f9f9; outline: 1px solid #eaeaea; font: 7px verdana; text-transform: uppercase; letter-spacing: 1px}#crdts a{color: #555}#vanjiee {height: 300px;}.list {background: #828; width: 35px; position: relative; top: 20px; left: 20px}#texan {background: #f5f5f5; height: 70px; border: 1px solid #eaeaea; text-align: right; position: relative; height: 393px}.brookes {position: relative; height: 500px; width: 500px; clear: both; position: relative; top: -500px;}.brooke label {display: block; font-size: 23px;text-transform: uppercase; letter-spacing: 3px; text-align: center; position: absolute; left: -1px; top: 490px; width: 119px; border: 1px solid #eaeaea; background: #f9f9f9; height: 70px; color: #555}.brooke span {display: block; text-align: center; font-size: 26px; margin-top: 18px}.brooke n {display: block; font: 7px verdana; letters-pacing: 5px; margin-top: -14px}#datitosi {border: 3px solid #fff; outline: 1px solid #eaeaea; height: 299px; width: 250px; background: #fff}#datitosi .dato {background: #f9f9f9; border: 1px solid #eaeaea; text-align: right; font: 9px verdana; padding: 14px 10px; margin: 2px}#datitosi .dato b {float: left; text-transform: uppercase; font-size: 8px; color: #b2d4de}#whi {float: right; height: 300px; width: 215px}#whi .imagen {bordeR: 3px solid #fff; outline: 1px solid #eaeaea; height: 230px}#whi .playedby {border: 10px solid #C5E5EE; outline: 1px solid #b2d4de; height: 29px; background: #C5E5EE; text-align: center; font: 10px 'consolas'; text-transform: uppercase; color: #fff; padding: 10px 0px}.playedby span {display: block; margin-top: 0px; font-size: 15px; font-weight: bold}#lory {border: 5px solid #fff; outline: 1px solid #eaeaea; height: 295px; background: #fff;}#vida {background: #f9f9f9; outline: 1px solid #eaeaea; height: 255px; overflow: auto; padding: 20px; font: 11px verdana; color: #222;}#vida h1 {color: #555; text-transform: uppercase; border-bottom: 5px solid #C5E5EE; display: inline; padding: 0px}#vida b {color: #b2d4de; text-transform: uppercase}#vida i {font-style: italic; color: #b2d4de;}.rightside {width: 190px; height: 300px; float: right;} .rightside .shun {border: 3px solid #fff; outline: 1px solid #eaeaea; background: #fff; height: 145px}.rightside .min {border: 1px solid #eaeaea; background: #f9f9f9; padding: 10px; font: 7px verdana; text-transform: uppercase; letter-spacing: 1px; height: 9px}.rightside .mon {background: #f9f9f9; border: 1px solid #eaeaea; padding: 10px; text-align: right; height: 93px; margin-top: -1px; overflow-y:auto;}.mon b {background:#C5E5EE; border-radius: 25px; padding: 2px 7px; font: 9px verdana; text-transform: uppercase; color: #fff;}#xtra {height: 300px; width: 277px; border: 3px solid #fff; outline: 1px solid #eaeaea}#dat {border: 1px solid #eaeaea; padding: 20px; font: 11px verdana; text-align: justify; height: 258px; color: #555; overflow: auto;}.brooke [type=radio] {display: none;}[type=radio]:checked ~ label ~ .lynn { z-index: 1; opacity: 1; filter: alpha(opacity=100)}.lynn {width: 480px; height: 310px; position: absolute; left: 10px; top: 580px; text-align: justify; opacity: 0; filter: alpha(opacity=0); transition: 0.5s}[type=radio]:checked ~ label {color: #fff; z-index: 2; background: #C5E5EE}[type=radio]:checked ~ label ~ .lynn { z-index: 1;}</style><link href="https://fonts.googleapis.com/css?family=Noto+Sans+HK:100,400,900&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<div id="ale"><div id="jandra"><div id="jani"><div id="letrasbigs"> LIENS DE</div><div id="letrasmini"><span>NOM Prénom</span></div></div>  
<div id="alfo"><div class="nso" style="background: url(https://via.placeholder.com/110)"><n></n><m></m><span class="th th-heart-1"></span><div class="cito">Nom Prénom <i>Lien</i></div></div></div> <div id="alfo"><div class="nso" style="background: url(https://via.placeholder.com/110)"><n></n><m></m><span class="th th-heart-1"></span><div class="cito">Nom Prénom<i>Lien</i></div></div></div> <div id="alfo"><div class="nso" style="background: url(https://via.placeholder.com/110)"><n></n><m></m><span class="th th-heart-1"></span><div class="cito">Nom Prénom <i>Lien</i></div></div></div> <div id="alfo"><div class="nso" style="background: url(https://via.placeholder.com/110)"><n></n><m></m><span class="th th-heart-1"></span><div class="cito">Nom Prénom <i>Lien</i></div></div></div> <div id="alfo"><div class="nso" style="background: url(https://via.placeholder.com/110)"><n></n><m></m><span class="th th-heart-1"></span><div class="cito">Nom Prénom <i>Lien</i></div></div></div> <div id="alfo"><div class="nso" style="background: url(https://via.placeholder.com/110)"><n></n><m></m><span class="th th-heart-1"></span><div class="cito">Nombre del personaje <i>Amistad</i></div></div></div>
</div></div><div class="crdts"><a href="https://gitanodoescodes.tumblr.com/">— gitano;</a></div>

<style>@font-face {font-family: 'Bebas'; src: url('https://dl.dropbox.com/s/so3s9ix3a0kbom1/BebasNeue-Regular.ttf');} #ale {width: 500px; background: #fff; border: 1px solid #eaeaea; position: relative; margin: 0 auto; text-align: center;}#jandra #jani {margin: 10px; height: 95px; position: relative; overflow: hidden;}#jani #letrasbigs {font: 130px 'Bebas'; color: #C5E5EE; position: absolute; top:-23px; width: 1000px; text-align: center; left: -300px; font-style: italic; height: 120px; overflow: hidden; letter-spacing: -8px; font-weight: bold;}#jani #letrasmini {text-align: center; position: absolute; top: 44px;left: 0px; right: 0px; color: #9faeab; font: 8px verdana; text-transform: uppercase;}#jani #letrasmini span {background: #fff; padding: 7px; text-transform: uppercase; letter-spacing: 3px;}#jandra {width: 450px; margin: 0 auto; border: 1px solid #ecf0f8; margin: 22px; padding-bottom: 10px;}#alfo {border: 1px solid #ecf0f8; height: 130px; width: 130px; margin: 5px; display: inline-block; vertical-align: top;}#alfo .nso {margin: 10px; width: 110px; height: 110px; position: relative; overflow: hidden; background-size: 100%!important}#alfo n {display: block; width: 110px; height: 110px; background: #ffffff70; position: absolute; top: -110px; left: -110px;transition:1s;}#alfo m {display: block; width: 110px; height: 110px; background: #ffffff70; position: absolute; top: 110px; left: 110px;transition:1s;}#alfo:hover n, #alfo:hover m {position: absolute; top: 0px; left: 0px}#alfo span {position: absolute; display: block; font-size: 80px; height: 80px; width: 80px; margin: 15px; color: #D5E0DE; transition:1s; top: -100px;}.cito {text-align: center;position: absolute; top: 130px;left: 0px; right: 0px; color: #9faeab; font: 8px verdana; text-transform: uppercase; line-height: 110%; background: #fff; padding: 5px; margin: 10px; transition:1s;}.cito i {color: #999; display: block; font-size: 8px; text-transform: lowercase;}#alfo:hover span {top: 0px}#alfo:hover .cito {top: 30px;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}</style><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<center><div class="tgb1">Je suis un titre</div><div class="tgb2"> <div class="tgb3">
<p>En cours</p>
<span> Titre (lien)</span><i>Ft </i><br>
<span> Titre (lien)</span> <i>Ft</i> <br>
<span> Titre (lien)</span> <i>Ft</i>

<p>En pause | Abandonnés</p>
<span> Titre (lien)</span><i>Ft </i><br>
<span> Titre (lien)</span> <i>Ft</i> <br>
<span> Titre (lien)</span> <i>Ft</i>

<p>Finis</p>
<span> Titre (lien)</span><i>Ft </i><br>
<span> Titre (lien)</span> <i>Ft</i> <br>
<span> Titre (lien)</span> <i>Ft</i>

</div> <div class="tgb4"><div class="tgb4in" style="background: url(https://via.placeholder.com/120x120)"> </div><div class="tgb4in2"><span>Rang</span> F/E/D/C/A</div><div class="tgb4in3">Petit Commentaire</div>
</div></center><div class="crdts"><a href="http://illmakegaycodesforu.tumblr.com/">— gitano;</a></div>

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style type="text/css">.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}.tgb1{width: 460px; height: 20px; background: #82D888; font: 16px 'Oswald', sans-serif; color: #fff; text-transform: uppercase; padding: 20px;}.tgb2{width: 498px; height:360px; background: #C5E5EE; border: 1px solid #C5E5EE; text-align: center;}.tgb3 {width: 250px; height: 259px; background: #fff; position: relative; left: 20px; top: 20px; border: 1px solid #d3d3d3; overflow: auto; text-align: justify; font: 12px calibri; padding: 30px;color:#262626;line-height:107%;}.tgb3 p {font: 16px 'Oswald', sans-serif; text-transform: uppercase; font-weight: bold; color: #82D888;}.tgb3 span {font: 12px cambria;}.tgb4 {width: 140px; ; position: relative; top: -300px; left: 340px; text-align: center;}.tgb4in {padding: 10px; border: 10px solid #fff; outline: 1px solid #d3d3d3; width: 100px; height: 100px; background-size: 100% !important;}.tgb4in2 {width: 120px; background: #fff; padding: 10px; text-align: left; outline: 1px solid #d3d3d3; font: 11px calibri; margin-top: 3px; }.tgb4in2 span {background: #82D888; padding: 5px; color: #fff; border-radius: 25px;}.tgb4in3 {width: 120px; background: #fff; padding: 10px; outline: 1px solid #d3d3d3; font: 11px calibri; margin-top: 3px; height: 46px;}</style>