Sujet: modèle : fiche de relations [ Dim 28 Mar - 14:28 ]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus nisi, congue ut velit a, ultricies ultrices quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie vestibulum purus. Vivamus mollis eros vitae justo ullamcorper aliquam. In semper egestas sem, ut sodales tortor condimentum ac. Nunc feugiat porta ex vitae luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum placerat felis in eros imperdiet euismod. Quisque mattis venenatis tellus, et commodo nulla imperdiet vitae. Donec varius, est nec rutrum porttitor, purus magna efficitur neque, nec porta nibh lacus in nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla
• Lorem ipsum 0/0 dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien.
• Lorem ipsum 0/0 Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla. Proin sit amet ornare massa.
• Lorem ipsum 0/0 Vivamus euismod diam tincidunt accumsan iaculis. Vestibulum ante turpis, scelerisque eget lectus at, fermentum malesuada ex. Sed vitae est rutrum, dapibus justo in, ornare eros.
• Lorem ipsum 0/0 Vestibulum scelerisque elit ac nulla aliquam placerat. Morbi lacinia mauris magna, eu tempus sapien vulputate at. Pellentesque at magna id eros vestibulum tempus ac fringilla mauris.
<link href="https://dl.dropbox.com/s/24v5flhy2uzfw0m/soliloquyi.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"><div class="i-contenedor"><div class="i-slider"> <input type="radio" name="slides" id="slide1" checked/> <input type="radio" name="slides" id="slide2"/> <input type="radio" name="slides" id="slide3"/> <input type="radio" name="slides" id="slide4"/> <input type="radio" name="slides" id="slide5"/> <div class="i-cambiante"></div><div class="i-wrap-label"> <label for="slide1"><span class="sf sf-jackolantern-o"></span></label> <label for="slide2"><span class="sf sf-certificate-o"></span></label> <label for="slide3"><span class="sf sf-book-o"></span></label> <label for="slide4"><span class="sf sf-beaker-o"></span></label> <label for="slide5"><span class="sf sf-atom-1-o"></span></label> </div><div class="i-wrap-controles"> <div class="i-controles"> <label for="slide2" class="i-control siguiente"> <i class="fas fa-arrow-circle-right"></i> </label> </div> <div class="i-controles"> <label for="slide1" class="i-control atras"> <i class="fas fa-arrow-circle-left"></i> </label> <label for="slide3" class="i-control siguiente"> <i class="fas fa-arrow-circle-right"></i> </label> </div> <div class="i-controles"> <label for="slide2" class="i-control atras"> <i class="fas fa-arrow-circle-left"></i> </label> <label for="slide4" class="i-control siguiente"> <i class="fas fa-arrow-circle-right"></i> </label> </div> <div class="i-controles"> <label for="slide3" class="i-control atras"> <i class="fas fa-arrow-circle-left"></i> </label> <label for="slide5" class="i-control siguiente"> <i class="fas fa-arrow-circle-right"></i> </label> </div> <div class="i-controles"> <label for="slide4" class="i-control atras"> <i class="fas fa-arrow-circle-left"></i> </label> </div> </div><div class="i-wrapslides"> <div class="i-slide pes1"> <div class="i-introwimg"> <div class="i-introimg" style="background: url(https://i.ibb.co/jThK74x/Sans-titre-1.png);"></div> <div class="i-introcaja"> <i class="fas fa-sun"></i> <div class="i-introtexto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus nisi, congue ut velit a, ultricies ultrices quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie vestibulum purus. Vivamus mollis eros vitae justo ullamcorper aliquam. In semper egestas sem, ut sodales tortor condimentum ac. Nunc feugiat porta ex vitae luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum placerat felis in eros imperdiet euismod. Quisque mattis venenatis tellus, et commodo nulla imperdiet vitae. Donec varius, est nec rutrum porttitor, purus magna efficitur neque, nec porta nibh lacus in nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div> </div></div><div class="i-introwtitu"> <div class="i-intropar">PETIT TITRE</div> <div class="i-titulo">TITRE</div> <div class="i-intropar">PETIT TITRE</div> </div> </div> <div class="i-slide pes2"> <div class="i-wabout"><div class="i-wimgabout"> <div class="i-imgabout" style="background: url(https://i.ibb.co/RHFJdrv/Sans-titre-1.png);"></div> </div><div class="i-wcontacto"> <a href="URL MP" class="i-contacto"> <i class="fas fa-envelope"></i> <div class="i-contexto">Envoyez-moi un MP</div> </a> <a href="URL FICHE" class="i-contacto"> <i class="fas fa-address-card"></i> <div class="i-contexto">Visiter ma fiche</div> </a> </div></div><div class="i-wdatos"> <div class="i-dato"> <i class="fas fa-hourglass"></i> L'ÂGE DE VOTRE PERSONNAGE </div> <div class="i-dato"> <i class="fas fa-venus-mars"></i> LE GENRE DE VOTRE PERSONNAGE </div> <div class="i-dato"> <i class="fas fa-heart"></i> SEXUALITÉ DE VOTRE PERSONNAGE </div> <div class="i-dato"> <i class="fas fa-user"></i> GROUPE DE VOTRE PERSONNAGE </div> <div class="i-dato"> <i class="fas fa-suitcase"></i> OCCUPATION DE VOTRE PERSONNAGE </div> </div><div class="i-wtags"><div class="i-tags"> <div class="i-tag">MOT-CLÉ</div> <div class="i-tag">MOT-CLÉ</div> <div class="i-tag">MOT-CLÉ</div> <div class="i-tag">MOT-CLÉ</div> <div class="i-tag">MOT-CLÉ</div> <div class="i-tag">MOT-CLÉ</div> <div class="i-tag">MOT-CLÉ</div> <div class="i-tag">MOT-CLÉ</div> </div></div> </div> <div class="i-slide pes3"> <div class="i-titulo in">Relations</div> <div class="i-wrelacrono"> <div class="i-mrelacrono"> <div class="i-imgrelac" style="background: url(https://i.ibb.co/51tW9KX/Sans-titre-1.png);"> <a href="URL PROFIL PERSO" class="i-nomrelac">Nombre S. Apellido</a> </div><div class="i-relacrono"> <div style="margin-bottom: 6px;font-size: 12px;margin-top: 6px;">• TYPE DU LIEN</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla </div> </div> <div class="i-mrelacrono"> <div class="i-imgrelac" style="background: url(https://i.ibb.co/51tW9KX/Sans-titre-1.png);"> <a href="URL PROFIL PERSO" class="i-nomrelac">Nombre S. Apellido</a> </div><div class="i-relacrono"> <div style="margin-bottom: 6px;font-size: 12px;margin-top: 6px;">• TYPE DU LIEN</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla </div> </div> <div class="i-mrelacrono"> <div class="i-imgrelac" style="background: url(https://i.ibb.co/51tW9KX/Sans-titre-1.png);"> <a href="URL PROFIL PERSO" class="i-nomrelac">Nombre S. Apellido</a> </div><div class="i-relacrono"> <div style="margin-bottom: 6px;font-size: 12px;margin-top: 6px;">• TYPE DU LIEN</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla </div> </div> <div class="i-mrelacrono"> <div class="i-imgrelac" style="background: url(https://i.ibb.co/51tW9KX/Sans-titre-1.png);"> <a href="URL PROFIL PERSO" class="i-nomrelac">Nombre S. Apellido</a> </div><div class="i-relacrono"> <div style="margin-bottom: 6px;font-size: 12px;margin-top: 6px;">• TYPE DU LIEN</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla </div> </div> <div class="i-mrelacrono"> <div class="i-imgrelac" style="background: url(https://i.ibb.co/51tW9KX/Sans-titre-1.png);"> <a href="URL PROFIL PERSO" class="i-nomrelac">Nombre S. Apellido</a> </div><div class="i-relacrono"> <div style="margin-bottom: 6px;font-size: 12px;margin-top: 6px;">• TYPE DU LIEN</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla </div> </div> <div class="i-mrelacrono"> <div class="i-imgrelac" style="background: url(https://i.ibb.co/51tW9KX/Sans-titre-1.png);"> <a href="URL PROFIL PERSO" class="i-nomrelac">Nombre S. Apellido</a> </div><div class="i-relacrono"> <div style="margin-bottom: 6px;font-size: 12px;margin-top: 6px;">• TYPE DU LIEN</div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien. Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla </div> </div> </div></div> <div class="i-slide pes4"> <div class="i-titulo in">Chronologie</div> <div class="i-wrelacrono"> <div class="i-mrelacrono v2"> <div class="i-imgrelac v2"><div class="i-cronotexto"> <div class="i-minititu">NOM DE VOTRE SUJET</div> <span>Feat <a href="URL PROFIL">Nom Prénom</a></span> </div></div><div class="i-tooltip"> <span>DATE DU RP</span> </div><div class="i-relacrono"> <i class="fas fa-calendar-plus"></i> RP EN COURS </div> </div> <div class="i-mrelacrono v2"> <div class="i-imgrelac v2"><div class="i-cronotexto"> <div class="i-minititu">NOM DE VOTRE SUJET</div> <span>Feat <a href="URL PROFIL">Nom Prénom</a></span> </div></div><div class="i-tooltip"> <span>DATE DU RP</span> </div><div class="i-relacrono"> <i class="fas fa-calendar-plus"></i> RP EN COURS </div> </div> <div class="i-mrelacrono v2"> <div class="i-imgrelac v2"><div class="i-cronotexto"> <div class="i-minititu">NOM DE VOTRE SUJET</div> <span>Feat <a href="URL PROFIL">Nom Prénom</a></span> </div></div><div class="i-tooltip"> <span>DATE DU RP</span> </div><div class="i-relacrono"> <i class="fas fa-calendar-check"></i> RP TERMINÉ </div> </div> <div class="i-mrelacrono v2"> <div class="i-imgrelac v2"><div class="i-cronotexto"> <div class="i-minititu">NOM DE VOTRE SUJET</div> <span>Feat <a href="URL PROFIL">Nom Prénom</a></span> </div></div><div class="i-tooltip"> <span>DATE DU RP</span> </div><div class="i-relacrono"> <i class="fas fa-calendar-check"></i> RP TERMINÉ </div> </div> <div class="i-mrelacrono v2"> <div class="i-imgrelac v2"><div class="i-cronotexto"> <div class="i-minititu">NOM DE VOTRE SUJET</div> <span>Feat <a href="URL PROFIL">Nom Prénom</a></span> </div></div><div class="i-tooltip"> <span>DATE DU RP</span> </div><div class="i-relacrono"> <i class="fas fa-calendar-times"></i> RP ABANDONNÉ </div> </div> <div class="i-mrelacrono v2"> <div class="i-imgrelac v2"><div class="i-cronotexto"> <div class="i-minititu">NOM DE VOTRE SUJET</div> <span>Feat <a href="URL PROFIL">Nom Prénom</a></span> </div></div><div class="i-tooltip"> <span>DATE DU RP</span> </div><div class="i-relacrono"> <i class="fas fa-calendar-times"></i> RP ABANDONNÉ </div> </div> </div></div> <div class="i-slide pes5"> <div class="i-wcronica"> <div class="i-crontitumini">PETIT TITRE</div> <div class="i-crontitu">GRAND TITRE</div> <div class="i-liens">• Lorem ipsum 0/0 dolor sit amet, consectetur adipiscing elit. Sed sed nisi urna. Aenean enim orci, maximus sit amet felis at, posuere fermentum sapien.
• Lorem ipsum 0/0 Nam ante tellus, hendrerit in molestie et, tristique sit amet orci. Donec non mi vel nisl feugiat convallis. Nunc sed velit nulla. Proin sit amet ornare massa.
• Lorem ipsum 0/0 Vivamus euismod diam tincidunt accumsan iaculis. Vestibulum ante turpis, scelerisque eget lectus at, fermentum malesuada ex. Sed vitae est rutrum, dapibus justo in, ornare eros.
Sujet: modèle : fiche de relations [ 
