Le Deal du moment :
Pèse-personne connecté – XIAOMI Mi ...
Voir le deal
14.99 €

KoalaVolant
KoalaVolant

Fiche de partenariat n°3 Empty Fiche de partenariat n°3

Sam 9 Juil 2022 - 20:28


Mode d'utilisation



- Les couleurs sont modifiables dans le "root"
- Tout d'ailleurs est modifiable sauf la structure (sinon, demander une personnalisation)

Modules > Pages HTML



Aller dans l'endroit indiqué dans le panneau d'admin
Puis créer une nouvelle page, et C/C du code :

Code:
<style>
  :root{
  --main-color:#673375;
  --main-color-f:#4D2354;
  --snd-color:#644677;
  
  --header:url('https://i.servimg.com/u/f30/19/45/51/53/39e64810.jpg');
  --header-opacity:0.5;
  
  --white:#fff;
  --grey1:#f0f0f0;
  
    --font1:'Rubik', sans-serif;
  }
  
  .koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; }
.partls1{ width:500px; background:var(--grey1); font-family:var(--font1); }
  .partls1, .partl1s *{ box-sizing:border-box; }
  .partls1 a{ text-decoration:none; }
.partls1 .header-forum{ width:100%; position:relative; }
.partls1 .header-forum img{ width:100%; height:200px; object-fit:cover; border-bottom-right-radius: 100px; transition:600ms; }
  .partls1 .header-forum:hover img{ border-radius:0px; transition:600ms; }
  .partls1 .header-forum a{ border-radius:20px; background:var(--main-color); color:var(--white); padding:10px; position:absolute; right:20px; bottom:-10px;  transition:500ms;}
    .partls1 .header-forum:hover a{ background:var(--main-color-f); transition:500ms; }
  
  .partls1 .liens-forums{ display:flex; width:74%; flex-wrap:wrap; margin: 20px 5px; }
  .partls1 .liens-forums a{ border-radius:5px; background:var(--snd-color); border:1px solid var(--snd-color); color:var(--white); transition:400ms; padding:5px; display:block; width: 26%;    margin: 2px; text-align:center; font-size:0.85em; }
  .partls1 .liens-forums a:hover{ background:none; border:1px solid var(--snd-color); color:var(--snd-color); transition:400ms; }
  
  .partls1 .contexte-scenarios{ overflow:hidden; position:relative;   align-items:center; height: 259px; margin-top:5px; width:100%; background:var(--main-color); display:flex; position:relative; -webkit-border-radius: 100px;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius: 50px;
-moz-border-radius-bottomright: 0;
border-radius: 50px;
border-bottom-right-radius: 0; }
    .partls1 .contexte-scenarios > span{ background:var(--header); background-position:center; display:block; position:absolute; width:100%; height:100%; opacity:var(--header-opacity); z-index:1; background-size:cover;}  
  .partls1 .contexte-forum{ position:relative; z-index:3; padding:10px; padding:10px; width:50%;  }
  .partls1 .contexte-forum h2{ margin:0px; width:80%; padding:5px 5px 5px 10px; color:var(--white); clip-path: polygon(0% 0%, 94% 0, 100% 50%, 94% 100%, 0% 100%); font-size:18px;  }
  .partls1 .contexte-forum span{ border-bottom-left-radius: 40px; display:block; overflow:auto; padding:10px; height:187px;  background:var(--grey1); text-align:justify; font-size:0.85em; line-height:1.2em; }

  .partls1 .scenarios-forum{ position:relative; z-index:4;  width:49%; padding:10px; display:flex; flex-wrap:wrap;    }
    .partls1 .scenarios-forum div{ display:flex; flex-wrap:wrap; width:100%; }
  .partls1 .scenarios-forum div a{ display:block; width: 25%;    margin: 0px 7px;}
    .partls1 .scenarios-forum div a img{ display:block; width:100%; height:57px; object-fit:cover; border-radius:50%; padding:3px; border:1px solid var(--white); transition: all 0.2s 0s ease-out; }
.partls1 .scenarios-forum div a img:hover{ padding:0px; transition: all 0.2s 0s ease-out; border:none;     width: 62px;  }
  .partls1 .scenarios-forum > a{ width:100%; color:var(--white); margin:5px 0px; padding:5px; transition:800ms;  text-align:center; display:block; }
  .partls1 .scenarios-forum > a:hover{ text-decoration:underline; }
  
  .partls1 .stats-forum{ display:flex; align-items:center; margin-top:5px; }
  .partls1 h3{ padding:20px; color:var(--main-color); text-align:center; width:60%;  }
  .partls1 .stats-forum div{ width:40%; }
  .partls1 .stats-forum div span{ display:block; text-align:center; background:var(--snd-color); border-top-left-radius: 50px;
border-bottom-left-radius: 50px; padding:10px; margin:5px 0px; color:var(--white); transition:500ms;  }
  .partls1 .stats-forum div span:hover{ background:var(--main-color); transition:500ms; }
</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=Rubik:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div class="partls1">
  <!-- HEADER -->
  <div class="header-forum">
    <img src="https://i.servimg.com/u/f30/19/45/51/53/pisral49.jpg"/>
      <a target=_"blank" href="">Accéder au forum</a>
  </div>
    <!-- LIENS, pour en ajouter un, copier coller le a. -->
    <div class="liens-forums">
      <a target=_"blank" href="">Lien 1</a>
      <a target=_"blank" href="">Règlement</a>
      <a target=_"blank" href="">Partenaires</a>
     <a target=_"blank" href="">Lien 1</a>
      <a target=_"blank" href="">Règlement</a>
      <a target=_"blank" href="">Partenaires</a>
    </div>
    <!-- CONTEXTE ET SCENARIOS -->
  <div class="contexte-scenarios"><span></span>
      <div class="contexte-forum">
        <h2>Contexte du forum</h2>
        <span>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même.
        L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale,
        et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut,
        et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois
          par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</span>
      </div>
      <!-- SCENARIOS (ou STAFF) -->
      <div class="scenarios-forum">
        <div>
        <a target=_"blank" href=""><img src="https://zupimages.net/up/22/19/dg8x.png"/></a>
        <a target=_"blank" href=""><img src="https://zupimages.net/up/22/19/dg8x.png"/></a>
        <a target=_"blank" href=""><img src="https://zupimages.net/up/22/19/dg8x.png"/></a>
        <a target=_"blank" href=""><img src="https://zupimages.net/up/22/19/dg8x.png"/></a>
                  <a target=_"blank" href=""><img src="https://zupimages.net/up/22/19/dg8x.png"/></a>
                  <a target=_"blank" href=""><img src="https://zupimages.net/up/22/19/dg8x.png"/></a>
      </div>
        <a target=_"blank" href="">Découvrez nos scénarios !</a>
      </div>
      <!-- FIN CONTEXTE ET SCENAR -->
  </div>
  <!-- Statistiques -->
      <div class="stats-forum">
        <h3>Venez vous amusez avec nous, sur NOM DU FORUM</h3>
        <div>
          <!-- Pour ajouter un statistique, copier coller le span -->
          <span><strong>500</strong> membres</span>
          <span><strong>14 587</strong> messages</span>
        </div>
      </div>
      <!-- Fin de la fiche -->
  </div><a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>


L'installer



Remplissez l'iframe là :

Code:
<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 500px; height:800px;" src="LIENDEVOTREPAGE"></iframe></center>            

Pour "LIENDEVOTREPAGE", c'est le lien de votre page HTML que vous avez crée.
Revenir en haut

Partenaires footer

RPG-Chevalier Logo WyvArtem Image hébergée gratuitement chez Image hébergée gratuitement chez