KoalaVolant
Mar 6 Avr 2021 - 13:11
◄ CREDITS ►
Codage de Koalavolant
Header Pisrale deKoalavolant
Icons de Bryan Dechart par Koalavolant
Icons de Dove Cameron par Skaan
Codage de Koalavolant
Header Pisrale deKoalavolant
Icons de Bryan Dechart par Koalavolant
Icons de Dove Cameron par Skaan
Ce code fait partie du thème complet "Red Arrow"
HTML
D'abord il vous faudra poster ça :
- Code:
<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 450px; height: 860px;" src="https://rivers.forumactif.org/h11-fiche-part"></iframe></center>
Il faut créer une nouvelle page dans Modules > Page HTML
Et y ajouter ça :
- Code:
<style>:root{--main-color:#A3171A;
--main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
--white:#fff;
--black:#444;
--grisc:#dedede;
--griscc:#f0f0f0;
--font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}
.partwrap{ width:430px; font-family:var(--font3); color:(--black); font-size:13px; }
.partwrap *{ box-sizing:border-box; }
.partwrap header{ position:relative; width:430px; height:200px; }
.partwrap header img{ width:430px; height:200px; object-fit:cover; }
.partwrap header h1{ position:absolute; bottom:-17px; width:430px; font-size:25px; background-color:var(--main-color); font-family:var(--font2);
text-align:center; padding:5px; color:var(--white); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0% 100%); }
.parthaut, .partbas{ display:flex; justify-content:space-between; }
.partcont{ width:70%; overflow:auto; height:250px; padding:20px; background-color:var(--grisc); font-family:var(--font3); font-size:13px; line-height:16px;
color:var(--black); text-align:justify; }
.partliens{ width:30%; height:250px; padding:15px; }
.partliens{ background:var(--main-color-v); background-position:center; background-size:cover;clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 100%, 0 86%);
position:relative; height:290px; }
.partliens:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%; background: var(--main-color);
mix-blend-mode: hard-light;}
.partliens a{ position:relative; z-index:99; display:block; font-family:var(--font1); color:var(--white); font-size:16px; margin:3px 0px; text-decoration:none;}
.partstaff{ width:30%; padding-top:30px;}
.partstaff{ background:var(--main-color-v); background-position:center; background-size:cover;clip-path: polygon(0 14%, 50% 0, 100% 14%, 100% 100%, 0% 100%);
position:relative; height:290px; display: flex;justify-content: center;flex-wrap: wrap;}
.partstaff:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%; background: var(--black);
mix-blend-mode: hard-light;}
.partstaff a{ display:block; width:70px; height:70px; position:relative; overflow:hidden;}
.partstaff a:hover img{ padding:6px; border-width:4px; transition:600ms; }
.partstaff a img{ width:70px; height:70px; object-fit:cover; position:relative; z-index:99; padding:4px; border:2px solid var(--white); border-radius:50%;}
.partstaff a span{ display:block; background-color:var(--white); z-index:100; position:absolute; top:50%; transform:translateY(-50%); left:0px; width:70px; padding:5px;
font-family:var(--font3); color:var(--black); font-size:11px; text-align:center; font-weight:bold; left:-71px; transition:800ms; }
.partstaff a:hover span{ left:0px; }
.partstaff a strong{ color:var(--main-color); font-family:var(--font1); font-weight:normal; }
.partscenar{ width:70%; background-color:var(--grisc); padding:0px 25px; height:290px; overflow:auto; }
.partscenar h2{ color:var(--main-color); text-align:center; font-family:var(--font2); font-size:18px; }
.partscenar div{ width:100%; display:flex; justify-content:space-between; margin:5px 0px; }
.partscenar div img{ width:30%; height:50px; object-fit:cover; }
.partscenar div span{ padding:5px; display:block; height:50px; width:70%; background-color:var(--white); text-align:center; }
.partscenar div strong{ font-family:var(--font1); display:block; font-size:14px; letter-spacing:2px; color:var(--main-color); font-weight:normal;}
.partinfos{ background-color:var(--black); color:var(--white); padding:5px; height:77px; overflow:auto; display:flex; align-items:center; }
/* Ascenseurs */
::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.partwrap *{ scrollbar-color: var(--main-color) var(--white);
scrollbar-width: thin; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Kaushan+Script&family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<div class="partwrap">
<header>
<img src="https://i.servimg.com/u/f30/19/45/51/53/pisral46.jpg" alt="header"/>
<h1>Titre du forum</h1>
</header>
<!-- Contexte et liens -->
<div class="parthaut">
<!-- Contexte -->
<div class="partcont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue fringilla lectus, tempor fringilla quam placerat et.
Vivamus a dapibus sapien, et ullamcorper diam. Etiam sed risus urna. Vivamus sollicitudin nisl lorem, vel porttitor ex volutpat ac.
Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aenean non finibus arcu. Suspendisse vestibulum lorem quam, eu imperdiet purus hendrerit sed.
Mauris risus velit, tempor non lacus quis, ultrices consequat enim. Donec in pulvinar nibh. Integer ut rutrum nibh.
In sodales eros vel accumsan vestibulum. Curabitur id dui condimentum dolor efficitur convallis. Aenean dictum ut est nec interdum.
<br/><br/>
Mauris mollis arcu sollicitudin lorem feugiat imperdiet. Etiam lacinia, ipsum in tempus cursus, enim sapien vehicula urna, nec tristique
ligula dui ac est. Pellentesque in libero non ipsum rutrum sollicitudin a sed erat. Vestibulum ornare est sed consectetur euismod.
Cras tristique purus eget dolor tempus molestie. Praesent mi ante, fermentum nec lacinia a, vestibulum sit amet lacus.
Aliquam finibus ante vehicula, tincidunt mauris et, congue eros. Cras eget dolor lectus. In hac habitasse platea dictumst.
Aenean rhoncus nulla id quam condimentum faucibus. Ut volutpat gravida lectus, quis tincidunt nisi auctor at.
Nulla at nisl vel diam aliquam tincidunt. Duis eu sodales libero. Donec eleifend quam in ex feugiat lobortis.
Aenean faucibus quam vel tristique tincidunt. Curabitur eget magna tincidunt, commodo enim sed, pulvinar lectus.</div>
<!-- Liens -->
<div class="partliens">
<a target="_blank" href="">Lien</a>
<a target="_blank" href="">Lien plus long</a>
<a target="_blank" href="">Lien</a>
<a target="_blank" href="">Lien plus long</a>
<a target="_blank" href="">Lien</a>
<a target="_blank" href="">Lien plus long</a>
<a target="_blank" href="">Lien</a>
<a target="_blank" href="">Lien plus long</a>
</div>
</div>
<!-- Fin contexte et liens -->
<!-- Scénarios et Staff -->
<div class="partbas">
<!-- Scenarios -->
<div class="partstaff">
<a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Pseudo</strong><br>Infos</span></a>
<a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Pseudo</strong><br>Infos</span></a>
<a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Pseudo</strong><br>Infos</span></a>
</div>
<!-- Staff -->
<div class="partscenar"><h2>On recherche</h2>
<div><img src="https://i.imgur.com/Reebaqi.jpg"/><span><strong>Prénom</strong>Groupe - Lien</span></div>
<div><img src="https://i.imgur.com/Reebaqi.jpg"/><span><strong>Prénom</strong>Groupe - Lien</span></div>
<div><img src="https://i.imgur.com/Reebaqi.jpg"/><span><strong>Prénom</strong>Groupe - Lien</span></div>
</div>
</div>
<!-- Fin scénarios et staff -->
<!-- Infos -->
<div class="partinfos">
Statistiques à mettre ici
</div>
<!-- Fin infos -->
</div>
<!-- Fin partenaires -->
KoalaVolant
Mar 6 Avr 2021 - 13:11
Pour mettre vos news :
Titre du forum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue fringilla lectus, tempor fringilla quam placerat et. Vivamus a dapibus sapien, et ullamcorper diam. Etiam sed risus urna. Vivamus sollicitudin nisl lorem, vel porttitor ex volutpat ac. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean non finibus arcu. Suspendisse vestibulum lorem quam, eu imperdiet purus hendrerit sed. Mauris risus velit, tempor non lacus quis, ultrices consequat enim. Donec in pulvinar nibh. Integer ut rutrum nibh. In sodales eros vel accumsan vestibulum. Curabitur id dui condimentum dolor efficitur convallis. Aenean dictum ut est nec interdum.
Mauris mollis arcu sollicitudin lorem feugiat imperdiet. Etiam lacinia, ipsum in tempus cursus, enim sapien vehicula urna, nec tristique ligula dui ac est. Pellentesque in libero non ipsum rutrum sollicitudin a sed erat. Vestibulum ornare est sed consectetur euismod. Cras tristique purus eget dolor tempus molestie. Praesent mi ante, fermentum nec lacinia a, vestibulum sit amet lacus. Aliquam finibus ante vehicula, tincidunt mauris et, congue eros. Cras eget dolor lectus. In hac habitasse platea dictumst. Aenean rhoncus nulla id quam condimentum faucibus. Ut volutpat gravida lectus, quis tincidunt nisi auctor at. Nulla at nisl vel diam aliquam tincidunt. Duis eu sodales libero. Donec eleifend quam in ex feugiat lobortis. Aenean faucibus quam vel tristique tincidunt. Curabitur eget magna tincidunt, commodo enim sed, pulvinar lectus.
Mauris mollis arcu sollicitudin lorem feugiat imperdiet. Etiam lacinia, ipsum in tempus cursus, enim sapien vehicula urna, nec tristique ligula dui ac est. Pellentesque in libero non ipsum rutrum sollicitudin a sed erat. Vestibulum ornare est sed consectetur euismod. Cras tristique purus eget dolor tempus molestie. Praesent mi ante, fermentum nec lacinia a, vestibulum sit amet lacus. Aliquam finibus ante vehicula, tincidunt mauris et, congue eros. Cras eget dolor lectus. In hac habitasse platea dictumst. Aenean rhoncus nulla id quam condimentum faucibus. Ut volutpat gravida lectus, quis tincidunt nisi auctor at. Nulla at nisl vel diam aliquam tincidunt. Duis eu sodales libero. Donec eleifend quam in ex feugiat lobortis. Aenean faucibus quam vel tristique tincidunt. Curabitur eget magna tincidunt, commodo enim sed, pulvinar lectus.
On recherche
HTML
- Code:
<link href="https://coderps.xyz/codesrps/codesred.css" rel="stylesheet" type="text/css" /><link href="https://fonts.googleapis.com/css2?family=Anton&family=Kaushan+Script&family=Lato:wght@400;700;900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Anton&family=Kaushan+Script&family=Lato:wght@400;700;900&display=swap" rel="stylesheet"> <div class="partwrap"> <header> <img src="https://i.servimg.com/u/f30/19/45/51/53/pisral46.jpg" alt="header"/> <h1>Titre du forum</h1> </header><div class="partnews" style="text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent congue fringilla lectus, tempor fringilla quam placerat et. Vivamus a dapibus sapien, et ullamcorper diam. Etiam sed risus urna. Vivamus sollicitudin nisl lorem, vel porttitor ex volutpat ac. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean non finibus arcu. Suspendisse vestibulum lorem quam, eu imperdiet purus hendrerit sed. Mauris risus velit, tempor non lacus quis, ultrices consequat enim. Donec in pulvinar nibh. Integer ut rutrum nibh. In sodales eros vel accumsan vestibulum. Curabitur id dui condimentum dolor efficitur convallis. Aenean dictum ut est nec interdum.
Mauris mollis arcu sollicitudin lorem feugiat imperdiet. Etiam lacinia, ipsum in tempus cursus, enim sapien vehicula urna, nec tristique ligula dui ac est. Pellentesque in libero non ipsum rutrum sollicitudin a sed erat. Vestibulum ornare est sed consectetur euismod. Cras tristique purus eget dolor tempus molestie. Praesent mi ante, fermentum nec lacinia a, vestibulum sit amet lacus. Aliquam finibus ante vehicula, tincidunt mauris et, congue eros. Cras eget dolor lectus. In hac habitasse platea dictumst. Aenean rhoncus nulla id quam condimentum faucibus. Ut volutpat gravida lectus, quis tincidunt nisi auctor at. Nulla at nisl vel diam aliquam tincidunt. Duis eu sodales libero. Donec eleifend quam in ex feugiat lobortis. Aenean faucibus quam vel tristique tincidunt. Curabitur eget magna tincidunt, commodo enim sed, pulvinar lectus.</div>
<h2>On recherche</h2>
<div class="partscencen"><a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Prénom</strong><br>Lien</span></a><a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Prénom</strong><br>Lien</span></a><a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Prénom</strong><br>Lien</span></a><a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Prénom</strong><br>Lien</span></a><a target="_blank" href=""><img src="https://nsm09.casimages.com/img/2021/01/30//n1YfLb-BryanDechart17.jpg"/><span><strong>Prénom</strong><br>Lien</span></a></div></div>