Exemple de fiche de relations

02/01/2022

Titre ici

Détail
Détail
Détail
Détail

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Titre ici

Nom catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor.

Nom catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Titre ici

Nom catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Nom catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Nom catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor

Titre ici

Nom catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor.

Nom catégorie

Cras viverra enim vehicula nunc condimentum, in aliquam nisi porttitor. Vestibulum turpis metus, semper ut cursus ac, feugiat aliquam est. Vivamus et ante massa. Fusce dignissim hendrerit vestibulum. Donec dui ex, facilisis eu neque ac, posuere malesuada ex. In ultrices arcu sit amet ipsum mattis, at tincidunt urna mattis. Maecenas at tortor nec felis facilisis congue ut et metus.

Titre ici

Nom catégorie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor.

Nom catégorie

Aliquam erat volutpat. Mauris eu accumsan dui. Aenean volutpat aliquam turpis, tincidunt consectetur justo porta eu. Nunc at tempus quam. Praesent facilisis eleifend massa sed euismod. In eget scelerisque dui. Nullam semper lobortis leo, ut sagittis nisi tempor ut. Aenean tempus mollis lacus, id rutrum lacus pellentesque non. Praesent tellus sapien, posuere egestas diam nec, convallis sodales leo. Curabitur id ornare ipsum. Fusce velit turpis, vestibulum in mattis mattis, maximus ut metus.

NC

— Les images situées à gauche sont en 100x100 —
— La grande image située en arrière plan est en 399x580 —

Code:: <div class="darkthoughts"> <input id="dt1" name="darkthoughts" type="radio" checked/> <input id="dt2" name="darkthoughts" type="radio"/> <input id="dt3" name="darkthoughts" type="radio"/> <input id="dt4" name="darkthoughts" type="radio"/> <input id="dt5" name="darkthoughts" type="radio"/> <div class="dtleft"> <label for="dt1"> <a title="Nom ici"><img src="https://i.ibb.co/Qp0fqQc/images-fiche-relation.jpg"/></a> </label> <label for="dt2"> <a title="Nom ici"><img src="https://i.ibb.co/Qp0fqQc/images-fiche-relation.jpg"/></a> </label> <label for="dt3"> <a title="Nom ici"><img src="https://i.ibb.co/Qp0fqQc/images-fiche-relation.jpg"/></a> </label> <label for="dt4"> <a title="Nom ici"><img src="https://i.ibb.co/Qp0fqQc/images-fiche-relation.jpg"/></a> </label> <label for="dt5"> <a title="Nom ici"><img src="https://i.ibb.co/Qp0fqQc/images-fiche-relation.jpg"/></a> </label> </div> <div class="dtright"> <div class="dtcont dtc1"> <div class="dtheader"> <strong>Titre ici</strong> <span> <em>Détail</em> <em>Détail</em> <em>Détail</em> <em>Détail</em> </span> </div> <div class="dttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor </div> </div> <div class="dtcont dtc2"> <div class="dtheader"> <strong>Titre ici</strong> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor.</div> <div class="dtheader"> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor </div> </div> <div class="dtcont dtc3"> <div class="dtheader"> <strong>Titre ici</strong> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor </div> <div class="dtheader"> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor </div> <div class="dtheader"> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor </div> </div> <div class="dtcont dtc4"> <div class="dtheader"> <strong>Titre ici</strong> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor.</div> <div class="dtheader"> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext"> Cras viverra enim vehicula nunc condimentum, in aliquam nisi porttitor. Vestibulum turpis metus, semper ut cursus ac, feugiat aliquam est. Vivamus et ante massa. Fusce dignissim hendrerit vestibulum. Donec dui ex, facilisis eu neque ac, posuere malesuada ex. In ultrices arcu sit amet ipsum mattis, at tincidunt urna mattis. Maecenas at tortor nec felis facilisis congue ut et metus.</div> </div> <div class="dtcont dtc5"> <div class="dtheader"> <strong>Titre ici</strong> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nunc sed est tempor scelerisque a sed velit. In quis odio mauris. Vestibulum porttitor, tellus ut pellentesque convallis, metus ante viverra ex, vel faucibus sapien lorem a leo. Vestibulum eget porttitor sapien. Aenean dolor risus, dignissim eget posuere et, mattis id justo. Duis diam sem, semper id lobortis maximus, efficitur nec ipsum. Quisque iaculis at dui vitae molestie. Donec fermentum sit amet leo non auctor.</div> <div class="dtheader"> <span> <em>Nom catégorie</em> </span> </div> <div class="dttext"> Aliquam erat volutpat. Mauris eu accumsan dui. Aenean volutpat aliquam turpis, tincidunt consectetur justo porta eu. Nunc at tempus quam. Praesent facilisis eleifend massa sed euismod. In eget scelerisque dui. Nullam semper lobortis leo, ut sagittis nisi tempor ut. Aenean tempus mollis lacus, id rutrum lacus pellentesque non. Praesent tellus sapien, posuere egestas diam nec, convallis sodales leo. Curabitur id ornare ipsum. Fusce velit turpis, vestibulum in mattis mattis, maximus ut metus.</div> </div> </div> </div> <a href="http://necromancercoding.tumblr.com/" class="ncredit">NC</a> <style>.darkthoughts .dtleft a {width:100px; height:100px; object-fit:cover; object-position:center; position:absolute;}.darkthoughts .dtleft img {filter:var(--filter)!important;}.darkthoughts {--accent: #7c352f;--bckg:#1a1a1a;--tbckg:rgba(0,0,0,0.7);--tbckg2:rgba(0,0,0,0.2);--border1: 1px solid var(--accent);--border2: 5px solid var(--accent);--border3: 1px solid #000;--text: #aaa;--title:#fff;--icons:5;--filter-img1:grayscale(1) brightness(0.9) contrast(0.7);--filter-img2:grayscale(0) brightness(1) contrast(1);--filter-bckg:blur(3px);--bckg-img1:url(https://i.ibb.co/rxBd5DN/My-project-15.jpg);--bckg-img2:url(https://i.ibb.co/rxBd5DN/My-project-15.jpg);--bckg-img3:url(https://i.ibb.co/rxBd5DN/My-project-15.jpg);--bckg-img4:url(https://i.ibb.co/rxBd5DN/My-project-15.jpg);--bckg-img5:url(https://i.ibb.co/rxBd5DN/My-project-15.jpg);}</style> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Vidaloka&display=swap" rel="stylesheet"/><link rel="stylesheet" href="//dl.dropbox.com/s/lktq8hubq7pu8sf/darkthoughts.css"/>

02/01/2022

PRENOM

CITATION GAUCHE

CITATION HAUT 1

CITATION HAUT 2 COULEUR ICI

Recherche

Chronologie

Relation

X

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, couleur si vous voulez ullamco laboris nisi 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

T

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 italic si vous voulez 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

Titre du lien

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

Titre du lien

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

"

CITATION DROITE RECHERCHE

TITRE RP

Feat - Lieu

TITRE RP

Feat - Lieu

TITRE RP

Feat - Lieu

Actifs

Terminés

Abandonnés

Prénom

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

Prénom

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

Prénom

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

Code:: <link href="https://dl.dropbox.com/s/trtu111p6zpgumx/ZagreusExp.css" rel="stylesheet"><link rel="stylesheet" href="https://nagoshiashumari.github.io/Rpg-Awesome/stylesheets/rpg-awesome.min.css"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css" /><link href="https://fonts.googleapis.com/css2?family=Fugaz+One&family=Inria+Serif:wght@700&family=Roboto+Slab:wght@100;400;900&display=swap" rel="stylesheet"><div id="Container_Hades"> <div class="Back_House"> <div class="Zg_one"> <div class="Zg_name">PRENOM</div> <div class="Zg_quote1">CITATION GAUCHE </div> <div class="Zg_icon"><a href="https://ciaransoul.tumblr.com"><span class="ra ra-skull" style="color: var(--LightDark-color);"></span></a></div> </div> <div class="Zg_two"> <div id="Zg_header"> <div class="Zg_header_Cont"> <div class="Zg_icon_header1"><span class="ra ra-skull"></span></div> <il class="Zg_header_quote"> <il class="Zg_Title1">CITATION HAUT 1 </il> </il> <div class="Zg_Avatar"><img src="https://via.placeholder.com/140x140"> <div class="ZgFltr1"></div> </div> <il class="Zg_Title2">CITATION HAUT 2 <b>COULEUR ICI</b></il> <div class="Zg_icon_header2"><span class="ra ra-skull"></span></div> </div> </div> <div id="Zg_menu"> <div class="Zg_Menu_Cont"><input type="radio" name="bloodline" id="boton1" /><label for="boton1" class="run1"><span class="ra ra-spinning-sword"></span> <div class="Zg_menu_Title">Recherche</div> </label><input type="radio" name="bloodline" id="boton2" /><label for="boton2" class="run2"><span class="ra ra-flaming-arrow"></span> <div class="Zg_menu_Title">Chronologie</div> </label><input type="radio" name="bloodline" id="boton3" /><label for="boton3" class="run3"><span class="ra ra-broken-shield"></span> <div class="Zg_menu_Title">Relation</div> </label><input type="radio" name="bloodline" id="botonX" /><label for="botonX" class="bloodac">X</label> <div id="Zg_intro_pri"> <div class="Zg_intro_Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <b>couleur si vous voulez</b> ullamco laboris nisi 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</div> <div class="Zg_intro_Image">T<img src="https://via.placeholder.com/100x100"> <div class="ZgFltr2"></div> </div> <div class="Zg_intro_Text">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 <i>italic si vous voulez </i>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</div> </div> <div class="Zg_Cont Escape1"> <div id="ZCont_search"> <div class="ZCont_search_Title">Titre du lien<span class="ra ra-queen-crown"></span></div> <div class="ZCont_search_Text">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 </div> <div class="ZCont_search_Title">Titre du lien<span class="ra ra-heart-bottle"></span></div> <div class="ZCont_search_Text">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</div> </div> <div class="ZCont_search_img"> <div class="ZCont_SearchImg_Quote"> <div class="SearchImg_quote">"</div>CITATION DROITE RECHERCHE </div><img src="https://via.placeholder.com/150x490"> </div> </div> <div class="Zg_Cont Escape2"> <div class="ZCont_Chr1"> <div class="ZC_chrnam"><a href="" target="_blank">TITRE RP</a><span class="ra ra-heart-bottle"></span></div> <div class="ZC_chrtext">Feat - Lieu </div> <div class="ZC_chrnam"><a href="" target="_blank">TITRE RP</a><span class="ra ra-heart-bottle"></span></div> <div class="ZC_chrtext">Feat - Lieu </div> <div class="ZC_chrnam"><a href="" target="_blank">TITRE RP</a><span class="ra ra-heart-bottle"></span></div> <div class="ZC_chrtext">Feat - Lieu </div> </div> <div class="ZCont_Chr_line"></div> <div class="ZCont_Chr2"><span class="ra ra-heart-bottle"></span> <div class="ZCchr_name">Actifs</div><span class="ra ra-crowned-heart"></span> <div class="ZCchr_name">Terminés</div><span class="ra ra-skull-trophy"></span> <div class="ZCchr_name">Abandonnés</div> </div> </div> <div class="Zg_Cont Escape3"> <div id="Zg_Rela"> <div class="Zg_Rel"> <div class="Zg_Rell_ico"><span class="fas fa-moon-stars"></div> <div class="Zg_Rel_Img" style="background: url('https://via.placeholder.com/120x120');"></div> <div class="Zg_Rel_Text"> <div class="Rel_Title">Prénom</div> <div class="Rel_Text_">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</div> </div> </div> <div class="Zg_Rel"> <div class="Zg_Rell_ico"><span class="fas fa-skull-crossbones"></span></div> <div class="Zg_Rel_Img" style="background: url('https://via.placeholder.com/120x120');"></div> <div class="Zg_Rel_Text"> <div class="Rel_Title">Prénom</div> <div class="Rel_Text_">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</div> </div> </div> <div class="Zg_Rel"> <div class="Zg_Rell_ico"><span class="fas fa-claw-marks"></span></div> <div class="Zg_Rel_Img" style="background: url('https://via.placeholder.com/120x120');"></div> <div class="Zg_Rel_Text"> <div class="Rel_Title">Prénom</div> <div class="Rel_Text_">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</div> </div> </div> </div> </div> </div> </div> </div> </div></div><style>:root {--main-color: #5a2824; --second-color: #7c352f; --Third-color: #7c352f; 2: ; --outline-color: #5a2824;--filt-color: #4a050a;--text-color:gray;--LightDark-color:#090909;--hover-color: #ff1f3a;} .Zg_menu_Title { width: 85px !important; font-size: 11.5px !important; text-align: center !important; } .ZC_chrnam>a { color: var(--LightDark-color) !important; }</style>