Modèle de fiche technique.

Voici un modèle de fiche de présentation pour votre fiche technique, si vous n'avez pas les capacités de crée le vôtre ou que vous n'avez pas envie d'en choisir un autre. (N'est pas la création totale du staff, crédit en bas de la fiche, ne pas le supprimer s'il vous plaît)

Citation

Alter: ici

Code:

<div class="aay-presgroup3">Prenom nom</div>
<table><tr><td><div class="aay-photo"><img src="http://i.imgur.com/717gIMo.png"/><div class="aay-photo-src">Citation</div></div></td>
<td><div class="aay-presinfo"><span class="info">Alter:</span> ici</div></td></tr></table>
<div class="aay-presinfo2"><span class="info">Informations utiles:</span>
<span class="info">Style de combat: </span> réponse
<span class="info">Age:</span> réponse
<span class="info">Date de naissance: </span> réponse
<span class="info">Taille: </span> réponse
<span class="info">Groupe Sanguin:</span> réponse
<span class="info">Aime:</span> réponse
<span class="info">Aime pas:</span> réponse</div></div>
<div class="aay-presgroup">Puissance</div><div class="aay-presname">NOTE<div class="aay-pointsblancs"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div></div>

<div class="aay-presname">NOTE<div class="aay-pointsblancs"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div></div><div class="aay-presgroup2">VITESSE</div>

<div class="aay-presgroup">TECHNIQUE</div><div class="aay-presname">NOTE<div class="aay-pointsblancs"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div></div>

<div class="aay-presname">NOTE<div class="aay-pointsblancs"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div></div><div class="aay-presgroup2">INTELLIGENCE</div>

<div class="aay-presgroup">ESPRIT D'équipe</div><div class="aay-presname">NOTE<div class="aay-pointsblancs"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div><div class="aay-pointsgris"></div></div>

<div class="aay-title">Equipement et inventions</div>
<div class="aay-bloctxt"><span class="infodeouf">Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.</span></div>
<div class="aay-title">Techniques de combats</div>
<div class="aay-bloctxt"><span class="infodeouf">Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.</span>



<style type="text/css">.aay-presgroup {margin-left: auto; background: #454545; width: 150px; padding: 10px;text-align: center; color: #f4f4f4; font-family: 'Abel'; text-shadow: 1px 2px 1px rgba(0,0,0,0.4); display: inline-block; font-size: 20px; line-height: 23px; text-transform: uppercase; margin-right: 10px;} .aay-presgroup2 {margin-left: 10px; background: #454545; width: 150px; padding: 10px;text-align: center; color: #f4f4f4; font-family: 'Abel'; text-shadow: 1px 2px 1px rgba(0,0,0,0.4); display: inline-block; font-size: 20px; line-height: 23px; text-transform: uppercase; margin-right: 10px;} .aay-presname {margin-right: auto; width: 350px; padding: 3px; text-align: left; color: #f808080; background: #686868; overflow: hidden; font-family: 'Abel'; font-size: 35px; line-height: 37px; display: inline-block; vertical-align: top; text-transform: uppercase; letter-spacing: 1px;}.aay-presinfo { width: 293px; height: 192px; border-top: #808080 4px solid; border-bottom: #808080 4px solid; overflow: auto; padding: 10px;margin-left:5px; background: #eaebeb;}.info {color: black; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 15px; text-transform: uppercase; font-style: normal;} .aay-photo {width: 215px; background: black; vertical-align: top; height: 220px; overflow: hidden;} .aay-photo img {-webkit-filter: grayscale(80%); filter: grayscale(80%); transition: 1s; -webkit-transition: 1s; position: relative; z-index: 1;}.aay-photo-src {position: relative; top: -60px; background: rgba(195,195,195,1); color: black; text-align: center; font-size: 15px; z-index: 2; padding: 5px; opacity: 0; transition: 1s; -webkit-transition: 1s;}.aay-photo:hover img {-webkit-filter: grayscale(0%); filter: grayscale(0%); transition: 2s; -webkit-transition: 2s;} .aay-photo:hover .aay-photo-src {opacity: 1; transition: 2s; -webkit-transition: 2s;} .aay-bloctxt {background: #eaebeb; padding: 10px; width: 517px; height: auto; overflow: auto; border-top: #808080 4px solid; border-bottom: #808080 4px solid; position: relative; z-index: 2;}.aay-title {text-shadow: -1px -2px 1px rgba(0,0,0,0.4), 1px 2px 1px rgba(255,255,255,1); text-transform: uppercase; letter-spacing: 1px; font-family: 'Abel'; color: #808080; font-size: 25px; position: relative; left: 5px; bottom: -10px; z-index: 1;}.aay-presinfo2 {width: 517px; height: auto; border-top: #808080 4px solid; border-bottom: #808080 4px solid; overflow: auto; padding: 10px; background: #eaebeb;text-align:justify}.aay-presgroup3 {background: black; width: 503px; padding: 17px;text-align: center; color: white; font-family: 'Abel'; text-shadow: 1px 2px 1px rgba(0,0,0,0.4); display: inline-block; font-size: 45px; line-height: 23px; text-transform: uppercase;}.infodeouf {color: black; font-size: 15px; font-style: normal;} .aay-pointsgris {margin-left:7px; margin-right:7px;height:25px;width:40px;background-color:#989898;overflow:hidden;display:inline-block;}.aay-pointsblancs {margin-left:7px; margin-right:7px;height:25px;width:40px;background-color:white;overflow:hidden;display:inline-block;}</style><link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />

Il suffit de changer "pointsgris" en "pointsblancs" pour vous rajouter des points et inversement pour en enlever.