<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B57igAgMUroWcVhKc2h4N3VmZ3M" />
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'><div class="rp_styx"><img src="http://zupimages.net/up/16/14/unsw.png" /><div class="content_styx"><div class="titre_styx">TITRE</div><span class="left_styx">"</span><span class="right_styx">"</span><div class="quote_styx">CITATION</div><div class="parte_styx"><span class="nom_styx">TON PERSO</span> feat TES CAMARADES</div><div class="text_styx">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div></div><div class="credit_styx">gotheim for styx</div></div>

<div class="presentation"><div class="nom_perso">Nom du personnage</div>
 <div class="quote_presentation">petite citation pour représenter ton personnage</div>
<div class="img_prez img1"></div>
 <table><tr><td><div class="cadre_perso chat"><div class="titre_presentation">Carte d'identité</div>
<div class="questions_cadre"><b>Nom:</b>
<b>Sexe:</b>
<b>Âge:</b>
<b>Clan:</b>
<b>Rang:</b></div></div></td>
 <td><div class="cadre_perso"><div class="titre_presentation">Derrière l'écran</div>
<div class="questions_cadre"><b>Votre prénom:</b>
<b>Votre PUF:</b>
<b>Votre âge:</b>
<b>Comment avez-vous connu le forum?</b>
<b>Quelles sont vos disponibilités?</b>
<b>Avez-vous des suggestions à nous faire?</b>
<b>Codes du règlement:</b></div></div></td></tr></table>
<div class="img_prez img2"></div>
<div class="partie_presentation"><div class="titre_presentation">Physique</div>
minimum x lignes</div>
<div class="img_prez img3"></div>
<div class="partie_presentation"><div class="titre_presentation">Mental</div>
minimum x lignes</div>
<div class="img_prez img4"></div>
<div class="partie_presentation"><div class="titre_presentation">Histoire</div>
minimum x lignes</div>
</div>

.presentation {
  margin:auto;
  width: 600px;
  background-color: #8fe966; /* couleur de fond de la fiche */
  color: #1e2a00; /* couleur du texte */
  font-family: serif; /* police de la presentation, je vous conseille de ne pas y toucher*/
  text-align:center;
  padding: 10px 0px;
}

.nom_perso {
  text-transform: uppercase;
  font-size: 25px;
  color: #303a15;
  letter-spacing: 0.3em;
  text-shadow: 0px 0px 1px #303a15;
  margin:auto;
}

.quote_presentation {
  margin-top: -35px;
  background-color: #e3f4db;
  text-transform: lowercase;
  font-size:10px;
}


.img_prez {
  width: 560px; /* largeur des images */
  height: 30px; /* hauteur des images */
  border: 1px solid #4E6020;
  box-sizing:border-box;
  margin:auto;
}

.img1 {
  background-image: url("http://zupimages.net/up/16/15/64l2.png"); /* url de la premiere image */
  margin-top: -10px;
}

.img2 {
  background-image: url("http://zupimages.net/up/16/15/p4dm.png"); /* url de la deuxieme image */
  margin-top:10px;
}

.img3 {
  background-image: url("http://zupimages.net/up/16/15/stm8.png"); /* url de la troisieme image */
  margin-top:-10px;
}

.img4 {
  background-image: url("http://zupimages.net/up/16/15/mbgp.png"); /* url de la quatrieme image */
  margin-top:-10px;
}

.presentation table {
  margin:auto;
  margin-top: -40px;
}

.cadre_perso { /* Pour les deux cadres: ceux sur le chat et celui du membre*/
  display:inline-block;
  width:200px;
  background-color: #e3f4db; /* couleur de fond */
  padding:5px 10px;
  border-left: 15px solid #8fe966; /* même couleur que celle de fon, c'est pour séparer les deux cadres */
  border-right: 15px solid #8fe966; /* idem */
}

.titre_presentation { /* Codage pour les différents petits titres */
  text-transform: uppercase;
  font-size: 13px;
  color: #303a15; /* couleur du text */
  text-shadow: 0px 0px 1px #303a15; /* ombre du texte */
  border-bottom: 1px solid #303a15; /* ligne en dessous des titres, le bord */
}

.questions_cadre { /* Codage pour le contenu des codes, permet d'avoir une scrollbar*/
  height: 140px;
  overflow:auto;
  margin-top: -5px;
  text-align:justify;
}

.partie_presentation { /* correpond aux cadres Histoire, Mental et Physique */
  width:500px;
  background-color: #e3f4db; /* couleur de fond */
  padding:5px 15px;
  margin:auto;
  text-align:justify;
  margin-top: -5px;
}

.partie_presentation .titre_presentation {
  font-size: 16px;
  text-align:center;
}

.questions_cadre::-webkit-scrollbar {
  width: 5px; /* largeur de la scrollbar */
}

.questions_cadre::-webkit-scrollbar-track-piece {
  background-color: #e3f4db; /* couleur de fond de la scrollbar */
}

.questions_cadre::-webkit-scrollbar-thumb {
  background-color: #1e2a00; /* couleur du bouton de la scrollbar */
}

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B57igAgMUroWcWx0X0VnOXUxdEk" />
<link href='https://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
<div class="fichelizzie"><h2>nom du personnage</h2><img src="https://66.media.tumblr.com/ca48956d30959feaca890eaa2313e544/tumblr_nsefqker8E1rbu1gno1_400.gif" />
<div class="left id"><b>✿ Rang:</b> écrire ici
<b>✿ Clan:</b> écrire ici
<b>✿ Age:</b> écrire ici
<b>✿ Sexe:</b> écrire ici
<b>✿ Physique:</b> écrire ici
</div><div class="right"><b>✿ Histoire ✿</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div><h3>les liens</h3><div class="left"><b>✿ liens recherchés ✿</b>
✿ lien ici
✿ lien ici
</div><div class="right"><b>✿ liens trouvés ✿</b>
✿ lien ici
✿ lien ici
</div><h3>les rps</h3><div class="left"><b>✿ rps réservés ✿</b>
✿ personne ici
✿ personne ici
</div><div class="right"><b>✿ rps en cours ✿</b>
✿ rp ici
✿ rp ici
</div><h6>Citation ici trololol</h6></div>

</div><div class="right"><b>✿ rps en cours ✿</b>