Quelques modèles en libre Service

Modèles de fiches

Informations

A la suite de ce message, vous trouverez plusieurs fiches de liens / RPGs, codées par des membres de RM.

Ceci vous permet donc de ne pas courir après des codes, si vous ne connaissez pas de site de codage ou si vous ne savez pas coder ou n'avez pas le temps !

Listing

Loukoum - Fiche 1

Bounty - Fiche 2

Loukoum - Fiche 3

Loukoum - Fiche 4

Loukoum - Fiche 5

Loukoum - Fiche 6

Loukoum - Fiche 6.1
Merci à Pitch pour son interprétation de la première version qui donne celle-ci ^^

La Team Chicken

Fiche 1

Les couleurs ne sont pas assorties au forum. Cependant cette fiche ne comporte pas de couleur de fond ou même d'image, elle s'accordera donc d'elle même.
La typologie et les couleurs des titres sont libres.

Code du premier message :

Code:: <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">

<style type="text/css">.tictac{width:200px;height:320px;overflow:hidden;}.tictac_img{position:relative;z-index:2;width:200px;height:320px;margin-top:0px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:2s;-moz-transition:2s;-o-transition:2s;-htm-transition:2s;-webkit-transition:2s;}.tictac:hover .tictac_img{margin-left:-200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:2s;-moz-transition:2s;-o-transition:2s;-htm-transition:2s;-webkit-transition:2s;}.tictac_description{position:relative;z-index:1;width:190px;height:310px;margin-top:-320px;overflow-y:auto;overflow-x:hidden;text-align:justify;padding:10px;font-size:12px;}</style>

<center><div style="width:90%;"><img src="URLIMAGE" style="width:100%;" /><div style="font-family:'Great Vibes';font-size:40px;width:80%;color:#c6779e;text-shadow:2px 0px 0px #ACB5A1;margin-top:-50px;">Titre</div><br/><br/><br/><table align=center><tr><td style="padding:10px;"><div class="tictac"><div class="tictac_img"><img src="URLIMAGE" width="200px;" height="320px;" /></div><div class="tictac_description"><p>Ici, le texte que vous souhaitez mettre derrière l'avatar</p></div></div></td><td style="padding:10px;"><div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:80%;color:#c6779e;font-size:20px;">Je suis</div><p style="text-align:justify;height:100px;overflow:auto;padding:5px 5px 0px 0px;font-size:12px;">Ce que vous souhaitez dire sur votre personnage</p><br/><div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:80%;color:#c6779e;font-size:20px;">Je recherche</div><p style="text-align:justify;height:100px;overflow:auto;padding:5px 5px 0px 0px;font-size:12px;">Les types de liens que vous recherchez</p></td></tr></table><br/>
<div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:90%;color:#c6779e;font-size:20px;">Aventures en cours</div><p style="width:90%;text-align:justify;height:200px;overflow:auto;padding:5px 5px 0px 0px;font-size:12px;">Les RPGs que vous avez en cours.</p><br/><br/><div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:90%;color:#c6779e;font-size:20px;">Aventures terminées</div><p style="width:90%;text-align:justify;height:200px;overflow:auto;padding:5px 5px 0px 0px;font-size:12px;">Les RPGs que vous avez terminés</p><br/>
<div style="font-size:10px;">Codage réalisé par Loukoum</div></div></center>

Le code des messages de liens:

Code:: <style type="text/css">.tictacl{width:100px;height:160px;overflow:hidden;}.tictacl_img{position:relative;z-index:2;width:100px;height:160px;margin-top:0px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:2s;-moz-transition:2s;-o-transition:2s;-htm-transition:2s;-webkit-transition:2s;}.tictacl:hover .tictacl_img{margin-left:-110px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:2s;-moz-transition:2s;-o-transition:2s;-htm-transition:2s;-webkit-transition:2s;}.tictacl_description{position:relative;z-index:1;width:90px;height:150px;margin-top:-160px;overflow-y:auto;overflow-x:hidden;text-align:justify;padding:10px;}</style>

<center><div style="width:90%;"><img src="URLIMAGE" style="width:100%;" /><div style="font-family:'Great Vibes';font-size:40px;width:80%;color:#c6779e;text-shadow:2px 0px 0px #ACB5A1;margin-top:-50px;">Titre</div><br/><br/><br/><table align=center><tr><td style="padding:10px;width:20%;"><div class="tictacl"><div class="tictacl_img"><img src="URLIMAGE" width="100px;" height="160px;" /></div><div class="tictacl_description"><p><div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:100%;color:#c6779e;font-size:20px;">Pseudo</div><br/>Texte derrière l'avatar</p></div></div></td><td style="padding:10px;width:80%"><div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:100%;color:#c6779e;font-size:20px;">Lien</div><p style="text-align:justify;height:120px;overflow:auto;padding:5px 5px 0px 0px;width:100%;font-size:12px;">Description de votre lien</p></td></tr><tr><td style="padding:10px;width:20%;"><div class="tictacl"><div class="tictacl_img"><img src="URLIMAGE" width="100px;" height="160px;" /></div><div class="tictacl_description"><p><div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:100%;color:#c6779e;font-size:20px;">Pseudo</div><br/>Texte derrière l'avatar</p></div></div></td><td style="padding:10px;width:80%"><div style="font-family:'Great Vibes';border-bottom:1px solid #ACB5A1;width:100%;color:#c6779e;font-size:20px;">Lien</div><p style="text-align:justify;height:120px;overflow:auto;padding:5px 5px 0px 0px;width:100%;font-size:12px;">Description de votre lien</p></td></tr></table><br/>
<div style="font-size:10px;">Codage réalisé par Loukoum</div></div></center>

Merci à Loukoum

Fiche 2

Cette fiche est basée sur le modèle de nos fiches administratives et est donc totalement assortie au forum. Vous pouvez la modifier à souhait, pensez juste à laisser le copyright et à ne pas l'utiliser sur un autre forum, le CSS n'étant pas présent dans ces codes Wink

Code du premier message :

Code:: <div class="rm_fiche_fond"><div class="rm_fiche_cover"> <img src="http://images1.wikia.nocookie.net/__cb20120202185217/harrypotter/images/9/91/Exploding_spell.gif" alt=""></div><div class="rm_fiche_titre"><p>Titre</p> <span>« Citation »</span></div><div class="rm_fiche_section"><div class="columns"> <img src="https://www.zupimages.net/up/19/03/zvu5.png" alt=""><div><p class="rm_fiche_soustitre">À propos de moi</p><ul class="liste"><li> <b>Nom et prénom : </b>x</li><li> <b>Âge : </b>x</li><li> <b>Nationalité : </b>x</li><li> <b>Statut du sang : </b>x</li><li> <b>Métier exercé : </b>x</li></ul><ul class="liste"><li> <b>Caractère : </b>qualité - défaut - qualité - défaut - qualité - défaut - qualité - défaut</li></ul></div></div></div><span class="spacer"></span><div class="rm_fiche_section"><div class="rm_fiche_soustitre">Je recherche...</div><ul class="liste"><li> <b>Titre du lien : </b> description</li></ul><ul class="liste"><li> <b>Titre du lien : </b> description</li></ul><ul class="liste"><li> <b>Titre du lien : </b> description</li></ul><ul class="liste"><li> <b>Titre du lien : </b> description</li></ul></div><span class="spacer"></span><div class="rm_fiche_section-dark"><div class="rm_fiche_soustitre">En savoir plus</div><p> <b> <a href="">Fiche de présentation</a> - <a href="">Boîte de stockage</a> - <a href="">Pensine</a> - <a href="">Volière</a> </b></p></div></div>

Le code des messages de liens:

Code:: <div class="rm_fiche_fond"><div class="rm_fiche_titre"><p>Titre</p> <span>« Citation »</span></div><div class="rm_fiche_section"><div class="columns"><div class="rm_fiche_avatar"> <img src="https://www.zupimages.net/up/19/03/zvu5.png" alt=""></div><div class="rm_fiche_link"><p class="rm_fiche_soustitre">Nom Prénom</p><p> <b>Titre du Lien - </b> blablabla</p></div></div></div> <span class="spacer"></span><div class="rm_fiche_section"><div class="columns"><div class="rm_fiche_avatar"> <img src="https://www.zupimages.net/up/19/03/zvu5.png" alt=""></div><div class="rm_fiche_link"><p class="rm_fiche_soustitre">Nom Prénom</p><p> <b>Titre du Lien - </b> blablabla</p></div></div></div> <span class="spacer"></span><div class="rm_fiche_section"><div class="columns"><div class="rm_fiche_avatar"> <img src="https://www.zupimages.net/up/19/03/zvu5.png" alt=""></div><div class="rm_fiche_link"><p class="rm_fiche_soustitre">Nom Prénom</p><p> <b>Titre du Lien - </b> blablabla</p></div></div></div> <span class="spacer"></span></div>

Le code du listing RPG:

Code:: <div class="rm_fiche_fond"><div class="rm_fiche_cover"> <img src="http://images1.wikia.nocookie.net/__cb20120202185217/harrypotter/images/9/91/Exploding_spell.gif" alt=""></div><div class="rm_fiche_titre"><p>Titre</p> <span>« Citation »</span></div><div class="rm_fiche_section"><div class="rm_fiche_soustitre">En cours...</div><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul></div><span class="spacer"></span><div class="rm_fiche_section"><div class="rm_fiche_soustitre">Terminés</div><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul><ul class="liste"><li> <b> <a href="">Titre du RP</a> </b> <i> ft Nom Prénom : </i>description</li></ul></div><span class="spacer"></span><div class="rm_fiche_section"><div class="rm_fiche_soustitre">Prévus</div><ul class="liste"><li> <b>Nom Prénom : </b> description</li></ul><ul class="liste"><li> <b>Nom Prénom : </b> description</li></ul><ul class="liste"><li> <b>Nom Prénom : </b> description</li></ul><ul class="liste"><li> <b>Nom Prénom : </b> description</li></ul></div><span class="spacer"></span><div class="rm_fiche_section-dark"><div class="rm_fiche_soustitre">En savoir plus</div><p> <b> <a href="">Fiche de présentation</a> - <a href="">Fiche de liens</a> - <a href="">Pensine</a> - <a href="">Volière</a> </b></p></div></div>

Merci à Bounty

Fiche 3

Cette fiche a été codée pour s'assortir automatique avec les couleurs du forum. N'essayez pas de l'utiliser ailleurs, elle ne fonctionnera pas.

1er message :

Code:: <center><div class="LTfond"><table><tr><td width=40%><img src="https://www.zupimages.net/up/19/03/zvu5.png" class="LTavatar" /></td><td width=60%><div class="LTpseudo">Prénom Nom</div><div class="LTcitation">Citation</div><p class="LTinfos"><span class="infos">A savoir</span> Choses importantes
<span class="infos">A savoir</span> Choses importantes
<span class="infos">A savoir</span> Choses importantes
<span class="infos">A savoir</span> Choses importantes
<span class="infos">A savoir</span> Choses importantes

<span class="infos">Type de lien recherché</span> Description
<span class="infos">Type de lien recherché</span> Description
<span class="infos">Type de lien recherché</span> Description
<span class="infos">Type de lien recherché</span> Description
<span class="infos">Type de lien recherché</span> Description</p></td></tr></table><br/><div class="LTrptitre">RPGs en cours</div>
<div class="LTrpcontenu"><span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre</div><br/>
<div class="LTrptitre">RPGs terminés</div>
<div class="LTrpcontenu"><span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre
<span class="infos">Date</span> Titre</div></div></center>

2ème message :

Code:: <center><div class="LTfond"><table><tr><td width=40%><img src="https://www.zupimages.net/up/19/03/zvu5.png" class="LTavatar" /></td><td width=60%><div class="LTpseudo">Prénom Nom</div><div class="LTcitation">Lien</div><p class="LTinfos">Description de votre lien</p></td></tr><tr><td width=40%><img src="https://www.zupimages.net/up/19/03/zvu5.png" class="LTavatar" /></td><td width=60%><div class="LTpseudo">Prénom Nom</div><div class="LTcitation">Lien</div><p class="LTinfos">Description de votre lien</p></td></tr></table></div></center>

Et dès que vous souhaitez rajouter des personnes, voici le code de ligne du tableau à rajouter entre le dernier /tr et le /table

Code:: <tr><td width=40%><img src="https://www.zupimages.net/up/19/03/zvu5.png" class="LTavatar" /></td><td width=60%><div class="LTpseudo">Prénom Nom</div><div class="LTcitation">Lien</div><p class="LTinfos">Description de votre lien</p></td></tr>

Merci à Loukoum

Fiche 4

Cette fiche a été codée pour s'assortir automatique avec les couleurs du forum. N'essayez pas de l'utiliser ailleurs, elle ne fonctionnera pas.

1er message :

Code:: <center><div class="LEtitre">Pseudo</div><br/><table align="center"><tr><td width=200px><div class="LEimage"><img src="http://s4.e-monsite.com/2011/08/01/10/200x320-Nina-Dobrev-2.jpg" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX
<span class="infos">A savoir</span> XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX
<span class="infos">Je recherche</span> XXX</p></td><td width=200px><div class="LEimage"><img src="http://68.media.tumblr.com/2d1b586240bc44d48130249d679386a4/tumblr_oa7shiBet31rzzugno1_250.png" class="LEimage2" /></div></td></tr><tr><td width=200px><div class="LEimage"><img src="https://www.resizup.com/images/2017/06/19/fvdc.png" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">Mes RPGs en cours</span>

XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos"><span class="infos">Mes RPGs terminés</span>

XXX</p></td><td width=200px><div class="LEimage"><img src="http://images2.fanpop.com/image/photos/11700000/Nina-Dobrev-nina-dobrev-11786834-200-320.jpg" class="LEimage2" /></div></td></tr></table></center>

2ème message :

Code:: <center><div class="LEtitre">Titre</div><br/><table align="center"><tr><td width=200px><div class="LEimage"><img src="http://image.noelshack.com/fichiers/2014/17/1398450171-nd7.png" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>

XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>

XXX</p></td><td width=200px><div class="LEimage"><img src="http://image.noelshack.com/fichiers/2012/51/1356115202-noel-nina-dobrev2.png" class="LEimage2" /></div></td></tr></table></center>

Et dès que vous souhaitez rajouter des personnes, voici le code de ligne du tableau à rajouter juste avant le /table ; ceci rajoute deux lignes : une avec l'image à gauche et une avec l'image à droite.

Code:: <tr><td width=200px><div class="LEimage"><img src="http://image.noelshack.com/fichiers/2014/17/1398450171-nd7.png" class="LEimage2" /></div></td><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>

XXX</p></td></tr><tr><td class="LEcontenu"><p class="LEtexte"><span class="infos">Notre lien</span>

XXX</p></td><td width=200px><div class="LEimage"><img src="http://image.noelshack.com/fichiers/2012/51/1356115202-noel-nina-dobrev2.png" class="LEimage2" /></div></td></tr>

Merci à Loukoum

Fiche 5

Cette fiche a été codée pour s'assortir automatique avec les couleurs du forum. N'essayez pas de l'utiliser ailleurs, elle ne fonctionnera pas.

1er message :

Code:: <center><link href="https://fonts.googleapis.com/css?family=Crete+Round|Yrsa" rel="stylesheet" /><div class="LBfond"><img src="https://media3.giphy.com/media/LTOnabhOZxpXa/source.gif" style="width:100%;" /><div class="LBtitre">Pseudo</div><br/>
<table width=90%><tr><td width=50%><div class="LBtitre2">Ce qu'il faut savoir de moi</div><p class="LBcontenu">Contenu</p></td><td width=50%><div class="LBtitre2">Ce que je recherche</div><p class="LBcontenu">Contenu</p></td></tr></table></center>

2ème message :

Code:: <center><div class="LBfond"><div class="LBtitre3">Titre</div><table><tr><td width=80px align=center><img src="https://2img.net/u/3214/32/18/76/avatars/21-33.jpg" style="height:100px;" /></td><td><p class="LBcontenu2"><span class="LBtitre2">Pseudo - Lien</span><br/>
Contenu</p></td></tr></table></div></center>

Et dès que vous souhaitez rajouter des personnes, voici le code de ligne du tableau à rajouter juste avant le /table.

Code:: <tr><td width=80px align=center><img src="https://2img.net/u/3214/32/18/76/avatars/21-33.jpg" style="height:100px;" /></td><td><p class="LBcontenu2"><span class="LBtitre2">Pseudo - Lien</span><br/>
Contenu</p></td></tr>

Merci à Loukoum

Fiche 6

Cette fiche a été codée pour s'assortir automatique avec les couleurs du forum. N'essayez pas de l'utiliser ailleurs, elle ne fonctionnera pas.

1er message :

Code:: <center><div class="SimsFAfond"><table align=center><tr><td width="200px"><div class="SimsFA"><div class="SimsFA_img"><img src="https://nsa40.casimages.com/img/2019/08/06/190806094148628251.png" width="200px;" height="320px;" /></div><div class="SimsFA_description"><div class="SimsFAbande">Qualités</div>
Ecrire ici les qualités de ton personnage.
Tu peux simplement les lister ou alors les décrire. Dans ce cas, si tu veux un code joli pour faire ressortir le caractère dans le texte, tu peux utiliser <span class="SimsFAgras">cet aspect</span> grâce au petit code ^^

<div class="SimsFAbande">Défauts</div>
Ecrire ici les défauts de ton personnage.
Et du coup, comme tu peux le remarquer, ce cadre est équipé d'un <span class="SimsFAgras">overflow</span> ce qui te permet de mettre autant de texte que tu le désires derrière cet avatar !</div></td><td width="300px"><div class="SimsFAinfos"><div class="SimsFAbande">Pseudo</div><span class="SimsFAgras">Âge</span> - <span class="SimsFAgras">Métier</span> - <span class="SimsFAgras">Situation</span><br/>
<div class="SimsFAanecdotes">Ici, vous allez pouvoir écrire ce que vous voulez : des trucs particuliers sur votre personnage, des choses importantes.

Vous pouvez le présenter sous forme d'anecdotes :
<span class="SimsFAgras">Anecdote 1</span> ici
Ou alors sous forme de dates :
<span class="SimsFAgras">Date</span> événement
Ou bien sous tout autre forme donc vous avez envie XD

A noter : ce cadre est équipe d'un <span class="SimsFAgras">overflow</span> lui aussi, ce qui vous permet de mettre autant de contenu que vous le désirez.
Ecrivez, laissez vos doigts parler pour vous ;)</div>
<div class="SimsFAbande"><a href="" target="_blank" style="color:#fefefe;">Fiche de présentation</a></div></div></td></tr></table><br/><br/>
<div class="SimsFAbande2">Liens que je recherche</div>(♀♂) <span class="SimsFAgras">Intitulé du lien</span> - Description du lien
(♀♂) <span class="SimsFAgras">Intitulé du lien</span> - Description du lien
(♀♂) <span class="SimsFAgras">Intitulé du lien</span> - Description du lien
<br/></div></center>

2ème message :

Code:: <center><div class="SimsFAfond"><div class="SimsFAbande2">Les filles / Les garçons / Autre titre</div>
<table align=center><tr><td><div style="background-image: url(https://nsa40.casimages.com/img/2019/08/18/190818064623266454.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid #552D45;"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien : comment il a évolué, ... .

A noter : ce cadre est équipé d'un <span class="SimsFAgras">overflow</span>, donc comme précédemment, vous pouvez écrire autant que vous voulez !</div><div class="SimsFAbande3">Pseudo</div></td><td><div style="background-image: url(https://nsa40.casimages.com/img/2019/08/22/190822075131301347.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid #552D45;"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande3">Pseudo</div></td></tr><tr><td><div style="background-image: url(https://66.media.tumblr.com/c740cb8f86e8e369dc612a21a54b4002/tumblr_po93g9BEOd1s2nxzho7_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid #552D45;"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande3">Pseudo</div></td><td><div style="background-image: url(https://66.media.tumblr.com/5e064943194ec51d5cd5e9680d912599/tumblr_po5wtm8ixp1s2nxzho6_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid #552D45;"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande3">Pseudo</div></td></tr></table></div></center>

Et dès que vous souhaitez rajouter des personnes, voici le code de ligne du tableau à rajouter juste avant le /table.

Code:: <tr><td><div style="background-image: url(https://66.media.tumblr.com/c740cb8f86e8e369dc612a21a54b4002/tumblr_po93g9BEOd1s2nxzho7_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid #552D45 ;"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande3">Pseudo</div></td><td><div style="background-image: url(https://66.media.tumblr.com/5e064943194ec51d5cd5e9680d912599/tumblr_po5wtm8ixp1s2nxzho6_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid #552D45;"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande3">Pseudo</div></td></tr>

Merci à Loukoum

Fiche 6.1

Cette fiche a été codée pour s'assortir automatique avec les couleurs du forum. N'essayez pas de l'utiliser ailleurs, elle ne fonctionnera pas.
/ ! \ Cependant le cadre autour des images (2ème message) sera a changer manuellement.

Ce qui diffère de la version 6 : le titre est écrit plus grand, l'affichage des prénoms est en bas & deux couleurs de cadre sont proposés pour faire une alternance dans les couleurs.

Code cadre 321 : var(--bordure)
Code cadre 322 : var(--bordurei)

1er message :

Code:: <center><div class="SimsFAfond"><table align=center><tr><td width="200px"><div class="SimsFA"><div class="SimsFA_img"><img src="https://nsa40.casimages.com/img/2019/08/06/190806094148628251.png" width="200px;" height="320px;" /></div><div class="SimsFA_description"><div class="SimsFAbande">Qualités</div>
Ecrire ici les qualités de ton personnage.
Tu peux simplement les lister ou alors les décrire. Dans ce cas, si tu veux un code joli pour faire ressortir le caractère dans le texte, tu peux utiliser <span class="SimsFAgras">cet aspect</span> grâce au petit code ^^

<div class="SimsFAbande">Défauts</div>
Ecrire ici les défauts de ton personnage.
Et du coup, comme tu peux le remarquer, ce cadre est équipé d'un <span class="SimsFAgras">overflow</span> ce qui te permet de mettre autant de texte que tu le désires derrière cet avatar !</div></td><td width="300px"><div class="SimsFAinfos"><div class="SimsFAbande">Pseudo</div><span class="SimsFAgras">Âge</span> - <span class="SimsFAgras">Métier</span> - <span class="SimsFAgras">Situation</span><br/>
<div class="SimsFAanecdotes">Ici, vous allez pouvoir écrire ce que vous voulez : des trucs particuliers sur votre personnage, des choses importantes.

Vous pouvez le présenter sous forme d'anecdotes :
<span class="SimsFAgras">Anecdote 1</span> ici
Ou alors sous forme de dates :
<span class="SimsFAgras">Date</span> événement
Ou bien sous tout autre forme donc vous avez envie XD

A noter : ce cadre est équipe d'un <span class="SimsFAgras">overflow</span> lui aussi, ce qui vous permet de mettre autant de contenu que vous le désirez.
Ecrivez, laissez vos doigts parler pour vous ;)</div>
<div class="SimsFAbande"><a href="" target="_blank" style="color:#fefefe;">Fiche de présentation</a></div></div></td></tr></table><br/><br/>
<div class="SimsFAbande2">Liens que je recherche</div>(♀♂) <span class="SimsFAgras">Intitulé du lien</span> - Description du lien
(♀♂) <span class="SimsFAgras">Intitulé du lien</span> - Description du lien
(♀♂) <span class="SimsFAgras">Intitulé du lien</span> - Description du lien
<br/></div></center>

2ème message :

Code:: <center><div class="SimsFAfond"><div class="SimsFAbande22">Les filles / Les garçons / Autre titre</div>
<table align=center><tr><td><div style="background-image: url(https://nsa40.casimages.com/img/2019/08/18/190818064623266454.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordure);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien : comment il a évolué, ... .

A noter : ce cadre est équipé d'un <span class="SimsFAgras">overflow</span>, donc comme précédemment, vous pouvez écrire autant que vous voulez !</div><div class="SimsFAbande321">Pseudo</div></td><td><div style="background-image: url(https://nsa40.casimages.com/img/2019/08/22/190822075131301347.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordurei);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande322">Pseudo</div></td></tr><tr><td><div style="background-image: url(https://66.media.tumblr.com/c740cb8f86e8e369dc612a21a54b4002/tumblr_po93g9BEOd1s2nxzho7_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordurei);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande322">Pseudo</div></td><td><div style="background-image: url(https://66.media.tumblr.com/5e064943194ec51d5cd5e9680d912599/tumblr_po5wtm8ixp1s2nxzho6_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordure);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande321">Pseudo</div></td></tr></table></div></center>

Et dès que vous souhaitez rajouter des personnes, voici le code de ligne du tableau à rajouter juste avant le /table.
Code var(--bordure) à gauche

Code:: <tr><td><div style="background-image: url(https://66.media.tumblr.com/c740cb8f86e8e369dc612a21a54b4002/tumblr_po93g9BEOd1s2nxzho7_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordure);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande321">Pseudo</div></td><td><div style="background-image: url(https://66.media.tumblr.com/5e064943194ec51d5cd5e9680d912599/tumblr_po5wtm8ixp1s2nxzho6_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordurei);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande322">Pseudo</div></td></tr>

Code var(--bordurei) à droite

Code:: <tr><td><div style="background-image: url(https://66.media.tumblr.com/c740cb8f86e8e369dc612a21a54b4002/tumblr_po93g9BEOd1s2nxzho7_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordurei);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande322">Pseudo</div></td><td><div style="background-image: url(https://66.media.tumblr.com/5e064943194ec51d5cd5e9680d912599/tumblr_po5wtm8ixp1s2nxzho6_250.png);background-size: cover;width:200px;height:320px;position:relative;border:6px solid var(--bordure);"><div class="SimsFAlien"><span class="SimsFAgras">Intitulé du lien</span> Et ici vous décrivez votre lien.</div><div class="SimsFAbande321">Pseudo</div></td></tr>

Merci à Loukoum pour le code & Pitch pour les corrections

_________________

Informations

Rechercher

Résultats par : Messages Sujets
Recherche avancée