AccueilAccueil  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  


 
fiche Sh
Admin

Messages : 62
Date d'inscription : 14/10/2007


fiche Sh Empty
Admin
happiness is forged in the fires of hell
Sam 17 Fév - 17:42


Nom Prénom






Date de naissance25/12/00 (2018 ans)
RaceHumain
Lieu de naissancePapouasie Nouvelle-Guinée
QuartierCentre
MétierMangeur de pigeons
Niveau0
Couleur des yeuxOrange
Taille1m34






Chronologie






Tab 1


A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.



Tab 2



Tab 3



Tab 4



Tab 5



Tab 6



Tab 7



Tab 8



Tab 9



Tab 10










Derrière l'écran


PseudoToto
ÂgeToto
Comment as-tu découvert le forumArdeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
Ta fréquence de rpToto
Un commentaire ?Toto





Code:
<div class="fiche_cadre">
<div class="fiche_img" style="background-image:url(https://media.giphy.com/media/lDlJF8l4YE2vS/giphy.gif);"></div> <div class="fiche_infos">Nom Prénom</div>
<div id="triangle-holder">
<div id="fiche_triangle1"></div>
<div id="fiche_triangle2"></div>
</div>

<div class="fiche_general"><div class="fiche_idleft"><span class="monstre_nomavinc">Date de naissance</span>25/12/00 (2018 ans)
<span class="monstre_nomavinc">Race</span>Humain
<span class="monstre_nomavinc">Lieu de naissance</span>Papouasie Nouvelle-Guinée
<span class="monstre_nomavinc">Quartier</span>Centre</div><div class="fiche_idright"><span class="monstre_nomavinc">Métier</span>Mangeur de pigeons
<span class="monstre_nomavinc">Niveau</span>0
<span class="monstre_nomavinc">Couleur des yeux</span>Orange
<span class="monstre_nomavinc">Taille</span>1m34</div></div>
<div id="fiche_triangle1b"></div>
<div id="fiche_triangle2b"></div>
<div class="fiche_questions">
<div class="carousel-container">
  <div class="carousel my-carousel carousel--translate">
    <input class="carousel__activator" type="radio" name="carousel" id="F" checked="checked"/>
    <input class="carousel__activator" type="radio" name="carousel" id="G"/>
    <input class="carousel__activator" type="radio" name="carousel" id="H"/>
    <input class="carousel__activator" type="radio" name="carousel" id="I"/>
    <input class="carousel__activator" type="radio" name="carousel" id="J"/>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="J"></label>
      <label class="carousel__control carousel__control--forward" for="G"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="F"></label>
      <label class="carousel__control carousel__control--forward" for="H"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="G"></label>
      <label class="carousel__control carousel__control--forward" for="I"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="H"></label>
      <label class="carousel__control carousel__control--forward" for="J"></label>
    </div>
    <div class="carousel__controls">
      <label class="carousel__control carousel__control--backward" for="I"></label>
      <label class="carousel__control carousel__control--forward" for="F"></label>
    </div>
    <div class="carousel__track">
      <div class="carousel__slide">
<div class="topic_titre3">Caractère</div>       
<div class="fiche_txt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.

Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.</div>
    <div class="losange">
      <div class="los1"  style="background-image:url('https://i.imgur.com/Pb6PJii.gif');background-size:contain;background-position:center;">
      </div>
    </div>
      </div>
      <div class="carousel__slide">
      <div class="topic_titre3">Avis sur les monstres, le Conseil et le Monde Monstrueux</div>       
<div class="fiche_txt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.

Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.</div>
    <div class="losange">
      <div class="los1"  style="background-image:url('https://i.imgur.com/Pb6PJii.gif');background-size:contain;background-position:center;">
      </div>
    </div>
      </div>
      <div class="carousel__slide">
      <div class="topic_titre3">Anecdotes et autres informations</div>       
<div class="fiche_txt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.

Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.</div>
    <div class="losange">
      <div class="los1"  style="background-image:url('https://i.imgur.com/Pb6PJii.gif');background-size:contain;background-position:center;">
      </div>
    </div>
      </div>
      <div class="carousel__slide">
      <div class="topic_titre3">Avantages</div>       
<div class="fiche_txt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.

Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.</div>
    <div class="losange">
      <div class="los1"  style="background-image:url('https://i.imgur.com/Pb6PJii.gif');background-size:contain;background-position:center;">
      </div>
    </div>
      </div>
      <div class="carousel__slide">
      <div class="topic_titre3">Inconvénients</div>       
<div class="fiche_txt">Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.

Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.</div>
    <div class="losange">
      <div class="los1"  style="background-image:url('https://i.imgur.com/Pb6PJii.gif');background-size:contain;background-position:center;">
      </div>
    </div>
    </div>
    </div>
    <div class="carousel__indicators">
<label class="carousel__indicator" for="F"></label><label class="carousel__indicator" for="G"></label><label class="carousel__indicator" for="H"></label><label class="carousel__indicator" for="I"></label><label class="carousel__indicator" for="J"></label>
    </div>
  </div>
</div>
</div>
<div id="fiche_triangle4"></div><div class="fiche_titre3">Chronologie</div>
<div class="wrapper">
<div class="labels"><span tabindex="0"><label class="tab-label" for="tab-tab1">Tab Caption 1</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-0">Tab Caption 2</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-1">Tab Caption 3</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-2">Tab Caption 4</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-3">Tab Caption 5</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-4">Tab Caption 6</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-5">Tab Caption 7</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-6">Tab Caption 8</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-7">Tab Caption 9</label></span><span tabindex="0"><label class="tab-label" for="tab-tab2-8">Tab Caption 10</label></span>
</div>
<div class="tabs">
<div class="tab"><input class="tab-radio" type="radio" id="tab-tab1" name="tabs-main" checked><div class="tab-panel"><div class="tab-content">
<h2>Tab 1</h2>
<p>A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text. A long piece of text.</p>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-0" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 2</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-1" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 3</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-2" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 4</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-3" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 5</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-4" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 6</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-5" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 7</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-6" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 8</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-7" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 9</h2>
</div></div></div><div class="tab"><input class="tab-radio" type="radio" id="tab-tab2-8" name="tabs-main"><div class="tab-panel"><div class="tab-content">
<h2>Tab 10</h2>
</div></div></div>
</div>
</div>

<div id="fiche_triangle5"></div>

<div class="fiche_ooc">

<div class="fiche_titre3b">Derrière l'écran</div>

<div class="topic_txt"><span class="monstre_nomavinc">Pseudo</span>Toto
<span class="monstre_nomavinc">Âge</span>Toto
<span class="monstre_nomavinc">Comment as-tu découvert le forum</span>Ardeo, mihi credite, Patres conscripti (id quod vosmet de me existimatis et facitis ipsi) incredibili quodam amore patriae, qui me amor et subvenire olim impendentibus periculis maximis cum dimicatione capitis, et rursum, cum omnia tela undique esse intenta in patriam viderem, subire coegit atque excipere unum pro universis. Hic me meus in rem publicam animus pristinus ac perennis cum C. Caesare reducit, reconciliat, restituit in gratiam.
<span class="monstre_nomavinc">Ta fréquence de rp</span>Toto
<span class="monstre_nomavinc">Un commentaire ?</span>Toto</div>
</div>
</div>
Admin

Messages : 62
Date d'inscription : 14/10/2007


fiche Sh Empty
Admin
happiness is forged in the fires of hell
Lun 19 Fév - 11:54







https://codepen.io/CreativeJuiz/pen/Hizkh
 
fiche Sh
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Fiche Pub
» [Question] problème d'affichage des profils avec fiche html
» Changer la couleur de police des champs Texte/listes dans la fiche de perso
» Afficher un iframe en dessous de la fiche membre
» La fiche de personnage, et les templates

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
test graph :: Tests :: Test-
Sauter vers: