Maître du Jeu
MJ
A PROPOS
Messages : 16
Date d'inscription : 22/01/2022
Date d'inscription : 22/01/2022
BIENVENUE sur le
Modèle de fiche de lien
Tout bon forum qui se respecte met à disposition de ses membres un modèle pour les fiches de liens. Le choix du code pour votre fiche est libre, donc l'utilisation de ce modèle est optionnel. Pour tout soucis avec le code, n'hésitez pas à me contacter ! Et pour le rendu, c'est par ici que ça se passe.
Partie résumé
- Code:
<center><div class="messageconteneur">
<div class="ficherelatop">
<div class="ficherelaresum"><span class="ficherelanom"><span>{</span> NOM PRENOM</span><div class="lienscont"><span class="lienstext">www.</span><a class="liens" href="liendetaficheici">fiche</a> <span class="lienstext">- www.</span><a class="liensi" href="liensverstesmpici">contact</a></div>
<p class="listemot">INFO - INFO - INFO - INFO - INFO - INFO - INFO</p>
<div class="resume">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nisl massa. Nam ullamcorper laoreet nisl, eu porttitor leo volutpat sit amet. Donec mattis ullamcorper erat id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ullamcorper nunc. Duis vitae mi a lectus vestibulum dapibus nec quis lorem. Curabitur ac mauris ac arcu dapibus aliquet vel at urna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nisl massa. Nam ullamcorper laoreet nisl, eu porttitor leo volutpat sit amet. Donec mattis ullamcorper erat id posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ullamcorper nunc. Duis vitae mi a lectus vestibulum dapibus nec quis lorem. Curabitur ac mauris ac arcu dapibus aliquet vel at urna.</div>
</div>
<div class="ficherelatrivia">
<div class="persoimg"><img class="img1" src="https://zupimages.net/up/22/12/tm9m.png"><img class="img2" src="https://zupimages.net/up/22/12/tm9m.png">
</div>
</div>
</div>
<div class="ficherelabot">
<div class="ficherelarech"><span class="soustitre">Recherchés</span>
<div class="rech"><em>Liens :</em>
<br>-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nisl massa. Nam ullamcorper laoreet nisl, eu porttitor leo volutpat sit amet. Donec mattis ullamcorper erat id posuere
<br><br>-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nisl massa. Nam ullamcorper laoreet nisl, eu porttitor leo volutpat sit amet. Donec mattis ullamcorper erat id posuere<br><br>
<em>Scénarios :</em>
<br>-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nisl massa. Nam ullamcorper laoreet nisl, eu porttitor leo volutpat sit amet. Donec mattis ullamcorper erat id posuere
<br><br>-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec nisl massa. Nam ullamcorper laoreet nisl, eu porttitor leo volutpat sit amet. Donec mattis ullamcorper erat id posuere
</div></div>
<div class="separateur"></div>
<div class="ficherelachron"><span class="soustitre">Chronologie</span>
<div class="chron">
<em>xx.xx.xxxx</em> - <a href="liensujet">Titre</a> ft. Partenaire / STATUT<br>
<em>xx.xx.xxxx</em> - <a href="liensujet">Titre</a> ft. Partenaire / STATUT<br>
<em>xx.xx.xxxx</em> - <a href="liensujet">Titre</a> ft. Partenaire / STATUT<br>
<em>xx.xx.xxxx</em> - <a href="liensujet">Titre</a> ft. Partenaire / STATUT<br>
<em>xx.xx.xxxx</em> - <a href="liensujet">Titre</a> ft. Partenaire / STATUT<br>
<em>xx.xx.xxxx</em> - <a href="liensujet">Titre</a> ft. Partenaire / STATUT<br>
<em>xx.xx.xxxx</em> - <a href="liensujet">Titre</a> ft. Partenaire / STATUT<br>
</div>
</div>
</div>
</div>
</center>
<style>.messageconteneur{text-align:justify;display:flex;flex-direction: column;background-image:url('https://zupimages.net/up/22/07/dwt0.png');background-position:right;background-repeat:no-repeat repeat;background-color:#181b1b;color:#8e8e8e;padding:40px;padding-bottom:30px;border-left:10px solid #7e7e7e;border-right:10px solid #7e7e7e;}.ficherelatop {display:flex;margin-bottom:20px;}.ficherelaresum{width: 80%;margin-right: -62px; position: relative;}.ficherelanom {white-space:nowrap;font-family: 'Josefin Sans', sans-serif;font-size:30px;background-image: linear-gradient(180deg, #DADADA, 20%, #817d7c, 90%, #2A2A2A);-webkit-background-clip: text;color: transparent!important;position:relative;top: 10px;text-transform:uppercase;}.messageconteneur span {color:#70a59b;}.listemot{position: relative;top: 5px;width: 403px;left: 166px;border-top: 1px dotted #babfb6; letter-spacing: 5px;color: #70a59b;}.resume{border-left:20px solid #282828;padding:0px 10px;text-align:justify;height:150px;overflow-x:hidden;color:#8e8e8e;width: 393px; top: 35px; position:relative;}.persoimg {display:flex;flex-direction:column;position:relative;top: 89px;left: 60px;}.persoimg img{width:100px;height:100px;border-radius:100%;box-shadow: 5px 5px 20px #000;}.img1{position:relative;top:30px;height:100px;width:100px;z-index:1;transition:opacity .4s ease-in,z-index 1s;opacity:.5}.img2{position:relative;z-index:2;transition:opacity .4s}.img1:hover{z-index:3;opacity:1}.img1:hover~.img2{opacity:.5}.lienstext{pointer-events: none;font-family:'Noto Serif Display', serif;}.lienstext a{color:#8e8e8e!important;}.lienscont{position: absolute;left: -16px;top: 135px;font-family:'Noto Serif Display', serif;white-space: nowrap;}.lienscont a {color:#d3d5c5;text-decoration: none;transition: color 400ms;}.lienscont a:hover{color:#a27272;}.ficherelabot{margin-top:30px;display: flex;}.ficherelarech {width:50%;border:2px solid #282828;padding:0px 7px;}.ficherelachron {width:50%;border:2px solid #282828;padding:0px 7px;}.soustitre {font-family: 'Great Vibes', cursive;font-size:35px;letter-spacing:1px;position:relative;left: 47px;}.rech{background-color:rgba(40,40,40,0.4);padding:10px;height:182px;overflow-x:hidden;text-align:justify;left:27px;}.chron {background-color:rgba(40,40,40,0.4);padding:10px;height:182px;overflow-x:hidden;text-align:justify;text-transform:lowercase;}.chron a {text-transform:uppercase;color:#d3d5c5;text-decoration: none;transition: color 400ms;}.chron a:hover{color:#a27272;}em {font-style:normal;font-family:'Noto Serif Display', serif;}.rech em {font-size:20px;position: relative;left:10px;top:2px;color:#a27272;background-color:#181B1B;}.separateur{width:10px;height:282px;background-color:#282828;margin:0px 10px;}</style>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&family=Josefin+Sans&family=Great+Vibes&family=Noto+Serif+Display&family=Archivo+Narrow&family=Mea+Culpa&family=Pirata+One&family=Staatliches&display=swap" rel="stylesheet">
Partie liens
- Code:
<center><div class="messageconteneur2"><!-- premier copain --> <div class="blocrela"><img src=https://zupimages.net/up/22/12/tm9m.png><div class="relad"><span class="nomrela">Bob l'Eponge Carrée</span>
<p class="statutrela">“je hais ce gros fdp„</p><div class="descrela">Voici une petite description expliquant pourquoi je hais ce putain d'enfoiré. D'abord on dit qu'il est une éponge carrée alors qu'il est rectangulaire, déjà. Ensuite ce n'est jamais qu'un ridicule petit bout de gruyère. </div></div></div><!-- secondcopain --> <div class="blocrela"><img src=https://zupimages.net/up/22/12/tm9m.png><div class="relad"><span class="nomrela">Bob l'Eponge Carrée</span>
<p class="statutrela">“je hais ce gros fdp„</p><div class="descrela">Voici une petite description expliquant pourquoi je hais ce putain d'enfoiré. D'abord on dit qu'il est une éponge carrée alors qu'il est rectangulaire, déjà. Ensuite ce n'est jamais qu'un ridicule petit bout de gruyère. </div></div></div><!-- troisième copain --> <div class="blocrela"><img src=https://zupimages.net/up/22/12/tm9m.png><div class="relad"><span class="nomrela">Bob l'Eponge Carrée</span>
<p class="statutrela">“je hais ce gros fdp„</p><div class="descrela">Voici une petite description expliquant pourquoi je hais ce putain d'enfoiré. D'abord on dit qu'il est une éponge carrée alors qu'il est rectangulaire, déjà. Ensuite ce n'est jamais qu'un ridicule petit bout de gruyère. </div></div></div><!-- quatrième copain --> <div class="blocrela"><img src=https://zupimages.net/up/22/12/tm9m.png><div class="relad"><span class="nomrela">Bob l'Eponge Carrée</span>
<p class="statutrela">“je hais ce gros fdp„</p><div class="descrela">Voici une petite description expliquant pourquoi je hais ce putain d'enfoiré. D'abord on dit qu'il est une éponge carrée alors qu'il est rectangulaire, déjà. Ensuite ce n'est jamais qu'un ridicule petit bout de gruyère. </div></div></div><!-- cinquième copain--> <div class="blocrela"><img src=https://zupimages.net/up/22/12/tm9m.png><div class="relad"><span class="nomrela">Bob l'Eponge Carrée</span>
<p class="statutrela">“je hais ce gros fdp„</p><div class="descrela">Voici une petite description expliquant pourquoi je hais ce putain d'enfoiré. D'abord on dit qu'il est une éponge carrée alors qu'il est rectangulaire, déjà. Ensuite ce n'est jamais qu'un ridicule petit bout de gruyère. </div></div></div><!-- sixième copain--> <div class="blocrela"><img src=https://zupimages.net/up/22/12/tm9m.png><div class="relad"><span class="nomrela">Bob l'Eponge Carrée</span>
<p class="statutrela">“je hais ce gros fdp„</p><div class="descrela">Voici une petite description expliquant pourquoi je hais ce putain d'enfoiré. D'abord on dit qu'il est une éponge carrée alors qu'il est rectangulaire, déjà. Ensuite ce n'est jamais qu'un ridicule petit bout de gruyère. </div></div></div></center>
<style>.messageconteneur2{text-align:justify;display:grid;grid-gap:20px;grid-template-columns:1fr 1fr;background-image:url('https://zupimages.net/up/22/07/dwt0.png');background-position:right;background-repeat:no-repeat repeat;background-color:#181b1b;color:#8e8e8e;padding:20px;margin-bottom:30px;padding-bottom:30px;border-left:10px solid #7e7e7e;border-right:10px solid #7e7e7e;}.blocrela{height:150px;background-color:#282828;margin-bottom:10px;overflow:hidden;display:flex;position:relative;}.blocrela img{border-bottom-right-radius:800px;position:relative;right:30px;}.relad{display:flex;flex-direction:column;position: absolute; right: 0px;height:150px;}.nomrela{z-index:1;position:relative;background-color:#181b1b;width:auto;text-align:right;height:20px;top:10px;padding:0px 5px;right: 5px;font-size:18px;white-space:nowrap;font-family:'Josefin Sans';text-transform:uppercase;}.statutrela{font-size:12px;position:relative;text-align:right;max-width:150px;text-transform:lowercase;color:#d3d5c5;font-family:'Noto Serif Display';right: -69px;}.descrela{position:relative;width:170px;height:70px;overflow-x:hidden;padding:5px;background-color:#181b1b;color:#d3d5c5;font-size:12px;top:-10px;right: -42px;}</style>
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|