-39%
Le deal à ne pas rater :
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
399 € 649 €
Voir le deal

Tourmaline :: Codage :: Codages simples :: Fiches :: Fiches de Liens

Liens#5

Loukoum
Opale quincite
Messages : 181
Date d'inscription : 02/06/2020
Age : 30

Liens#5 Empty
Loukoum
MessageSujet: Liens#5 Liens#5 EmptyMer 17 Fév - 21:58
Fiche de Liens


Il s'agit d'une fiche de liens en onglets. Ils sont au nombre de 4 :
¤ Vos liens recherchés.
¤ Vos liens féminins.
¤ Vos liens masculins.
¤ Votre chronologie RP / Votre listing RP.
Vous pouvez éventuellement passer à 2 ou 3 onglets, mais vous ne pourrez pas en rajouter. Et les intitulés peuvent être modifiés sans soucis ^^

Cette fiche est proposé sous deux types de codes.
Le CSS interne, intégré à la fiche, vous permettant de l'utiliser en tant que membre.
Le CSS externe, exclut de la fiche, qui vous permet en tant qu'admin de proposer uniquement le code HTML à vos membres et ainsi modifier le CSS au niveau des couleurs pour que les fiches suivent avec votre thème.

◈ Visuel du message ◈


A savoir sur la fiche

◈ Le crédit ne doit évidemment pas être enlevé.
◈ La largeur est de 480px.
◈ Vous pouvez modifier : les couleurs, les images et le style d'écriture.
◈ Si vous avez un problème, n'hésitez pas à poster ici !

Le code - CSS Interne

Code:
<link href="https://fonts.googleapis.com/css2?family=Staatliches&family=Teko:wght@300&display=swap" rel="stylesheet" /><style type="text/css">i{color:#08090d;}.fondtitre {width:250px;height:100px;padding:10px;text-align:center;}.fondtitre2 {width:150px;height:100px;padding:10px;text-align:center;}.titre {font-family:'Staatliches';font-size:20px;color:#08090d;line-height:15px;}.soustitre {font-size:12px;font-family:'Teko';color:#b4734c;line-height:10px;}.soustitre2 {font-size:15px;font-family:'Staatliches';color:#b4734c;text-align:center;font-weight:bold;border-bottom:2px solid #b4734c;}.trait {width:480px;height:10px;background-image: linear-gradient(to right, #b4734c, #904f51, #5e384a, #2d2332, #08090d);margin-top:-5px;}.fondtexte, .fondtexte2 {padding:10px;background-color:#9a9890;text-align:justify;font-size:12px;font-family:'Volkhov';}.fondtexte {width:460px;margin-top:-10px;}.blocpres {width:500px;margin-top:-25px;}.fondtexte2 {width:355px;height:140px;overflow-x:hidden;overflow-y:auto;}.fondtexte b, .fondtexte2 b {background-image: linear-gradient(to right, #b4734c, #904f51, #5e384a, #2d2332, #08090d);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-weight:bold;text-transform:uppercase;font-family:'Teko';font-size:14px;}.grandelettre {color:#08090d;font-size:15px;font-weight:bold;font-family:'Staatliches';}.presavatar {width:100px;}.fiche {position: relative;width: 480px;margin: auto;overflow: hidden;}.fiche > input {display: none;}.fiche .boutons {text-align: center;}.fiche .boutons label {background-color:#9a9890;border:1px solid #08090d;font-weight:bold;text-transform:uppercase;font-family:'Teko';text-align:center;cursor: pointer;transition: all ease 0.5s;width:115px;padding:5px;margin:5px;font-size:15px;}.fiche .boutons label:hover {color:#B4734C;transition: all ease 0.5s;}.fiche .interne {position: relative;width: 100%;height: 300px;margin: auto;background-color:#9a9890;text-align:justify;font-size:12px;font-family:'Volkhov';}.fiche .interne .contenu {position: absolute;top: 10px;left: 10px;width: 90%;height: 260px;padding: 10px;margin: auto;overflow: auto;text-align: justify;opacity: 0;visibility: hidden;transition: all ease 0.5s;}
.fiche #caractere:checked ~ .boutons .lab.caractere, .fiche #anecdote:checked ~ .boutons .lab.anecdote, .fiche #magie:checked ~ .boutons .lab.magie, .fiche #recherche:checked ~ .boutons .lab.recherche,
.fiche #filles:checked ~ .boutons .lab.filles, .fiche #garcons:checked ~ .boutons .lab.garcons, .fiche #rpgs:checked ~ .boutons .lab.rpgs {font-size:15px;color:#B4734C;}.fiche #caractere:checked ~ .interne .contenu.caractere, .fiche #anecdote:checked ~ .interne .contenu.anecdote, .fiche #magie:checked ~ .interne .contenu.magie, .fiche #recherche:checked ~ .interne .contenu.recherche, .fiche #filles:checked ~ .interne .contenu.filles, .fiche #garcons:checked ~ .interne .contenu.garcons, .fiche #rpgs:checked ~ .interne .contenu.rpgs {opacity: 1;visibility: visible;transition: all ease 0.5s;}.fainfos {font-weight:bold;text-transform:uppercase;font-size:12px;background: -webkit-gradient(linear, left top, right bottom, from(#08090d), to(#B4734C));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.fainfos:hover {background: -webkit-gradient(linear, left top, right bottom, from(#B4734C), to(#08090d));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}</style><center><div style="width:480px;height:200px;background-image:url(http://24.media.tumblr.com/7e6a9c2d78220fa47f51a83f2fe15d09/tumblr_mmzd7rVmRw1qkv7r8o1_500.gif);background-size:cover;background-position:top;"></div>
<div class="trait"></div>
<div class="blocpres">
<table><tr><td><img src="https://2img.net/image.noelshack.com/fichiers/2017/48/4/1512039582-ezra15.png" class="presavatar" /></td><td><div class="fondtexte2"><center><span class="grandelettre">Isidore Gaztea</span></center>
<b>Date de naissance</b> 16 Octobre 1991.
<b>Lieu de naissance</b> Oviedo.
<b>Date de la mort</b> 8 Mars 2020.
<b>Âge de la mort</b> 28 ans.
<br/><b>Type de démon</b> Poupée Vaudou.
<b>Description de sa forme démoniaque</b> Un corps mou, rempli de coton, recouvert de différents tissus à la Frankenstein. Des épingles enfoncées dans plusieurs parties de son corps : l'arcade sourcilière droite, le lobe de l'oreille gauche, une dans le cou, une autre dans le flan droit, une dans le nombril, une autre dans la cuisse gauche, une qui relie les genoux ensemble et une dans le pied droit. Ce qui n'est pas pratique pour se mouvoir, vous en conviendrez.
<br/><b>Caractère</b> Calme - Observateur - Intelligent - Séducteur - Fidèle - Naïf
</div></td></tr></table>
</div>
<div class="fiche"><br/><div class="boutons"><label for="recherche" class="lab recherche">Mes recherches</label> <label for="filles" class="lab filles">Mesdames</label> <label for="garcons" class="lab garcons">Messieurs</label> <label for="rpgs" class="lab rpgs">Chronologie RP</label> </div>
<input checked="" name="fiche" id="recherche" type="radio" /> <input name="fiche" id="filles" type="radio" /> <input name="fiche" id="garcons" type="radio" /> <input name="fiche" id="rpgs" type="radio" /><div class="interne"><div class="contenu recherche">(♀ ou ♂) <span class="fainfos">I don't wanna be alone tonight</span> Tu avais besoin de compagnie et Isis a su te l'offrir. Une nuit ou plus, à toi de choisir.
<i>Ouvert à tous.</i>

(♀ ou ♂) <span class="fainfos">We said "forever"</span> Isis n'est pas forcément un grand bavard. Mais à force de parler avec de la drogue parcourant vos veines, vous avez fini par vous rendre compte que vous aviez beaucoup de points communs (passé identique, ...) et... vous avez fini par vous lier d'amitié.
Tu peux compter sur Isis et tu sais qu'il peut compter sur toi. Jamais vous ne pourrez vous trahir l'un / l'autre. Vous vous confiez vos secrets et tu es l'un des seuls à connaître ses projets futurs en enfer.
+ Possibilité que tu ais des sentiments pour Isis mais... ça sera à sens unique (sorry =°)
<i>Quelqu'un du district de la Gourmandise OU Quelqu'un du même âge que Isis.</i>

(♀ ou ♂) <span class="fainfos">I feel the start of a rush taking over me</span> Tu as pu remarquer que Isis était une bonne oreille. Une écoute attentive. Qu'il sait garder les secrets. Et tu lui fais confiance. Il est un peu ton psy et tu te confies à lui tout naturellement, que ce soit autour d'un verre ou sur l'oreiller.
<i>Ouvert à tous.</i>

(♀ ou ♂) <span class="fainfos">I know I was born to be yours</span> L'amour. Isis ne l'a jamais connu avant. S'il sortait avec ce dealer, s'il s'était installé avec lui, c'était principalement par intérêt. Et ensemble ils étaient parfait.
Aujourd'hui, en enfer, Isis ne croit toujours pas plus à l'amour. Mais tu pourrais peut-être finir par lui arracher le coeur ? Qui sait... peut-être qu'un jour il pourrait t'appartenir. Mais le chemin ne sera pas loin et facile.
<i>Ouvert à tous.</i>

(♀ ou ♂) <span class="fainfos">Encore plus ?</span> Vous avez des idées ? Et bien... la parole est à vous. Amusez-vous bien =°
<i>Ouvert à tous.</i>
</div>
<div class="contenu filles">
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
</div>
<div class="contenu garcons">
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
</div>
<div class="contenu rpgs">
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
</div></div>
</div><a href="https://tourmaline.forumactif.com/" target="_blank">Loukoum</a></center>

Le code - CSS Externe

Le code CSS
Code:
/*Fiche de présentation*/
.fondtitre {
  width:250px;
  height:100px;
  padding:10px;
  text-align:center;
}

.fondtitre2 {
  width:150px;
  height:100px;
  padding:10px;
  text-align:center;
}

.titre {
  font-family:'Staatliches';
  font-size:20px;
  color:#7C597C;
  line-height:15px;
}

.soustitre {
  font-size:12px;
  font-family:'Teko';
  color:#437CA8;
  line-height:10px;
}

.soustitre2 {
  font-size:15px;
  font-family:'Staatliches';
  color:#437CA8;
  text-align:center;
  font-weight:bold;
  border-bottom:2px solid #437CA8;
}

.trait {
  width:480px;
  height:10px;
  background-image: linear-gradient(to right, #7c597c, #766d98, #6882af, #5796bd, #4eaac2);
  margin-top:-5px;
}

.fondtexte, .fondtexte2 {
  padding:10px;
  background-color:#ddd3db;
  text-align:justify;
  font-size:12px;
  font-family:'Volkhov';
}

.fondtexte {
  width:460px;
  margin-top:-10px;
}

.blocpres {
  width:500px;
  margin-top:-25px;
}

.fondtexte2 {
  width:355px;
  height:140px;
  overflow-x:hidden;
  overflow-y:auto;
}

.fondtexte b, .fondtexte2 b {
  background-image: linear-gradient(to right, #7c597c, #766d98, #6882af, #5796bd, #4eaac2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight:bold;
  text-transform:uppercase;
  font-family:'Teko';
  font-size:14px;
}

.grandelettre {
  color:#7C597C;
  font-size:15px;
  font-weight:bold;
  font-family:'Staatliches';
}

.presavatar {
  width:100px;
}

/* On met en place la fiche et son image de fond */
.fiche {
  position: relative;
  width: 480px;
  margin: auto;
  overflow: hidden;
}

/* On cache les input */
.fiche > input { display: none; }

/* On met les labels au centre */
.fiche .boutons { text-align: center; }

/* Mise en forme des labels/titre des onglets normal */
.fiche .boutons label {
  background-color:#ddd3db;
  border:1px solid #7C597C;
  font-weight:bold;
  text-transform:uppercase;
  font-family:'Teko';
  text-align:center;
  cursor: pointer;
  transition: all ease 0.5s;
  width:115px;
  padding:5px;
  margin:5px;
  font-size:15px;
}

/* Effet au survol des labels */
.fiche .boutons label:hover {
  color:#4EAAC2;
  transition: all ease 0.5s;
}

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.fiche .interne {
  position: relative;
  width: 100%;
  height: 300px;
  margin: auto;
  background-color:#ddd3db;
  text-align:justify;
  font-size:12px;
  font-family:'Volkhov';
}

/* On met en place et en forme le contenu de chaque onglet */
.fiche .interne .contenu {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90%;
  height: 260px;
  padding: 10px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}

/* Fait le changement de style sur les labels sélectionnés */
.fiche #caractere:checked ~ .boutons .lab.caractere,
.fiche #anecdote:checked ~ .boutons .lab.anecdote,
.fiche #magie:checked ~ .boutons .lab.magie,
.fiche #recherche:checked ~ .boutons .lab.recherche,
.fiche #filles:checked ~ .boutons .lab.filles,
.fiche #garcons:checked ~ .boutons .lab.garcons,
.fiche #rpgs:checked ~ .boutons .lab.rpgs {
  font-size:15px;
  color:#4EAAC2;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #caractere:checked ~ .interne .contenu.caractere,
.fiche #anecdote:checked ~ .interne .contenu.anecdote,
.fiche #magie:checked ~ .interne .contenu.magie,
.fiche #recherche:checked ~ .interne .contenu.recherche,
.fiche #filles:checked ~ .interne .contenu.filles,
.fiche #garcons:checked ~ .interne .contenu.garcons,
.fiche #rpgs:checked ~ .interne .contenu.rpgs {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

.fainfos {
  font-weight:bold;
  text-transform:uppercase;
  font-size:12px;
  background: -webkit-gradient(linear, left top, right bottom, from(#7C597C), to(#4EAAC2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fainfos:hover {
  background: -webkit-gradient(linear, left top, right bottom, from(#4EAAC2), to(#7C597C));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Le code HTML
Code:
<center><div style="width:480px;height:200px;background-image:url(IMAGE);background-size:cover;background-position:top;"></div>
<div class="trait"></div>
<div class="blocpres">
<table><tr><td><img src="IMAGETAILLEAVATAR" class="presavatar" /></td><td><div class="fondtexte2"><center><span class="grandelettre"><a href="LIENPRESENTATION" target="_blank">Fiche de présentation</a></span></center>
<b>Général</b> Date de naissance, âge, arrivée au camp, ... .
<br><b>Côté coeur</b> Statut marital, orientation sexuelle, ... .
<br/><b>Caractère</b> traits de caractère, description complète, ... .
<br/><b>Sims / Métier</b> ici.
</div></td></tr></table>
</div>
<div class="fiche"><br/><div class="boutons"><label for="recherche" class="lab recherche">Mes recherches</label> <label for="filles" class="lab filles">Mesdames</label> <label for="garcons" class="lab garcons">Messieurs</label> <label for="rpgs" class="lab rpgs">Chronologie RP</label> </div>
<input checked="" name="fiche" id="recherche" type="radio" /> <input name="fiche" id="filles" type="radio" /> <input name="fiche" id="garcons" type="radio" /> <input name="fiche" id="rpgs" type="radio" /><div class="interne"><div class="contenu recherche">(♀ ou ♂) <span class="fainfos">Type de lien</span> Description
<i>Précisions suplémentaires</i>

(♀ ou ♂) <span class="fainfos">Type de lien</span> Description
<i>Précisions suplémentaires</i>

(♀ ou ♂) <span class="fainfos">Type de lien</span> Description
<i>Précisions suplémentaires</i>

(♀ ou ♂) <span class="fainfos">Type de lien</span> Description
<i>Précisions suplémentaires</i>

(♀ ou ♂) <span class="fainfos">Type de lien</span> Description
<i>Précisions suplémentaires</i>
</div>
<div class="contenu filles">
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
</div>
<div class="contenu garcons">
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
<img src="XXX" style="width:100px;height:160px;float:left;padding-right:10px;" /><div style="height:160px;overflow:auto;padding-right:10px;"><span class="grandelettre">Pseudo</span> <span class="fainfos">Type de lien</span>
Ici la description du lien</div>
</div>
<div class="contenu rpgs">
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
<span class="fainfos">Date</span> Pseudo
</div></div>
<a href="https://tourmaline.forumactif.com/" target="_blank" style="font-size:8px;">Loukoum</a></div></center>
Liens#5
Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Tourmaline :: Codage :: Codages simples :: Fiches :: Fiches de Liens-
Sauter vers: