Codes présentation et prédéfinis

 :: Catégorie 1 :: Autriche-Hongrie Voir le sujet précédent Voir le sujet suivant Aller en bas
Legend
Compte PNJ ▬ Admin
avatar
✦ Anecdotes : 404
Compte PNJ ▬ Admin
Jeu 18 Juin - 16:27
Fiche de présentation (avec code CSS)

NOM PRENOM

Physionomie
FEAT Penguin factory

Ecrire ici

Mon image

informations

NOM - écrire ici
PRÉNOM - écrire ici
AGE - écrire ici

ORIENTATION - écrire ici
PARTICULARITE - écrire ici

caractère

Ecrire ici

histoire

Ecrire ici
(c) fiche crée par rits-u sur epicode


Code:

 <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>
Revenir en haut Aller en bas
Legend
Compte PNJ ▬ Admin
avatar
✦ Anecdotes : 404
Compte PNJ ▬ Admin
Lun 20 Juin - 14:51
il y a trois versions : par défaut, chaude et froide
pour changer de version, remplacer "template-linus-1 default" par "template-linus-1 warmer" ou "template-linus-1 colder"
si vous voulez rajouter un nouvel onglet dépliable, il vous faudra dupliquer l'un des blocs existants (histoire par exemple) et changer les paramètres id="..." et href="..." avec les mêmes valeurs, par exemple href="#toto" et id="toto"


nom prenom

une petite citation un peu classe

nom lorem ipsum
prénom lorem ipsum
âge 08 ans
né(e) le 00/00/0000

mon avatarnomprenom nomprenom

sexe masculin
nationalité française
métier collégien
groupe civils

Physique
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.
Caractère
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.
Histoire
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.
Autre onglet ouvert
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. 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.
©linus pour Epicode


Code:
    <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"/>
Revenir en haut Aller en bas
Legend
Compte PNJ ▬ Admin
avatar
✦ Anecdotes : 404
Compte PNJ ▬ Admin
Ven 5 Aoû - 11:41
Explications du code

mon avatarjean peuplux davincourt

jean peuplux davincourt

l'ombre de ton iench

  • prénom(s)jean
  • nompeuplux davincourt
  • sexemasculin
  • âge43 ans
  • date de naissance26 janvier
  • nationalitébelge
  • métierpeintre au chômage
  • groupeartistes
  • sous-groupemembre
mon avatar

caractère

sous-titre, ici tu peux citer rimbaud ou baudelaire si tu veux

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.
mon avatar

physique

sous-titre, ici tu peux citer rimbaud ou baudelaire si tu veux

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.
mon avatar

histoire

sous-titre, ici tu peux citer rimbaud ou baudelaire si tu veux

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.

hors jeu

parce qu'en général t'as une vie à côté

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.
©linus pour Epicode


Code:
    <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">
Revenir en haut Aller en bas
Legend
Compte PNJ ▬ Admin
avatar
✦ Anecdotes : 404
Compte PNJ ▬ Admin
Jeu 15 Fév - 11:22


Pseudo
Citation
  • Qualité
  • Qualité
  • Qualité
  • Qualité
  • Qualité
  • Défaut
  • Défaut
  • Défaut
  • Défaut
  • Défaut
ÂgeOrigineMétier
GroupeSituation MaritaleOrientation sexuelle

Histoire

Informations

Batty & Artemis | www


Code:
<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>
Revenir en haut Aller en bas
Legend
Compte PNJ ▬ Admin
avatar
✦ Anecdotes : 404
Compte PNJ ▬ Admin
Ven 13 Avr - 10:51
Groupe
Prénom Nom


Age: réponse
Sexe: réponse
Métier: réponse
Taille: réponse
Poids: réponse
Couleur des yeux/cheveux: réponse
Signes distinctifs: réponse
Nom du personnage, Manga/Anime/Source

Caractère

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.

Histoire

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.

Pseudo: réponse
Age: réponse
Quelque chose à nous dire? réponse
Code du règlement: réponse
Opinion sur tel(s) groupe(s):
Votre opinion

Opinion sur tel(s) groupe(s): Votre opinion

Code by Frosty Blue de never Utopia




Code:
 <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' />
Revenir en haut Aller en bas
Legend
Compte PNJ ▬ Admin
avatar
✦ Anecdotes : 404
Compte PNJ ▬ Admin
Ven 13 Avr - 10:56

CSS

Code:
/******************************************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;
}

HTML

Code:
<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://redcdn.net/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>
Revenir en haut Aller en bas
Fukawa Midori
Le onzième frère des cygnes sauvages
avatar
✦ Anecdotes : 362
✦ Âge : 28
✦ Double-compte : Karina Lyle

Lun 9 Juil - 8:13
http://ls-halloween.fr/fiches-messages/presentations-predefs/meithea-predefinis.php
http://ls-halloween.fr/fiches-messages/presentations-predefs/meithea-presentation.php
http://terrible.forumactif.org/t51-fiche-predefini


« Je voudrais perdre la mémoire
Pour ne plus changer de trottoir
Quand je croise mes souvenirs. »
© Joy pour le code, Becca pour le logo
Revenir en haut Aller en bas
Contenu sponsorisé
Contenu sponsorisé
Contenu sponsorisé
Revenir en haut Aller en bas
Voir le sujet précédent Voir le sujet suivant Revenir en hautPage 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Catégorie 1 :: Autriche-Hongrie-
Sauter vers: