Le Deal du moment :
Display japonaise One Piece Card Game OP-09 The Four ...
Voir le deal

 
One For AllAdmin
# - Modèle : Carnet - [Facultatif]Ven 31 Juil - 16:17

Prénom et nomPrénom et nom

iconiconiconicon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet.

âge - nationalité - situation maritale - métier
  • qualité
  • qualité
  • qualité
  • qualité
  • défaut
  • défaut
  • défaut
  • défaut

Je cherche

AmiLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. Donec venenatis, mi in semper ornare, felis ligula scelerisque augue, id sollicitudin enim sapien eu purus.

AmiLorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. Donec venenatis, mi in semper ornare, felis ligula scelerisque augue, id sollicitudin enim sapien eu purus.

artemis | www




Code:
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Roboto&display=swap" rel="stylesheet"><div class="content_relation_arte"><h1>Prénom et nom<span>Prénom et nom</span></h1> <div class="icons_personnage"><img src="http://via.placeholder.com/90" alt="icon"/><img src="http://via.placeholder.com/90" alt="icon"/><img src="http://via.placeholder.com/90" alt="icon"/><img src="http://via.placeholder.com/90" alt="icon"/></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. </p><div class="infos_generales">âge - nationalité - situation maritale - métier</div><ul><li>qualité</li><li>qualité</li><li>qualité</li><li>qualité</li><li>défaut</li><li>défaut</li><li>défaut</li><li>défaut</li></ul> <h2>Je cherche</h2> <div class="liens_recherches"><p><span>Ami</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. Donec venenatis, mi in semper ornare, felis ligula scelerisque augue, id sollicitudin enim sapien eu purus.</p><p><span>Ami</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. Donec venenatis, mi in semper ornare, felis ligula scelerisque augue, id sollicitudin enim sapien eu purus.</p></div><div class="credit_epicode">artemis | <a href="http://www.epicode-entraide.com">www</a></div></div>

<style>:root{--color-background-blue: #a2c3e0;}.content_relation_arte{width: 470px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px; background: #efefef; margin: auto; overflow: hidden;}.content_relation_arte > h1{margin: 0; color: white; font: 40px fjalla one; position: relative; z-index: 2; text-transform: uppercase; -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); width: 460px; line-height: 65px; margin-bottom: 30px;}.content_relation_arte > h1 > span{color: var(--color-background-blue); display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); margin-top: -30px;}.content_relation_arte > h1:after{content: " "; width: 600px; height: 550px; background: var(--color-background-blue); position: absolute; top: -500px; left: -80px; z-index: -1;}.icons_personnage{width: 210px; height: 210px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;}.icons_personnage > img{width: 90px; height: 90px; -o-object-fit: cover; object-fit: cover; border-top: 5px solid white; border-right: 5px solid var(--color-background-blue); border-bottom: 5px solid var(--color-background-blue); border-left: 5px solid white;}.content_relation_arte > p{width: 220px; height: 205px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid var(--color-background-blue); margin: 0; font: 11px roboto; text-align: justify; padding: 10px; overflow: auto; color: #969696; line-height: 11px;}.infos_generales{width: 100%; height: 30px; background: var(--color-background-blue); text-align: center; font: 11px roboto; text-transform: uppercase; color: white; padding: 5px; line-height: 30px; margin: 0;}.content_relation_arte > ul{width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 65px; list-style-type: none; padding: 0; margin: 5px 0;}.content_relation_arte > ul > li{display: block; width: 100px; height: 25px; border: 1px solid var(--color-background-blue); text-align: center; font: 10px roboto; text-transform: uppercase; color: var(--color-background-blue); line-height: 25px;}.content_relation_arte > h2{font: 30px fjalla one; color: var(--color-background-blue); width: 100%; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 20px; text-transform: uppercase; margin: 0;}.liens_recherches{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}.liens_recherches > p{width: 215px; height: 100px; margin: 0 0 10px 0; overflow: auto; text-align: justify; font: 11px roboto; color: #787878;}.liens_recherches > p > span{display: block; float: left; padding: 5px 10px ; background: var(--color-background-blue); font: 12px roboto; text-transform: uppercase; color: white; margin: 0 5px 0 0;} .credit_epicode {width: 100%; text-align: center; font: 10px calibri; text-transform: uppercase; opacity: 0.6;}</style>
One For All
Pour les curieuxhttps://mha-heroes-awakening.forumactif.com

One For AllAdmin
# Re: - Modèle : Carnet - [Facultatif]Ven 6 Nov - 16:54

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

ce que je recherche
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.
nom prénom
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.
nom prénom
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.
nom prénom
affinités
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.
nom prénom
affinités
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.
©linus pour Epicode



Code:
<div class="template-linus-3 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 ***/
 --><a href="#" title="Voir sa fiche" target=_blank class="tli-avatar"><!--
 --><img src="https://epicode.strandhogg.fr/placeholders/9.jpg" alt="mon avatar"/><!--
 --><span>nomprenom nomprenom</span><!--
 --></a><!--
 /*** 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 recherche ***/
 --><div class="tli-body-onglet">ce que je recherche</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. 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.</div><!--
 /*** fin du bloc recherche ***/

 /*** début des blocs liens ***/
 --><div class="tli-liens"><!--

 /*** début du bloc lien ***/
 --><div class="tli-lien"><!--
 --><div class="tli-body-onglet">nom prénom</div><!--
 --><div class="tli-details"><!--

 /*** début avatar ***/
 --><a href="#" title="Voir sa fiche" target=_blank class="tli-avatar"><!--
 --><img src="https://epicode.strandhogg.fr/placeholders/6.jpg" alt="mon avatar"/><!--
 --><span>nomprenom nomprenom</span><!--
 --></a><!--
 /*** fin avatar ***/

 --></div><!--

 /*** début liens rps et affinité ***/
 --><div class="tli-more"><!--
 --><div class="tli-affinites"><!--
 --><span>affinités</span><!--
 /*** barre d'affinites : choisir un chiffre entre 0 et 10, tli-hate-N pour la barre bleue, tli-love-N pour la barre rose ***/
 --><div class="tli-affinites-bar tli-hate-1 tli-love-5"></div><!--
 --></div><!--
 --><div class="tli-rps"><!--
 --><span>rps</span><!--
 --><div><!--
 --><a href="#" target=_blank>lien1</a> <!--
 --><a href="#" target=_blank>lien2</a> <!--
 --><a href="#" target=_blank>lien3</a> <!--
 --><a href="#" target=_blank>lien4</a> <!--
 --><a href="#" target=_blank>lien5</a> <!--
 --><a href="#" target=_blank>lien6</a> <!--
 --></div><!--
 --></div><!--
 --></div><!--
 /*** fin liens rps et affinité ***/

 --><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.</div><!--
 --></div><!--
 /*** fin du bloc lien ***/

 /*** début du bloc lien ***/
 --><div class="tli-lien"><!--
 --><div class="tli-body-onglet">nom prénom</div><!--
 --><div class="tli-details"><!--

 /*** début avatar ***/
 --><a href="#" title="Voir sa fiche" target=_blank class="tli-avatar"><!--
 --><img src="https://epicode.strandhogg.fr/placeholders/7.jpg" alt="mon avatar"/><!--
 --><span>nomprenom nomprenom</span><!--
 --></a><!--
 /*** fin avatar ***/

 --></div><!--

 /*** début liens rps et affinité ***/
 --><div class="tli-more"><!--
 --><div class="tli-affinites"><!--
 --><span>affinités</span><!--
 /*** barre d'affinites : choisir un chiffre entre 0 et 10, tli-hate-N pour la barre bleue, tli-love-N pour la barre rose ***/
 --><div class="tli-affinites-bar tli-hate-5 tli-love-5"></div><!--
 --></div><!--
 --><div class="tli-rps"><!--
 --><span>rps</span><!--
 --><div><!--
 --><a href="#" target=_blank>lien1</a> <!--
 --><a href="#" target=_blank>lien2</a> <!--
 --><a href="#" target=_blank>lien3</a> <!--
 --><a href="#" target=_blank>lien4</a> <!--
 --><a href="#" target=_blank>lien5</a> <!--
 --><a href="#" target=_blank>lien6</a> <!--
 --><a href="#" target=_blank>lien7</a> <!--
 --><a href="#" target=_blank>lien8</a> <!--
 --></div><!--
 --></div><!--
 --></div><!--
 /*** fin liens rps et affinité ***/

 --><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.</div><!--
 --></div><!--
 /*** fin du bloc lien ***/

 /*** début du bloc lien ***/
 --><div class="tli-lien"><!--
 --><div class="tli-body-onglet">nom prénom</div><!--
 --><div class="tli-details"><!--

 /*** début avatar ***/
 --><a href="#" title="Voir sa fiche" target=_blank class="tli-avatar"><!--
 --><img src="https://epicode.strandhogg.fr/placeholders/8.jpg" alt="mon avatar"/><!--
 --><span>nomprenom nomprenom</span><!--
 --></a><!--
 /*** fin avatar ***/

 --></div><!--

 /*** début liens rps et affinité ***/
 --><div class="tli-more"><!--
 --><div class="tli-affinites"><!--
 --><span>affinités</span><!--
 /*** barre d'affinites : choisir un chiffre entre 0 et 10, tli-hate-N pour la barre bleue, tli-love-N pour la barre rose ***/
 --><div class="tli-affinites-bar tli-hate-2 tli-love-2"></div><!--
 --></div><!--
 --><div class="tli-rps"><!--
 --><span>rps</span><!--
 --><div><!--
 --><a href="#" target=_blank>lien1</a> <!--
 --><a href="#" target=_blank>lien2</a> <!--
 --></div><!--
 --></div><!--
 --></div><!--
 /*** fin liens rps et affinité ***/

 --><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.</div><!--
 --></div><!--
 /*** fin du bloc lien ***/

 /*** début du bloc lien ***/
 --><div class="tli-lien"><!--
 --><div class="tli-body-onglet">nom prénom</div><!--
 --><div class="tli-details"><!--

 /*** début avatar ***/
 --><a href="#" title="Voir sa fiche" target=_blank class="tli-avatar"><!--
 --><img src="https://epicode.strandhogg.fr/placeholders/9.jpg" alt="mon avatar"/><!--
 --><span>nomprenom nomprenom</span><!--
 --></a><!--
 /*** fin avatar ***/

 --></div><!--

 /*** début liens rps et affinité ***/
 --><div class="tli-more"><!--
 --><div class="tli-affinites"><!--
 --><span>affinités</span><!--
 /*** barre d'affinites : choisir un chiffre entre 0 et 10, tli-hate-N pour la barre bleue, tli-love-N pour la barre rose ***/
 --><div class="tli-affinites-bar tli-hate-4 tli-love-3"></div><!--
 --></div><!--
 --><div class="tli-rps"><!--
 --><span>rps</span><!--
 --><div><!--
 --><a href="#" target=_blank>lien1</a> <!--
 --><a href="#" target=_blank>lien2</a> <!--
 --><a href="#" target=_blank>lien3</a> <!--
 --><a href="#" target=_blank>lien4</a> <!--
 --></div><!--
 --></div><!--
 --></div><!--
 /*** fin liens rps et affinité ***/

 --><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.</div><!--
 --></div><!--
 /*** fin du bloc lien ***/

 --></div><!--
 /*** fin des blocs liens ***/

--><div class="tli-credits">:copyright:linus pour <a href="http://epicode.variousforum.com/" target=_blank>Epicode</a></div></div>

<link type="text/css" rel="stylesheet" href="https://epicode.strandhogg.fr/css/3.css"/>
One For All
Pour les curieuxhttps://mha-heroes-awakening.forumactif.com

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum