KoalaVolant
Mar 20 Déc 2022 - 10:35
Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Gang Technology"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".
Voir le thème complet "Gang Technology"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".
Particularités du code :
- Crédits : KoalaVolant
- C'est une fiche en iframe, donc si vous la modifiez, elle se modifie partout.
- Crédits : KoalaVolant
- C'est une fiche en iframe, donc si vous la modifiez, elle se modifie partout.
Page HTML
- Aller dans le panneau d'administration > Modules > Page HTML
- Cliquez sur "Créer une page HTML avancée
- Copiez coller tout ce qui suis :
- Code:
<style>
/* COLORS */
@import url('https://cdn.statically.io/gist/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/fad2f254369fb54250260077a4c87391a6280c52/gotham.css');
:root{
--fond-deg:linear-gradient(90deg, #BBBBB6 32.29%, #647076 89.86%);
--fond-img:url('https://i.imgur.com/eF2fshb.jpg');
--fond-img2:url('https://i.imgur.com/ezn1MYo.jpg');
--fond-bodyline:#fff;
--dark:#647076;
--light:#BBBBB6;
--black:#222;
--white:#fff;
--text-shadow:2px 1px 2px #333;
--font-text:'Inter', sans-serif;
--font-title:'GothamPro', sans-serif;
}
/* BODY ET CHOSES DE BASE */
a, a:hover{ text-decoration:none !important; }
*{ box-sizing:border-box; }
img{ object-fit:cover; }
/* FICHE DE PUB */
.bylpub{ background:var(--white); width:100%; padding:10px; font-family:'Inter', cursive; border:1px solid var(--light); font-size:12px; line-height:1.1em; }
/* HEADER */
.bylpub img{ width:100%; }
/* INFOS */
.bylpub .bylinfo{ background:var(--fond-deg); padding:3px; color:var(--white); font-size:12px; line-height:12px; text-align:center; margin:10px 0; font-family:var(--font-title); font-weight:200; }
/* CONTEXTE */
.bylpub .bylcon{ display:flex; justify-content:space-between; }
.bylpub .bylcon img{ width:30%; height:95px; }
.bylpub .bylcon span{ display:block; text-align:justify; width:68.5%; }
.bylpub .bylcon span strong{ font-family:var(--font-title); letter-spacing:1px;}
/* Liens */
.bylliens{ display:flex; margin:10px 0; justify-content:space-between; }
.bylliens a{ display:block; width:32.5%; padding:3px; background:var(--fond-img2); justify-content:center; text-align:center; color:var(--white); text-shadow:var(--text-shadow);
display:flex; align-items:center; background-position: 50% 30%; transition:500ms; }
.bylliens a:hover{ background-position: 60% 30%; transition:500ms; }
/* PREDEFS */
.bylpredef{ display:flex; justify-content:center; }
.bylpredef span{ color:var(--black); padding:3px; display:block; width:28%; font-family:var(--font-title); letter-spacing:1px; font-weight:200; font-size:11px; text-align:right; padding-right:15px;}
.bylpredef a{ display:block; width:35px; height:35px; margin:0 1px;}
.bylpredef a img{ width:100%; opacity:0.7; transition:500ms; }
.bylpredef a img:hover{ opacity:1; transition:500ms; }
/* BOUTON */
.bylpub .rejoindre{ margin-top:10px; display:block; background:var(--fond-deg); padding:10px; font-size:23px; text-align:center; color:var(--white); width:100%; font-weight:100;
letter-spacing:2px; font-family:var(--font-title); transition:500ms;}
.bylpub .rejoindre:hover{ letter-spacing:4px; transition:500ms; }
</style>
<meta charset="UTF-8" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet"><div class="bylpub">
<!-- HEADER -->
<a target="_blank" href="https://becomeyourlife.forumactif.com">
<img src="https://2img.net/www.zupimages.net/up/22/38/ozmd.png"/>
</a>
<!-- INFOS -->
<div class="bylinfo">
Blabla sur votre forum
</div>
<!-- CONTEXTE -->
<div class="bylcon">
<img src="https://i.servimg.com/u/f30/19/45/51/53/image12.png"/>
<span><strong>Votre contexte</span>
</div>
<!-- LIENS -->
<div class="bylliens">
<a target="_blank" href="#">Lire la suite du contexte</a>
<a target="_blank" href="#">Voir plus d'infos</a>
<a target="_blank" href="#">Lire le guide du débutant</a>
</div>
<!-- PREDEFINIS -->
<div class="bylpredef">
<span>Venez leur faire <strong>prendre vie</strong></span>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
<a target="_blank" href=""><img src="https://i.servimg.com/u/f30/19/45/51/53/images10.png"/></a>
</div>
<!-- REJOINDRE -->
<a target="_blank" class="rejoindre" href="#"><strong>Rejoindre</strong> cette histoire</a>
<!-- FIN FICHE PUB -->
</div>
- Validez la page
- Mettez de côté le lien de la page
L'installer
- Pour l'installer, dans votre sujet de fiche, remplissez le code suivant :
- Code:
<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 475px; height: 560px;" src="LIENDELAPAGE"></iframe></center>
- LIENDELAPAGE étant....le lien de votre page HTML :p
|
|
|
