-25%
Le deal à ne pas rater :
PC Portable Gamer 16,1” HP Victus 16 – 16 Go /512 Go
749.99 € 999.99 €
Voir le deal

KoalaVolant
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


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 -->


Dernière édition par KoalaVolant le Dim 21 Aoû 2022 - 20:07, édité 2 fois
KoalaVolant
KoalaVolant
Mar 6 Avr 2021 - 13:11
Pour mettre vos news :

header

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.

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>
Revenir en haut

Nos amis proches

Fiche de partenariat + news Parto512 Life Is Strange L'AnnuaireImage Fiche de partenariat + news B-squareAinsi tomba ThédasDuralasCoeur de la force