Modèle de fiche de liens facultative

**Les Moires** Admin Messages : 47 Date d'inscription : 15/10/2019

Fiche de liens

« Finish »

A votre disposition, voici un modèle de fiche de liens et de rps. A vous de l'utiliser ou non !

Première partie :

Code:: <link href="https://fonts.googleapis.com/css?family=Allura|Dorsa|Megrim" rel="stylesheet"><link rel="stylesheet" type="text/css" href="https://codepen.io/ANESIDORA/pen/gzzXjg.css"><style> /* texte au survol de l'image*/.bp_adcb8{ color:; font-family: Verdana; font-size: 10px; line-height: 20px; text-align: justify;}/* textes au survol du bas*/.overcont_adcb8{ font-size: 9px; line-height: 16px;}/* pseudo*/cc{display: block; color: white; font-family: Allura; font-size: 46px; line-height: 32px; text-align: center;}/* textes mis en évidence, bas*/c, .bas_adcb8{ font-size: 9px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-align: center;}/* bas*/.bas_adcb8{ font-size: 11px; letter-spacing: 3px;url}/* liens url*/.bp_adcb8 a{ color: darkorange;} /* filtre de l'image*/.filtre_adcb8{ background: DarkSlateBlue; mix-blend-mode: lighten;} /* filtre de l'avatar*/.avatar_adcb8{ filter: grayscale(70%);}.avatar_adcb8 .filtre_adcb8{ opacity: 0.7;}.avatar_adcb8:hover, .avatar_adcb8:hover .filtre_adcb8{ filter: none; opacity: 1;} /* couleur des triangles*/[class*=plein_adcb8], [class*=creux_adcb8]{ background: lavender; opacity: 0.6;} /* fond du bas*/.bp_adcb8{ background: black;}/* fond du texte au survol de l'image*/.in_milieu_adcb8{ background: black; opacity: 0.9;}/* fond des textes au survol du bas*/.texte_adcb8{ background: black; opacity: 0.9;} </style><div class="bp_adcb8"> <div class="img_adcb8" style="/* URL DE L'IMAGE DE FOND */background: black;"> <div class="milieu_adcb8"> <div class="in_milieu_adcb8"> <div class="milieu_texte_adcb8"><center><c>| ce qu'il y a à savoir sur le personnage |</c></center> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus, dui ac bibendum bibendum, est nibh facilisis dolor, ut imperdiet turpis ex ullamcorper ex. Integer volutpat leo lectus, id varius enim sagittis et. Integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. Cras efficitur metus tellus, nec facilisis tortor consectetur in. Ut arcu ligula, vestibulum quis velit ut, scelerisque vestibulum quam. Suspendisse vitae fermentum odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed turpis est. Donec a ex sed ligula dignissim viverra vel vel ante. Suspendisse potenti. Curabitur varius eu risus vel facilisis. Nunc pharetra sapien vel libero dictum vulputate. Maecenas faucibus iaculis ex, quis lobortis nisl faucibus ut. Vivamus non tempus nulla, quis interdum libero. Nunc tristique nunc ut dolor luctus sodales. Nulla lobortis at tellus et sollicitudin. Nullam a ante convallis, vulputate nisl vitae, sodales justo. Cras non purus sit amet lectus lobortis luctus at sed nisi.</div> <div class="credit_adcb8">☾ANESIDORA</div> </div> </div> </div> <div class="bas_adcb8"> <table><tr><td>| informations complémentaires |</td></tr></table> </div> <div class="overcont_adcb8"> <div class="uncontenant_adcb8"> <div class="un_inbloc_adcb8"> <div class="avatar_adcb8" style="float: left; /* URL DE L'AVATAR DE GAUCHE*/background: url(https://images2.imgbox.com/4c/c1/QikZFc0Q_o.gif) 50% 50%/cover;"><div class="filtre_adcb8"></div></div> <div class="texte_adcb8" style="float: right;"> <div class="in_texte_adcb8"><c>| les histoires passées |</c> <a href=""><i>(date)</i></a> avec lui et elle, <a href=""><i>(date)</i></a> avec lui et elle, <a href=""><i>(date)</i></a> avec lui et elle <c>| les histoires présentes |</c> <a href=""><i>(date)</i></a> avec lui et elle, <a href=""><i>(date)</i></a> avec lui et elle, <a href=""><i>(date)</i></a> avec lui et elle</div> </div> </div> </div> <div class="deuxcontenant_adcb8"> <div class="deux_inbloc_adcb8"> <div class="texte_adcb8" style="float: left;"> <div class="in_texte_adcb8"><center><c>| ceux qu'on recherche |</c></center><c><i>(m/f) lien</i></c> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non semper nibh, vel auctor orci. <c><i>(m/f) lien</i></c> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non semper nibh, vel auctor orci. <c><i>(m/f) lien</i></c> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non semper nibh, vel auctor orci.</div> </div> <div class="avatar_adcb8" style="float: right;/* URL DE L'AVATAR DE DROITE*/background: url(https://images2.imgbox.com/c4/d9/2WLl5vA0_o.gif) 50% 50%/cover;"><div class="filtre_adcb8"></div></div> </div> </div> </div> <div class="in_filtre_adcb8"> <table><tr><td><cc>Prénom Nom</cc></td></tr></table> <div class="un_plein_adcb8"></div> <div class="un_creux_adcb8"></div> <div class="deux_creux_adcb8"></div> <div class="deux_plein_adcb8"></div> </div></div>

Deuxième partie :

Code:: <link rel="stylesheet" type="text/css" href="https://codepen.io/ANESIDORA/pen/bMMwxz.css"><link href="https://fonts.googleapis.com/css?family=Allura|Dorsa|Megrim" rel="stylesheet"><style>/* texte au survol de l'image*/.bp_adli8{ color: #1A1A1A; font-family: Verdana; font-size: 8px; line-height: 15px; text-align: justify;}/* textes mis en évidence, bas*/c, .bas_adli8, .credit_adli8{ font-size: 9px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-align: center;}/* bas*/.bas_adli8{ letter-spacing: 2px;}/* credit*/.credit_adli8{ font-size: 6px; letter-spacing: 0; opacity: 0.7;} .ans_adli8{ color: darkslateblue; font-family: Verdana; font-size: 6px; font-weight: bold; letter-spacing: 8px; text-transform: uppercase; text-align: right; opacity: 0.7;}/* titre*/.titre_adli8{ width: 480px; margin: 10px auto -30px; color: #572b22; font-family: Allura; font-size: 46px; line-height: 32px; text-align: center;}/* ligne de séparation*/.ligne_adli8{ width: 380px; height: 4px; background: grey; margin: 30px auto;}/* fond du bas*/.bas_adli8{ background: black;} /* fond du texte*/.texte_adli8{ background: black; opacity: 0.9; } /* filtre de l'avatar*/.filtre_adli8{ background:; mix-blend-mode: lighten;}/* bordure de l'avatar*/.bord_adli8{ border: 1px solid grey;}/* couleur des triangles*/[class*=plein_adli8], [class*=creux_adli8]{ background:grey;}/* opacité des triangles pleins*/[class*=plein_adli8]{ opacity: 0.3;}/* opacité des triangles creux*/[class*=creux_adli8]{ opacity: 0.4;}</style><div class="titre_adli8">  play with me</div><div class="ligne_adli8"></div><div class="ans_adli8">☾ANESIDORA</div><div class="bp_adli8">  <div class="un_contenant_adli8"> <div class="bas_adli8"> <table><tr><td>  | prénom nom | </td></tr></table> </div> <div class="avatar_adli8" style=" /* URL DE L'IMAGE*/ background: url(https://images2.imgbox.com/e2/c7/1rwJq2ze_o.png) 50% 50%/cover;"> <div class="filtre_adli8"></div> <div class="bord_adli8"></div> </div> <div class="overcont_adli8"> <div class="texte_adli8"> <div class="in_texte_adli8">  lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. </div> <div class="credit_adli8">  | avatar by prométhée| </div> </div> </div> <div class="un_plein_adli8"></div> <div class="un_creux_adli8"></div> <div class="deux_creux_adli8"></div> <div class="deux_plein_adli8"></div> </div>   <div class="deux_contenant_adli8"> <div class="bas_adli8"> <table><tr><td>  | prénom nom | </td></tr></table> </div> <div class="avatar_adli8" style=" /* URL DE L'IMAGE*/ background: url(https://images2.imgbox.com/b5/08/dtV5Nnl9_o.gif) 50% 50%/cover;"> <div class="filtre_adli8"></div> <div class="bord_adli8"></div> </div> <div class="overcont_adli8"> <div class="texte_adli8"> <div class="in_texte_adli8">  lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. </div> <div class="credit_adli8"> | avatar by prométhée| </div> </div> </div> <div class="un_plein_adli8"></div> <div class="un_creux_adli8"></div> <div class="deux_creux_adli8"></div> <div class="deux_plein_adli8"></div> </div>   <div class="trois_contenant_adli8"> <div class="bas_adli8"> <table><tr><td>  | prénom nom | </td></tr></table> </div> <div class="avatar_adli8" style=" /* URL DE L'IMAGE*/ background: url(https://images2.imgbox.com/3f/d5/6LNjV7Po_o.png) 50% 50%/cover;"> <div class="filtre_adli8"></div> <div class="bord_adli8"></div> </div> <div class="overcont_adli8"> <div class="texte_adli8"> <div class="in_texte_adli8">  lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. </div> <div class="credit_adli8"> | avatar by prométhée| </div> </div> </div> <div class="un_plein_adli8"></div> <div class="un_creux_adli8"></div> <div class="deux_creux_adli8"></div> <div class="deux_plein_adli8"></div> </div> </div><div class="ligne_adli8"></div><div class="bp_adli8">  <div class="un_contenant_adli8"> <div class="bas_adli8"> <table><tr><td>  | prénom nom | </td></tr></table> </div> <div class="avatar_adli8" style=" /* URL DE L'IMAGE*/ background: url(https://images2.imgbox.com/bd/7f/twFqT3GA_o.gif) 50% 50%/cover;"> <div class="filtre_adli8"></div> <div class="bord_adli8"></div> </div> <div class="overcont_adli8"> <div class="texte_adli8"> <div class="in_texte_adli8">  lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. </div> <div class="credit_adli8"> | avatar by prométhée| </div> </div> </div> <div class="un_plein_adli8"></div> <div class="un_creux_adli8"></div> <div class="deux_creux_adli8"></div> <div class="deux_plein_adli8"></div> </div>   <div class="deux_contenant_adli8"> <div class="bas_adli8"> <table><tr><td>  | prénom nom | </td></tr></table> </div> <div class="avatar_adli8" style=" /* URL DE L'IMAGE*/ background: url(https://images2.imgbox.com/80/97/BiJq5QTT_o.png) 50% 50%/cover;"> <div class="filtre_adli8"></div> <div class="bord_adli8"></div> </div> <div class="overcont_adli8"> <div class="texte_adli8"> <div class="in_texte_adli8">  lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. </div> <div class="credit_adli8"> | avatar by prométhée| </div> </div> </div> <div class="un_plein_adli8"></div> <div class="un_creux_adli8"></div> <div class="deux_creux_adli8"></div> <div class="deux_plein_adli8"></div> </div>   <div class="trois_contenant_adli8"> <div class="bas_adli8"> <table><tr><td>  | prénom nom | </td></tr></table> </div> <div class="avatar_adli8" style=" /* URL DE L'IMAGE*/ background: url(https://images2.imgbox.com/9d/f3/gsjNXWIR_o.png) 50% 50%/cover;"> <div class="filtre_adli8"></div> <div class="bord_adli8"></div> </div> <div class="overcont_adli8"> <div class="texte_adli8"> <div class="in_texte_adli8">  lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. </div> <div class="credit_adli8"> | avatar by prométhée| </div> </div> </div> <div class="un_plein_adli8"></div> <div class="un_creux_adli8"></div> <div class="deux_creux_adli8"></div> <div class="deux_plein_adli8"></div> </div> </div><div class="ligne_adli8"></div>

**Les Moires** Admin Messages : 47 Date d'inscription : 15/10/2019

| ce qu'il y a à savoir sur le personnage |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus, dui ac bibendum bibendum, est nibh facilisis dolor, ut imperdiet turpis ex ullamcorper ex. Integer volutpat leo lectus, id varius enim sagittis et. Integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a. Cras efficitur metus tellus, nec facilisis tortor consectetur in. Ut arcu ligula, vestibulum quis velit ut, scelerisque vestibulum quam. Suspendisse vitae fermentum odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed turpis est. Donec a ex sed ligula dignissim viverra vel vel ante. Suspendisse potenti. Curabitur varius eu risus vel facilisis. Nunc pharetra sapien vel libero dictum vulputate. Maecenas faucibus iaculis ex, quis lobortis nisl faucibus ut. Vivamus non tempus nulla, quis interdum libero. Nunc tristique nunc ut dolor luctus sodales. Nulla lobortis at tellus et sollicitudin. Nullam a ante convallis, vulputate nisl vitae, sodales justo. Cras non purus sit amet lectus lobortis luctus at sed nisi.

☾ANESIDORA

| informations complémentaires |

| les histoires passées | (date) avec lui et elle, (date) avec lui et elle, (date) avec lui et elle

| les histoires présentes | (date) avec lui et elle, (date) avec lui et elle, (date) avec lui et elle

| ceux qu'on recherche |(m/f) lien Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non semper nibh, vel auctor orci.
(m/f) lien Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non semper nibh, vel auctor orci.
(m/f) lien Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non semper nibh, vel auctor orci.

Prénom Nom

**Les Moires** Admin Messages : 47 Date d'inscription : 15/10/2019

play with me

☾ANESIDORA

| prénom nom |

lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a.

| avatar by prométhée|

| prénom nom |

lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a.

| avatar by prométhée|

| prénom nom |

lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a.

| avatar by prométhée|

| prénom nom |

lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a.

| avatar by prométhée|

| prénom nom |

lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a.

| avatar by prométhée|

| prénom nom |

lorem ipsum integer malesuada diam id tortor mollis lobortis. Phasellus faucibus arcu mauris, sed posuere neque gravida a. Pellentesque nec maximus nulla. Maecenas a interdum augue. Aliquam lacinia mattis metus, vitae varius tortor venenatis sit amet. Morbi sit amet tortor rhoncus risus venenatis malesuada. Aliquam vehicula odio augue, quis accumsan ex fermentum a.

| avatar by prométhée|

neven

azenor

Modèle de fiche de liens facultative

Modèle de fiche de liens facultative

Re: Modèle de fiche de liens facultative

Re: Modèle de fiche de liens facultative

Re: Modèle de fiche de liens facultative