KoalaVolant
Dim 6 Sep 2020 - 1:57
Si vous désirez une fiche de partenariat où afficher des informations tout comme vos scénarios...Pourquoi ne pas essayer celle-ci ?
Les couleurs et les polices d'écriture sont modifiables dans le root. Si cela ne vous convient pas vous pouvez toujours modifier les var(--color1); en #e3e3e3 par exemple.
A mettre dans votre sujet où vous affichez la fiche de partenariat
- Code:
<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 450px; height:750px;" src="LiendevotrepageHTML"></iframe></center>
A mettre dans Modules > HTML
Les couleurs et les polices d'écriture sont modifiables dans le root. Si cela ne vous convient pas vous pouvez toujours modifier les var(--color1); en #e3e3e3 par exemple.
- Code:
<style>
/* Couleurs */
:root{
--typo1:'Oswald', sans-serif;
--typo2:'Anton', sans-serif;
--typo3:Verdana;
--blanc:#fff;
--txt:#222;
--fond:#fff;
--jaune-f:#222;
--jaune:#444;
--jaune-c:#6C006E;
--noir:#fff;
--violet-f:#fff;
--violet-c:#BFBFBF;
}
.koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; }
.part-rise a{ color:var(--jaune-c); text-decoration:none; }
.part-rise a:hover{ color:var(--jaune-f); }
.part-rise a:visited{ color:var(--jaune); }
.part-rise{ width:450px; font-family:var(--typo3); background-color:var(--violet-c); padding-bottom: 10px;}
.part-rise *{ box-sizing:border-box; }
.part-header{ width:100%; height:190px; background-image:url('https://i.servimg.com/u/f30/19/45/51/53/pisral14.jpg'); background-position:top center; background-size:100%; background-repeat:no-repeat; }
.part-rise-1, .part-rise-2{ display:flex; justify-content:space-between; }
.part-rise-2{ margin:0px 15px; }
.part-cont{ background-color:var(--fond); width:270px; font-size:13px; line-height:1.6em; color:var(--txt); text-align:justify; margin:15px; padding:10px; border:1px solid var(--jaune); }
.part-cont a:before{ content:'~'; padding-right:5px; transition:600ms; }
.part-cont a:hover:before{ content:'~'; padding-right:10px; }
.part-pvs{ display:flex; width:170px; flex-wrap:wrap; margin-top:15px; }
.part-pvs a{ display:block; margin:5px; position:relative; height:80px; overflow:hidden;}
.part-pvs a img{ width:60px; height:70px; object-fit:cover; }
.part-pvs a span{ display:block; background-color:var(--violet-f); padding:3px; text-align:center; font-size:10px; line-height:11px; position:absolute;top:-105%; width:100%; transition:600ms;}
.part-pvs a:hover span{ top:50%; transform:translateY(-50%); }
.part-pvs a span strong{ display:block; border-bottom:1px solid var(--violet-c); }
.part-liens{ width:200px; }
.part-liens a{ display:block; padding:3px; text-decoration:none; text-transform:uppercase; font-size:14px; letter-spacing:3px; transition:500ms; margin:5px 0px;
background-color:var(--violet-f); font-family:var(--typo1); }
.part-liens a:hover{ background-color:var(--noir); }
.part-news{ width:230px; margin:10px;}
.part-news h2{ margin:0;
background: -webkit-linear-gradient(90deg, var(--jaune-f) 0%, var(--jaune-c) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; font-family:var(--typo2); border-bottom:1px solid var(--jaune); color:var(--jaune); font-size:26px; line-height:24px; letter-spacing:3px; }
.part-news span{ font-size:13px; line-height:15px; color:var(--txt); margin:5px; padding:10px; text-align:justify; height:170px; overflow:auto; display:block; }
.part-rise-video{ margin-top:10px; }
/* Ascenseurs */
::-webkit-scrollbar, .ss-forums::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb, .ss-forums::-webkit-scrollbar-thumb {background:var(--jaune); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner, .ss-forums::-webkit-scrollbar-corner{background:none;}
</style>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500&display=swap" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div class="part-rise">
<a href="https://rise-of-valyria.forumactif.com/" target="_blank"><div class="part-header"></div></a>
<div class="part-rise-1">
<div class="part-cont"><span>Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii, omnis legio, omnis congregatio et secta diabolica.
Ergo, omnis legio diabolica, adiuramus te... cessa decipere humanas creaturas, eisque æternæ perditionìs venenum propinare... </span>
<br><a target="_bma,l" href="#">découvrez la suite du contexte ici</a>
</div>
<div class="part-pvs">
<a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a>
<a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a>
<a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a>
<a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a>
<a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a>
<a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a>
</div>
</div>
<div class="part-rise-2">
<div class="part-liens">
<a href="#" target="_blank">Lien</a>
<a href="#" target="_blank">Lien</a>
<a href="#" target="_blank">Lien</a>
<a href="#" target="_blank">Lien</a>
<a href="#" target="_blank">Lien</a>
<a href="#" target="_blank">Lien</a>
<a href="#" target="_blank">Lien</a>
</div>
<div class="part-news"><h2>Nouveautés</h2>
<span> <b>00/00/0000</b> - New<br>
<b>00/00/0000</b> - New<br>
<b>00/00/0000</b> - New<br>
</span>
</div>
</div>
</div><a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>
KoalaVolant
Mer 25 Jan 2023 - 15:24
Et pour ceux qui veulent pas de l'Iframe ! Vous pouvez copier ce code et le remplir
C'est moins digeste donc si jamais n'hésitez pas à nous demander de le personnaliser pour vous
C'est moins digeste donc si jamais n'hésitez pas à nous demander de le personnaliser pour vous
- Code:
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500&display=swap" rel="stylesheet">
<div class="part-rise"> <a href="https://rise-of-valyria.forumactif.com/" target="_blank"><div class="part-header"></div></a> <div class="part-rise-1"> <div class="part-cont"><span>Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii, omnis legio, omnis congregatio et secta diabolica. Ergo, omnis legio diabolica, adiuramus te... cessa decipere humanas creaturas, eisque æternæ perditionìs venenum propinare... </span> <br><a target="_bma,l" href="#">découvrez la suite du contexte ici</a> </div> <div class="part-pvs"> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> </div> </div> <div class="part-rise-2"> <div class="part-liens"> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> </div> <div class="part-news"><h2>Nouveautés</h2> <span> <b>00/00/0000</b> - New<br> <b>00/00/0000</b> - New<br> <b>00/00/0000</b> - New<br> </span> </div> </div> </div><a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>
<style> /* Couleurs */ :root{ --typo1:'Oswald', sans-serif; --typo2:'Anton', sans-serif; --typo3:Verdana; --blanc:#fff; --txt:#222; --fond:#fff; --jaune-f:#222; --jaune:#444; --jaune-c:#6C006E; --noir:#fff; --violet-f:#fff; --violet-c:#BFBFBF; } .koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; } .part-rise a{ color:var(--jaune-c); text-decoration:none; } .part-rise a:hover{ color:var(--jaune-f); } .part-rise a:visited{ color:var(--jaune); } .part-rise{ width:450px; font-family:var(--typo3); background-color:var(--violet-c); padding-bottom: 10px;} .part-rise *{ box-sizing:border-box; } .part-header{ width:100%; height:190px; background-image:url('https://i.servimg.com/u/f30/19/45/51/53/pisral14.jpg'); background-position:top center; background-size:100%; background-repeat:no-repeat; } .part-rise-1, .part-rise-2{ display:flex; justify-content:space-between; } .part-rise-2{ margin:0px 15px; } .part-cont{ background-color:var(--fond); width:270px; font-size:13px; line-height:1.6em; color:var(--txt); text-align:justify; margin:15px; padding:10px; border:1px solid var(--jaune); } .part-cont a:before{ content:'~'; padding-right:5px; transition:600ms; } .part-cont a:hover:before{ content:'~'; padding-right:10px; } .part-pvs{ display:flex; width:170px; flex-wrap:wrap; margin-top:15px; } .part-pvs a{ display:block; margin:5px; position:relative; height:80px; overflow:hidden;} .part-pvs a img{ width:60px; height:70px; object-fit:cover; } .part-pvs a span{ display:block; background-color:var(--violet-f); padding:3px; text-align:center; font-size:10px; line-height:11px; position:absolute;top:-105%; width:100%; transition:600ms;} .part-pvs a:hover span{ top:50%; transform:translateY(-50%); } .part-pvs a span strong{ display:block; border-bottom:1px solid var(--violet-c); } .part-liens{ width:200px; } .part-liens a{ display:block; padding:3px; text-decoration:none; text-transform:uppercase; font-size:14px; letter-spacing:3px; transition:500ms; margin:5px 0px; background-color:var(--violet-f); font-family:var(--typo1); } .part-liens a:hover{ background-color:var(--noir); } .part-news{ width:230px; margin:10px;} .part-news h2{ margin:0; background: -webkit-linear-gradient(90deg, var(--jaune-f) 0%, var(--jaune-c) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family:var(--typo2); border-bottom:1px solid var(--jaune); color:var(--jaune); font-size:26px; line-height:24px; letter-spacing:3px; } .part-news span{ font-size:13px; line-height:15px; color:var(--txt); margin:5px; padding:10px; text-align:justify; height:170px; overflow:auto; display:block; } .part-rise-video{ margin-top:10px; } /* Ascenseurs */ ::-webkit-scrollbar, .ss-forums::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;} ::-webkit-scrollbar-thumb, .ss-forums::-webkit-scrollbar-thumb {background:var(--jaune); height:30px; border-radius:30px;} ::-webkit-scrollbar-corner, .ss-forums::-webkit-scrollbar-corner{background:none;}</style>
|
|