Codes présentation et prédéfinis

 <center><div class="fond_principal"><div class="titre_principal">NOM PRENOM</div><!--

    --><table width="100%"><tr><td width="220">
    <!--
    --><div class="titre1">Physionomie</div><div class="titre2">FEAT Penguin factory</div><div id="slides"><div>  <p><!--

    --> Ecrire ici <!--

    --></p>  <img alt="Mon image" src="http://i.imgur.com/nGsPv.png" /></div></div></td> <td>
    <!--
    --><div class="titre1">informations</div>
    <div class="bloc_texte1"> <b>NOM</b> - écrire ici
    <b>PRÉNOM</b> - écrire ici
    <b>AGE</b> - écrire ici

    <b>ORIENTATION</b> - écrire ici
    <b>PARTICULARITE</b> - écrire ici
    </div>
    <!--
    --><div class="titre1">caractère</div>
    <div class="bloc_texte1"> Ecrire ici
    </div> </td></tr></table><!--

    -->
    <div class="titre1">histoire</div><!--
    -->
    <div class="bloc_texte2"> Ecrire ici
    </div><div class="titre2">(c) fiche crée par rits-u sur epicode</div><!--

    --></div></center>

    <div class="template-linus-2 default"><!-- remplacer default par warmer ou colder pour des couleurs alternatives

    /*** début du bloc entête ***/
    --><div class="tli-header"><!--
    --><h2>nom prenom</h2><!--
    --><h3>une petite citation un peu classe</h3><!--

    /*** début du bloc entête gauche ***/
    --><div class="tli-header-cols"><div class="tli-header-left"><p><!--
    --><span class="tli-champ">nom</span> lorem ipsum<!--
    --><br/><span class="tli-champ">prénom</span> lorem ipsum<!--
    --><br/><span class="tli-champ">âge</span> 08 ans<!--
    --><br/><span class="tli-champ">né(e) le</span> 00/00/0000<!--
    --></p></div><!--
    /*** fin du bloc entête gauche ***/

    /*** début avatar ***/
    --><div class="tli-header-avatar"><!--
    --><img src="http://strandhogg.fr/epicode/placeholders/3.jpg" alt="mon avatar"/><!--
    --><span>nomprenom nomprenom</span><!--
    --></div><!--
    /*** fin avatar ***/

    /*** début du bloc entête droite ***/
    --><div class="tli-header-right"><p><!--
    --><span class="tli-champ">sexe</span> masculin<!--
    --><br/><span class="tli-champ">nationalité</span> française<!--
    --><br/><span class="tli-champ">métier</span> collégien<!--
    --><br/><span class="tli-champ">groupe</span> civils<!--
    --></p></div></div><!--
    /*** fin du bloc entête droite ***/

    --></div><!--
    /*** fin du bloc entête ***/

    /*** début du bloc physique ***/
    --><a href="#physique" id="physique" class="tli-body-onglet" title="Physique">Physique</a><!--
    --><div class="tli-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum semper mi eu lorem lobortis, ut pellentesque risus posuere. Donec sit amet vulputate mi, vel rutrum est. In vehicula venenatis nulla, non elementum elit fermentum nec. Integer aliquet eros vel sapien efficitur, non pharetra mi euismod. Donec elementum consequat leo, ut ullamcorper lacus viverra eu. Fusce aliquam ipsum sed mi commodo tincidunt nec. Ut fermentum mollis nibh, auctor ullamcorper sem ultricies sit amet. Duis bibendum sapien non pharetra consequat. Ut at commodo mi. Nulla sit amet venenatis nisl. Vestibulum massa enim, semper nec magna placerat, feugiat laoreet turpis. Integer vestibulum nisl magna, non mollis libero mollis vitae. Aenean id eleifend tortor, vel tincidunt erat. Integer laoreet sapien eget neque ultricies, vitae fringilla lectus accumsan. Fusce eros urna, luctus non vulputate vitae, mollis quis dui. Cras elit turpis, fringilla eu interdum sit amet, euismod id sem. Fusce vestibulum suscipit ligula ut luctus. Pellentesque sagittis interdum dui, quis luctus diam fermentum ut. Nunc ac nisi eu metus dictum convallis eu quis nulla. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex.</div><!--
    /*** fin du bloc physique ***/

    /*** début du bloc caractère ***/
    --><a href="#caractere" id="caractere" class="tli-body-onglet" title="Caractère">Caractère</a><!--
    --><div class="tli-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum semper mi eu lorem lobortis, ut pellentesque risus posuere. Donec sit amet vulputate mi, vel rutrum est. In vehicula venenatis nulla, non elementum elit fermentum nec. Integer aliquet eros vel sapien efficitur, non pharetra mi euismod. Donec elementum consequat leo, ut ullamcorper lacus viverra eu. Fusce aliquam ipsum sed mi commodo tincidunt nec. Ut fermentum mollis nibh, auctor ullamcorper sem ultricies sit amet. Duis bibendum sapien non pharetra consequat. Ut at commodo mi. Nulla sit amet venenatis nisl. Vestibulum massa enim, semper nec magna placerat, feugiat laoreet turpis. Integer vestibulum nisl magna, non mollis libero mollis vitae. Aenean id eleifend tortor, vel tincidunt erat. Integer laoreet sapien eget neque ultricies, vitae fringilla lectus accumsan. Fusce eros urna, luctus non vulputate vitae, mollis quis dui. Cras elit turpis, fringilla eu interdum sit amet, euismod id sem. Fusce vestibulum suscipit ligula ut luctus. Pellentesque sagittis interdum dui, quis luctus diam fermentum ut. Nunc ac nisi eu metus dictum convallis eu quis nulla. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex.</div><!--
    /*** fin du bloc caractère ***/

    /*** début du bloc histoire ***/
    --><a href="#story" id="story" class="tli-body-onglet" title="Histoire">Histoire</a><!--
    --><div class="tli-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum semper mi eu lorem lobortis, ut pellentesque risus posuere. Donec sit amet vulputate mi, vel rutrum est. In vehicula venenatis nulla, non elementum elit fermentum nec. Integer aliquet eros vel sapien efficitur, non pharetra mi euismod. Donec elementum consequat leo, ut ullamcorper lacus viverra eu. Fusce aliquam ipsum sed mi commodo tincidunt nec. Ut fermentum mollis nibh, auctor ullamcorper sem ultricies sit amet. Duis bibendum sapien non pharetra consequat. Ut at commodo mi. Nulla sit amet venenatis nisl. Vestibulum massa enim, semper nec magna placerat, feugiat laoreet turpis. Integer vestibulum nisl magna, non mollis libero mollis vitae. Aenean id eleifend tortor, vel tincidunt erat. Integer laoreet sapien eget neque ultricies, vitae fringilla lectus accumsan. Fusce eros urna, luctus non vulputate vitae, mollis quis dui. Cras elit turpis, fringilla eu interdum sit amet, euismod id sem. Fusce vestibulum suscipit ligula ut luctus. Pellentesque sagittis interdum dui, quis luctus diam fermentum ut. Nunc ac nisi eu metus dictum convallis eu quis nulla. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Nam placerat velit quis est molestie laoreet sed nec enim. Nullam facilisis ante purus, at auctor nunc dictum cursus. Vivamus nec porttitor diam. Praesent eget lobortis mauris, quis facilisis magna. Etiam nec rhoncus ipsum. Nullam eleifend pulvinar massa, sed aliquet velit feugiat id. Maecenas mollis, metus quis malesuada fermentum, nisl magna aliquam risus, eget semper lorem nisl at dolor. Mauris non leo sem. Cras vestibulum pulvinar turpis, sed fringilla erat commodo sed. Donec fringilla dignissim elit, eu convallis nunc feugiat ac. Pellentesque sit amet mi ullamcorper, gravida ligula vitae, interdum arcu. Fusce eros magna, commodo quis massa ut, viverra aliquet quam. Pellentesque mi arcu, efficitur id nunc et, imperdiet facilisis diam. Etiam vitae condimentum lectus, eget varius elit. Aliquam molestie nulla non pretium convallis. Phasellus euismod orci id leo placerat sollicitudin. Nulla vitae accumsan nisi, vel vulputate turpis. Morbi bibendum facilisis tellus vel porta. Mauris ut metus dapibus ipsum fringilla vulputate nec quis urna. Sed ut felis id lacus venenatis faucibus a ut neque. Nulla molestie enim faucibus facilisis suscipit. Nullam vitae elit ut orci congue fermentum. Cras ac nisi sem. Sed imperdiet at tellus volutpat pharetra. Pellentesque vel dolor lorem. Fusce a nibh elit. Sed vitae dignissim sapien. Vestibulum vel sem non metus scelerisque convallis. Aliquam eget sollicitudin mauris. Nullam ullamcorper tristique bibendum.</div><!--
    /*** fin du bloc histoire ***/

    /*** début du bloc autre onglet ouvert ***/
    --><div class="tli-body-onglet">Autre onglet ouvert</div><!--
    --><div class="tli-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <span class="dialog">Vestibulum semper mi eu lorem lobortis, ut pellentesque risus posuere.</span> Donec sit amet vulputate mi, vel rutrum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum semper mi eu lorem lobortis, ut pellentesque risus posuere. Donec sit amet vulputate mi, vel rutrum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum semper mi eu lorem lobortis, ut pellentesque risus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum semper mi eu lorem lobortis, ut pellentesque risus posuere. Donec sit amet vulputate mi, vel rutrum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div><!--
    /*** fin du bloc autre onglet ouvert ***/

    --><div class="tli-credits">©linus pour <a href="http://epicode.bbactif.com/" target=_blank>Epicode</a></div></div><!--
    --><link type="text/css" rel="stylesheet" href="http://strandhogg.fr/epicode/css/2.css"/>

    <div class="template-linus-13 lighter"><!-- remplacer lighter par darker pour une luminosité alternative
    --><div class="tli-margin"><!--

    /*** début du bloc liens ***/
    --><div class="tli-header tli-gradient"><!-- remplacer tli-gradient par tli-flat pour enlever le dégradé
    --><a href="#" title="Voir ma fiche" target="_blank" class="tli-avatar"><!--
    --><img src="http://strandhogg.fr/epicode/placeholders/23.jpg" alt="mon avatar"/><!--
    --><span>jean peuplux davincourt</span><!--
    --></a><!--
    --><h2>jean peuplux davincourt</h2><!--
    --><div class="tli-separator"><!--
    --><i class="fa fa-paper-plane"></i><!--
    --></div><!--
    --><h3>l'ombre de ton iench</h3><!--
    --></div><!--
    /*** fin du bloc liens ***/

    /*** début du bloc corps de texte ***/
    --><div class="tli-body"><!--

    --><ul class="tli-fields"><!--
    --><li><!--
    --><span>prénom(s)</span><!--
    -->jean<!--
    --></li><!--
    --><li><!--
    --><span>nom</span><!--
    -->peuplux davincourt<!--
    --></li><!--
    --><li><!--
    --><span>sexe</span><!--
    -->masculin<!--
    --></li><!--
    --><li><!--
    --><span>âge</span><!--
    -->43 ans<!--
    --></li><!--
    --><li><!--
    --><span>date de naissance</span><!--
    -->26 janvier<!--
    --></li><!--
    --><li><!--
    --><span>nationalité</span><!--
    -->belge<!--
    --></li><!--
    --><li><!--
    --><span>métier</span><!--
    -->peintre au chômage<!--
    --></li><!--
    --><li><!--
    --><span>groupe</span><!--
    -->artistes<!--
    --></li><!--
    --><li><!--
    --><span>sous-groupe</span><!--
    -->membre<!--
    --></li><!--
    --></ul><!--

    /*** début du bloc caractère ***/
    --><div class="tli-block"><!--

    /*** début titre ***/
    --><a href="#caractère" class="tli-line"><!--
    --><div class="tli-avatar"><!--
    --><img src="http://strandhogg.fr/epicode/placeholders/27.jpg" alt="mon avatar"/><!--
    --></div><!--
    --><div class="tli-inner-line"><!--
    --><h2>caractère</h2><!--
    --><h3>sous-titre, ici tu peux citer rimbaud ou baudelaire si tu veux</h3><!--
    --></div><!--
    --></a><!--
    /*** fin titre ***/
   
    --><span class="tli-target" id="caractère"></span><!--
    --><div class="tli-details"><!--
    -->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.<!--
    --></div><!--
    --></div><!--
    /*** fin du bloc caractère ***/
    /*** début du bloc physique ***/
    --><div class="tli-block"><!--

    /*** début titre ***/
    --><a href="#physique" class="tli-line"><!--
    --><div class="tli-avatar"><!--
    --><img src="http://strandhogg.fr/epicode/placeholders/25.jpg" alt="mon avatar"/><!--
    --></div><!--
    --><div class="tli-inner-line"><!--
    --><h2>physique</h2><!--
    --><h3>sous-titre, ici tu peux citer rimbaud ou baudelaire si tu veux</h3><!--
    --></div><!--
    --></a><!--
    /*** fin titre ***/
   
    --><span class="tli-target" id="physique"></span><!--
    --><div class="tli-details"><!--
    -->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.<!--
    --></div><!--
    --></div><!--
    /*** fin du bloc physique ***/
    /*** début du bloc histoire ***/
    --><div class="tli-block"><!--

    /*** début titre ***/
    --><a href="#histoire" class="tli-line"><!--
    --><div class="tli-avatar"><!--
    --><img src="http://strandhogg.fr/epicode/placeholders/26.jpg" alt="mon avatar"/><!--
    --></div><!--
    --><div class="tli-inner-line"><!--
    --><h2>histoire</h2><!--
    --><h3>sous-titre, ici tu peux citer rimbaud ou baudelaire si tu veux</h3><!--
    --></div><!--
    --></a><!--
    /*** fin titre ***/
   
    --><span class="tli-target" id="histoire"></span><!--
    --><div class="tli-details"><!--
    -->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat, elementum massa sit amet, molestie ex. Vivamus tincidunt augue quis nibh iaculis, a aliquet leo ullamcorper. Quisque ullamcorper ullamcorper leo a feugiat. Proin sed felis luctus, imperdiet lectus id, imperdiet ex. Maecenas pharetra, arcu pharetra iaculis laoreet, nunc mi blandit enim, nec faucibus erat ipsum ac tortor. Pellentesque et felis sit amet est laoreet lacinia. Pellentesque et felis sit amet est laoreet lacinia.<!--
    --></div><!--
    --></div><!--
    /*** fin du bloc histoire ***/
   
    /*** début du bloc autres ***/
    --><div class="tli-block tli-default-opened"><!--

    /*** début titre ***/
    --><div class="tli-line"><!--
    --><div class="tli-inner-line"><!--
    --><h2>hors jeu</h2><!--
    --><h3>parce qu'en général t'as une vie à côté</h3><!--
    --></div><!--
    --></div><!--
    /*** fin titre ***/
   
    --><span class="tli-target" id="autres"></span><!--
    --><div class="tli-details"><!--
    -->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius metus eget euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent id lectus in orci lacinia vulputate. Integer tempor commodo risus, sit amet condimentum turpis faucibus eu. Mauris a tellus placerat.<!--
    --></div><!--
    --></div><!--
    /*** fin du bloc autres ***/

    --></div><!--
    /*** fin du bloc corps de texte ***/

    --><div class="tli-credits">©linus pour <a href="http://epicode.bbactif.com/" target="_blank">Epicode</a></div><!--
    --></div><!--
    --></div><!--
    --><link type="text/css" rel="stylesheet" href="http://strandhogg.fr/epicode/css/13.css?color1p=8191d0"/><!-- remplacer ici la couleur si vous le souhaitez
    --><link rel="stylesheet" href="http://strandhogg.fr/epicode/css/font-awesome.min.css"><!--
    --><link href="https://fonts.googleapis.com/css?family=Raleway|Unica+One" rel="stylesheet">

<style>.containerfiche_epicode {width: 500px; box-sizing: border-box; position: relative; background-color: #ffffff; border-top: 10px solid #a3d39c; padding: 190px 4px 20px 10px; text-align: center; margin: auto; color: #5f6061; font-family: 'Times New Roman';} .en_tete_block{position: absolute; top: 0; left: 0; width:500px; height:180px;} .en_tete_block div{position:absolute; top: 0;width:500px; height: 180px; background-color: rgba(170, 192, 214, 0.8); opacity:0; visibility: hidden; transition: 1s;} .pseudonyme_block_ct {display: block; position: absolute; top: 60px; left: 80px; width: 200px; height: 80px; color: #ffffff; border: 1px solid white; padding-top: 5px; text-transform: uppercase; font-size: 30px;} .quote_fiche {display: block; font-size: 13px; margin-top: -2px; text-transform: none; line-height: 12px;} .en_tete_block:hover div {opacity: 1; visibility: visible; width: 250px; background-color: rgba(170, 192, 214, 0.8);} .containerfiche_epicode ul {padding: 0; margin: 0; margin-bottom: 5px; display: flex; list-style-type: none;} .containerfiche_epicode li {width: 90px; height: 18px; padding-top: 2px; border: 1px solid #aac0d6; margin-right: 5px; margin-bottom: 5px; text-transform: uppercase; font-size: 11px;} .infos_chara , .infos_chara2 { width: 230px; display: inline-block; margin-right: 13px;} .infos_chara span , .infos_chara2 span {display: inline-block; width: 217px; height: 15px; background-color: #aac0d6; margin-bottom: 5px; padding: 7px 10px; text-transform: uppercase; font-size: 12px; color: white;} .infos_chara span {text-align: left;} .infos_chara2 span {text-align: right; margin-right: none;} .title_p {position: relative; width: 450px; height: 11px; border-bottom: 1px solid #a8a8a8; margin: auto; text-align: center; margin-top: -5px;} .title_p div {width: 160px; height: 25px; position: absolute; top: 0; left: 140px; background-color: white; font-size: 20px; text-transform: uppercase;} .content_infos_txt {margin-right: 13px; width: 460px; text-align: justify; font-size: 12px; margin-top: 20px; border: 1px solid #aac0d6; padding: 10px;} .copyright_epicode_a {position: absolute; bottom: 0; right: 0; font-family: 'Arial'; font-size: 11px; text-transform: lowercase; color: #adadad;}</style>

<div class="containerfiche_epicode"><div class="en_tete_block"><img src="https://zupimages.net/up/18/02/dksp.png"/><div><span class="pseudonyme_block_ct">Pseudo</br><span class="quote_fiche">Citation</span></span></div></div><ul><li>Qualité</li><li>Qualité</li><li>Qualité</li><li>Qualité</li><li>Qualité</li></ul><ul><li>Défaut</li><li>Défaut</li><li>Défaut</li><li>Défaut</li><li>Défaut</li></ul><div class="infos_chara"><span>Âge</span><span>Origine</span><span>Métier</span></div><div class="infos_chara2"><span>Groupe</span><span>Situation Maritale</span><span>Orientation sexuelle</span></div>
 <div class="title_p"><div>Histoire</div></div><div class="content_infos_txt">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
 <div class="title_p"><div>Informations</div></div><div class="content_infos_txt">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
  <span class="copyright_epicode_a">Batty & Artemis | <a href="http://epicode.bbactif.com/">www</a></div>

 <div class="aay-perso"><div class="aay-presgroup">Groupe</div><div class="aay-presname">Prénom Nom</div><br>
    <div class="aay-presinfo"><span class="info">Age:</span> réponse
    <span class="info">Sexe:</span> réponse
    <span class="info">Métier:</span> réponse
    <span class="info">Taille:</span> réponse
    <span class="info">Poids:</span> réponse
    <span class="info">Couleur des yeux/cheveux:</span> réponse
    <span class="info">Signes distinctifs:</span> réponse
    </div><div class="aay-photo"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-photo-src"><i>Nom du personnage, Manga/Anime/Source</i></div></div>
    <div class="aay-title">Caractère</div>
    <div class="aay-bloctxt">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.

    Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

    Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div>
    <div class="aay-title">Histoire</div>
    <div class="aay-bloctxt">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.

    Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

    Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div>
    <div class="aay-player"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-playerinfo"><span class="info">Pseudo:</span> réponse
    <span class="info">Age:</span> réponse
    <span class="info">Quelque chose à nous dire?</span> réponse
    <span class="info">Code du règlement:</span> réponse
    </div></div><div class="aay-opinion"><span class="in">Opinion sur tel(s) groupe(s):</span><br>Votre opinion
    <br><span class="in2"> Opinion sur tel(s) groupe(s):</span> Votre opinion
    </div>
    <div class="crédits">Code by Frosty Blue de <a href="http://www.never-utopia.com">never Utopia</a></div></div>

    <style type="text/css"> .aay-presgroup {margin-left: auto; background: #fa5858; width: 150px; padding: 17px;text-align: center; color: #f4f4f4; font-family: 'Abel'; text-shadow: 1px 2px 1px rgba(0,0,0,0.4); display: inline-block; font-size: 17px; line-height: 23px; text-transform: uppercase; margin-right: 10px;} .aay-presname {margin-right: auto; width: 350px; padding: 10px; text-align: center; color: #fa5858; background: #eaebeb; overflow: hidden; font-family: 'Abel'; font-size: 35px; line-height: 37px; display: inline-block; vertical-align: top; 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;} .aay-perso {margin: auto; text-align: justify; width: 565px;} .aay-presinfo {float: left; width: 320px; height: 200px; overflow: auto; padding: 10px; margin-right: 10px;background: #eaebeb;} .info {color: white; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 13px; 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,0.6); color: white; text-align: center; font-size: 12px; 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; height: 250px; overflow: auto; border-top: #fa5858 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: #fa5858; font-size: 25px; position: relative; left: 5px; bottom: -15px; z-index: 1;} .aay-player {width: 215px; height: 220px; display: inline-block; margin-right: 15px; background: #fa5858;} .aay-opinion {display: inline-block; width: 315px; padding: 10px; height: 200px; overflow: auto; background: #eaebeb; text-align: justify; vertical-align: top;} .aay-player img {position: relative: 1; -webkit-filter: grayscale(50%); filter: grayscale(50%); transition: 1s; -webkit-transition: 1s; } .aay-playerinfo {padding: 10px; position: relative; z-index: 2; background: #fa5858; transition: 1s; -webkit-transition: 1s; opacity: 0; overflow: auto; width: 200px; height: 202px; top: -222px;} .aay-player:hover .aay-playerinfo {opacity: 1; transition: 2s; -webkit-transition: 2s;} .in {font-style: normal; color: #fa5858; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 14px; text-transform: uppercase;} .in2 {font-style: normal; color: #0080ff; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 14px; text-transform: uppercase;} .crédits {text-align: right; color: silver; opacity: 0.4; font-size: 11px; font-family: 'Abel'; position: relative; right: 5px;}</style><link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />

/******************************************FICHE PRESENTATION ARTEMIS|EPICODE******************************************/

.content_fiche_presentation_arte {
  width: 500px;
  background: #d7d7d7;
  font-family: 'Open sans';
  color: #646464;
  margin: auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.block_purple_deco_top {
  width: 1000px;
  height: 300px;
  background: #524fad; /***COULEUR DU BLOCK EN DIAGONALE***/
  position: absolute;
  top: -200px;
  left: -200px;
  transform: rotate(-30deg);
}

.avatar_personnage_pseudo {
  width: 210px;
  height: 330px;
  position: relative;
}

.avatar_personnage_pseudo img {
  padding: 5px;
  border: 1px solid white;
}

.avatar_personnage_pseudo span {
  position: absolute;
  display: block;
  width: 200px;
  text-align: center;
  bottom: 4px;
  left: 6px;
  font-family: 'arial';
  color: white;
  text-transform: uppercase;
  font-size: 25px;
  background: #524fad; /***FOND DU CHAMP 'PSEUDO'***/
  font-weight: bold;
  padding: 5px 0px;
  line-height: 21px;
}

.content_fiche_presentation_arte ul {
  margin: 0px 0px 0px 15px;
  position: relative;
  width: 250px;
  height: 345px;
  padding: 0;
}

.content_fiche_presentation_arte li {
  list-style-type: none;
  text-align: center;
  height: 47px;
  margin-bottom: 10px;
  border: 1px solid #afafaf;
  font-family: 'Oswald';
  text-transform: uppercase;
  font-size: 20px;
  background: #eeeeee;
  color: #646464;
  box-sizing: border-box;
  padding-top: 13px;
}

.content_fiche_presentation_arte p {
  width: 235px;
  height: 200px;
  margin: 0;
}

.content_fiche_presentation_arte p , .histoire_paragraphe_f {
  background: #eeeeee;
  box-sizing: border-box;
  padding: 5px;
  text-align: justify;
  font-size: 11px;
  border: 1px solid #afafaf;
  line-height: 12px;
  overflow: auto;
  z-index: 1
}

.titre_sections_fiche {
  width: 235px;
  height: 31px;
}

.titre_sections_fiche , .titre_sections_fiche2 {
  text-align: center;
  background-color: #524fad;
  font-family: 'Arial';
  box-sizing: border-box;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  font-size: 19px;
  padding-top: 7px;
  margin-bottom: 10px;
}

.titre_sections_fiche2 {
  width: 480px;
  height: 31px;
}

.histoire_paragraphe_f {
  width: 480px;
  height: 250px;
  overflow: auto;
}
 

.roliste_avatar {
  border-radius: 100px;
  padding: 5px;
  border: 1px solid white;
}

.infos_roliste_fiche {
  background: #eeeeee;
  position: relative;
  width: 355px;
  height: 110px;
  text-align: justify;
  font-family:'open sans';
  font-size: 12px;
  box-sizing: border-box;
  padding: 5px;
  border: 1px solid #afafaf;
  line-height: 12px;
  color: #646464;
  overflow: auto;
  margin-bottom: 5px;
}

.infos_roliste_fiche span {
  color: #524fad;
  font-weight: bold;
}

.block_purple_deco_bottom {
  width: 1000px;
  height: 300px;
  background: #524fad; /***COULEUR DU BLOCK EN DIAGONALE***/
  position: absolute;
  bottom: -200px;
  left: -200px;
  transform: rotate(-30deg);
}

.copyright_artemis {
  position: absolute;
  bottom: 0;
  right: 1px;
  color: white;
  font-family: 'Open sans';
  font-size: 9px;
  text-transform: uppercase;
  margin-top: 5px;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald:400,700" rel="stylesheet"/><div class="content_fiche_presentation_arte"><div class="block_purple_deco_top"></div>
 <div class="avatar_personnage_pseudo"><img src="https://2img.net/r/hpimg15/pics/417198Random2.png"/><span>PRÉNOM(S) & NOM(S)</span></div><ul><li>Âge</li><li>Origines</li><li>Orientation Sexuelle</li><li>Situation Maritale</li><li>Groupe</li><li>Métier</li></ul><p>Le physique ICI *-*</p><p>Le caractère juste LA ! :)</p><div class="titre_sections_fiche">Physique</div><div class="titre_sections_fiche">Caractère</div><div class="histoire_paragraphe_f">Et ta petite histoire plus ou moins longue ici. </div><div class="titre_sections_fiche2">Histoire</div><div class="block_purple_deco_bottom"></div><img src="http://www.zupimages.net/up/17/34/zoay.gif" class="roliste_avatar"/><div class="infos_roliste_fiche"><span>Le rôliste a la parole.</span> Une partie pour le joueur et les questions que tu peux lui poser. c:</div><div class="copyright_artemis">artemis | <a href="http://epicode.bbactif.com/">www</a></div></div>