KoalaVolant
Ven 8 Avr 2022 - 17:38
A mettre dans votre sujet où vous affichez la fiche de partenariat
- Code:
<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 465px; height: 640px;" src="LIENDEVOTREPAGEHTML"></iframe></center>
A mettre dans Modules > Pages HTML
- Code:
<style>
.partfiche{ width:450px; margin:0 auto; background-color:white; padding:10px; border-radius:4px; font-family:Verdana;}
.partfiche *, .partfiche{ box-sizing:border-box; }
.partfiche .headerForum{ width:95%; display:block; margin:0 auto; border-radius:10px; }
.staffpart{ display:flex; justify-content:center; margin-top:5px; }
.staffpart div, .staffpart img, .staffpart span{ width:80px; height:80px; border-radius:50%; }
.staffpart img, .partpredef img{ object-fit:cover; }
.staffpart div, .partpredef a{ display:block; position:relative; overflow:hidden; margin:0px 5px;}
.staffpart span, .partpredef span{ background-color:#fff; display:block; padding:10px; position:absolute; top:-80px; transition:500ms; color: #1E5D3A; font-family: 'Oswald', sans-serif; text-align:center; font-size:14px; display:flex; justify-content:center; align-items:center;}
.staffpart div:hover span, .partpredef a:hover span{ top:0px; transition:500ms; }
.staffpart em{ font-weight:normal; font-size:12px; text-decoration:none; text-style:none; font-family:Verdana; color:#222; }
.partflex{ display:flex; justify-content:space-between; margin-top:10px; }
.partleft{ width:59%; }
.partright{ width:39%; }
.contpart{ border:#dedede 1px solid; background-color:#F0F0F0; padding:10px; font-size:12px; line-height:1.3em; text-align:justify; height:250px; overflow:auto; margin-bottom:3px; }
.partright h2{ width:100%; font-size:18px; margin:0; margin-bottom:5px; text-align:center; font-family: 'Oswald', sans-serif; color: #1E5D3A;}
.lienspart{ display:flex; justify-content:space-between; flex-wrap:wrap; }
.lienspart a{ display:block; width:49%; background-color:#2E8B57; text-transform:uppercase; font-size:18px; font-family: 'Oswald', sans-serif; color:#fff; padding:5px; text-decoration:none; text-align:center; margin:3px 0px; }
.lienspart a:hover{ background-color:#1E5E3A; }
.partpredef a, .partpredef img, .partpredef span{ width:60px; height:60px; border-radius:50%; }
.partpredef{ display:flex; flex-wrap:wrap; justify-content:center; }
.partpredef a{ margin:3px 5px; }
.partnews{ margin-top:5px; }
.partnews strong{ color:#2E8B57; }
.partnews span{ display:block; border:#dedede 1px solid; background-color:#F0F0F0; padding:10px; font-size:11px; line-height:1.3em;
text-align:justify; height:145px; overflow:auto; margin-bottom:3px; }
.koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; text-decoration:none; font-family:Times New Roman; }</style>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap" rel="stylesheet">
<div class="partfiche">
<!-- Header -->
<a target="_blank" href="https://togrr.forumactif.com/"><img class="headerForum" src="https://2img.net/imgur.com/29PAhmp.png" alt="header du forum"/></a>
<!-- Staff -->
<div class="staffpart">
<div><img src="https://imgur.com/TbqZWT8.png"/><span><strong>Pseudo<br><em>Fonction</em></strong></span></div>
<div><img src="https://imgur.com/TbqZWT8.png"/><span><strong>Pseudo<br><em>Fonction</em></strong></span></div>
<div><img src="https://imgur.com/TbqZWT8.png"/><span><strong>Pseudo<br><em>Fonction</em></strong></span></div>
<div><img src="https://imgur.com/TbqZWT8.png"/><span><strong>Pseudo<br><em>Fonction</em></strong></span></div>
</div>
<!--Bloc contexte, liens, etc -->
<div class="partflex">
<!-- Bloc de gauche -->
<div class="partleft">
<!-- Contexte du forum -->
<div class="contpart"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor sem vitae felis sodales accumsan. Maecenas eget nulla arcu.
Curabitur tincidunt lacus id felis viverra, ac luctus massa rhoncus. Suspendisse egestas venenatis urna, nec cursus lacus blandit dapibus. Vivamus quis posuere sem, nec laoreet purus.
Cras dignissim erat ac orci faucibus, sed tincidunt metus finibus. Pellentesque arcu turpis, dignissim in velit bibendum, sagittis bibendum lectus.
</div>
<!-- Liens -->
<div class="lienspart">
<a target="_blank" href="https://togrr.forumactif.com">Lien 1</a>
<a target="_blank" href="https://togrr.forumactif.com">Lien 2</a>
<a target="_blank" href="https://togrr.forumactif.com">Lien 3</a>
<a target="_blank" href="https://togrr.forumactif.com">Lien 4</a>
</div>
</div>
<!-- Bloc de droite -->
<div class="partright">
<div class="partpredef"><h2>Prédéfinis</h2>
<a href="https://togrr.forumactif.com"><img src="https://imgur.com/0HZZmGv.png"/><span>Pseudo</span></a>
<a href="https://togrr.forumactif.com"><img src="https://imgur.com/0HZZmGv.png"/><span>Pseudo</span></a>
<a href="https://togrr.forumactif.com"><img src="https://imgur.com/0HZZmGv.png"/><span>Pseudo</span></a>
<a href="https://togrr.forumactif.com"><img src="https://imgur.com/0HZZmGv.png"/><span>Pseudo</span></a>
</div>
<div class="partnews"><h2>News</h2>
<span><strong>05/08/20 -</strong> hey hey hey<br>
<strong>05/08/20 -</strong> hey hey hey<br>
<strong>05/08/20 -</strong> hey hey hey<br>
<strong>05/08/20 -</strong> hey hey hey</span>
</div>
</div>
</div>
</div>
<a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>