-31%
Le deal à ne pas rater :
Resident Evil VIllage sur PS5 [Précommande]
48.51 € 69.99 €
Voir le deal

KoalaVolant
KoalaVolant




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

Partenaires footer

Masqué RPG-Chevalier Altered Tokyo Les mythes d'YsarillRealm EnchantedAbstract Logo WyvArtem