Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Le Deal du moment :
Réassort du coffret Pokémon 151 ...
Voir le deal

KoalaVolant
KoalaVolant
Dim 6 Sep 2020 - 1:57
Si vous désirez une fiche de partenariat où afficher des informations tout comme vos scénarios...Pourquoi ne pas essayer celle-ci ?


A mettre dans votre sujet où vous affichez la fiche de partenariat



Code:
<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 450px; height:750px;" src="LiendevotrepageHTML"></iframe></center>

A mettre dans Modules > HTML



Les couleurs et les polices d'écriture sont modifiables dans le root. Si cela ne vous convient pas vous pouvez toujours modifier les var(--color1); en #e3e3e3 par exemple.

Code:
<style>
  /* Couleurs */
  :root{
  --typo1:'Oswald', sans-serif;
  --typo2:'Anton', sans-serif;
  --typo3:Verdana;
  
  --blanc:#fff;
  --txt:#222;
  --fond:#fff;
  --jaune-f:#222;
  --jaune:#444;
  --jaune-c:#6C006E;
  --noir:#fff;
  --violet-f:#fff;
  --violet-c:#BFBFBF;
  }

  .koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; }

    .part-rise a{ color:var(--jaune-c); text-decoration:none; }
  .part-rise a:hover{ color:var(--jaune-f); }
  .part-rise a:visited{ color:var(--jaune); }
  
  .part-rise{ width:450px; font-family:var(--typo3); background-color:var(--violet-c);     padding-bottom: 10px;}
  .part-rise *{ box-sizing:border-box; }
  
  .part-header{ width:100%; height:190px; background-image:url('https://i.servimg.com/u/f30/19/45/51/53/pisral14.jpg'); background-position:top center; background-size:100%; background-repeat:no-repeat; }
  
  .part-rise-1, .part-rise-2{ display:flex; justify-content:space-between; }
 .part-rise-2{ margin:0px 15px; }
  
  .part-cont{ background-color:var(--fond); width:270px; font-size:13px; line-height:1.6em; color:var(--txt); text-align:justify; margin:15px; padding:10px; border:1px solid var(--jaune); }
    .part-cont a:before{ content:'~'; padding-right:5px; transition:600ms; }
    .part-cont a:hover:before{ content:'~'; padding-right:10px; }
  
  .part-pvs{ display:flex; width:170px; flex-wrap:wrap; margin-top:15px; }
  .part-pvs a{ display:block; margin:5px; position:relative; height:80px; overflow:hidden;}
  .part-pvs a img{ width:60px; height:70px; object-fit:cover; }
  .part-pvs a span{ display:block; background-color:var(--violet-f); padding:3px; text-align:center; font-size:10px; line-height:11px; position:absolute;top:-105%; width:100%; transition:600ms;}
  .part-pvs a:hover span{  top:50%; transform:translateY(-50%); }
  .part-pvs a span strong{ display:block; border-bottom:1px solid var(--violet-c); }
  
  .part-liens{ width:200px; }
  .part-liens a{ display:block; padding:3px; text-decoration:none; text-transform:uppercase; font-size:14px; letter-spacing:3px; transition:500ms; margin:5px 0px;
  background-color:var(--violet-f); font-family:var(--typo1); }
  .part-liens a:hover{ background-color:var(--noir); }
  
  .part-news{ width:230px; margin:10px;}
  .part-news h2{ margin:0;
  background: -webkit-linear-gradient(90deg, var(--jaune-f) 0%, var(--jaune-c) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; font-family:var(--typo2);  border-bottom:1px solid var(--jaune); color:var(--jaune); font-size:26px; line-height:24px; letter-spacing:3px; }
  
  .part-news span{ font-size:13px; line-height:15px; color:var(--txt); margin:5px; padding:10px; text-align:justify; height:170px; overflow:auto; display:block; }
  
  .part-rise-video{ margin-top:10px; }
    /* Ascenseurs */
  ::-webkit-scrollbar, .ss-forums::-webkit-scrollbar  {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb,  .ss-forums::-webkit-scrollbar-thumb {background:var(--jaune); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner, .ss-forums::-webkit-scrollbar-corner{background:none;}
  
</style>

<link href="https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500&display=swap" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  
  <div class="part-rise">
    <a href="https://rise-of-valyria.forumactif.com/" target="_blank"><div class="part-header"></div></a>
    <div class="part-rise-1">
      <div class="part-cont"><span>Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii, omnis legio, omnis congregatio et secta diabolica.
        Ergo, omnis legio diabolica, adiuramus te... cessa decipere humanas creaturas, eisque æternæ perditionìs venenum propinare... </span>
        <br><a target="_bma,l" href="#">découvrez la suite du contexte ici</a>
      </div>
      <div class="part-pvs">
        <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" />          <span><strong>Nom</strong>ft. Avatar</span>          </a>      
     <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" />          <span><strong>Nom</strong>ft. Avatar</span>          </a>      
          <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" />          <span><strong>Nom</strong>ft. Avatar</span>          </a>      
          <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" />          <span><strong>Nom</strong>ft. Avatar</span>          </a>      
          <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" />          <span><strong>Nom</strong>ft. Avatar</span>          </a>      
          <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" />          <span><strong>Nom</strong>ft. Avatar</span>          </a>      
 </div>
    </div>
    <div class="part-rise-2">
      <div class="part-liens">
         <a href="#" target="_blank">Lien</a>
                 <a href="#" target="_blank">Lien</a>
                 <a href="#" target="_blank">Lien</a>
                 <a href="#" target="_blank">Lien</a>
                 <a href="#" target="_blank">Lien</a>
                 <a href="#" target="_blank">Lien</a>
                 <a href="#" target="_blank">Lien</a>
 </div>
      <div class="part-news"><h2>Nouveautés</h2>
        <span>       <b>00/00/0000</b> - New<br>
         <b>00/00/0000</b> - New<br>
<b>00/00/0000</b> - New<br>
        </span>
      </div>
    </div>
  </div><a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>
KoalaVolant
KoalaVolant
Mer 25 Jan 2023 - 15:24
Et pour ceux qui veulent pas de l'Iframe ! Vous pouvez copier ce code et le remplir Smile
C'est moins digeste donc si jamais n'hésitez pas à nous demander de le personnaliser pour vous

Code:
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500&display=swap" rel="stylesheet">
  <div class="part-rise"> <a href="https://rise-of-valyria.forumactif.com/" target="_blank"><div class="part-header"></div></a> <div class="part-rise-1"> <div class="part-cont"><span>Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii, omnis legio, omnis congregatio et secta diabolica. Ergo, omnis legio diabolica, adiuramus te... cessa decipere humanas creaturas, eisque æternæ perditionìs venenum propinare... </span> <br><a target="_bma,l" href="#">découvrez la suite du contexte ici</a> </div> <div class="part-pvs"> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> <a href="#" target="_blank"><img src="https://66.media.tumblr.com/aefeffdc0810a4b3c6fc89d533a589b9/tumblr_prb7b5onLR1vvdgrp_400.gifv" /> <span><strong>Nom</strong>ft. Avatar</span> </a> </div> </div> <div class="part-rise-2"> <div class="part-liens"> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> <a href="#" target="_blank">Lien</a> </div> <div class="part-news"><h2>Nouveautés</h2> <span> <b>00/00/0000</b> - New<br> <b>00/00/0000</b> - New<br> <b>00/00/0000</b> - New<br> </span> </div> </div> </div><a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>

<style> /* Couleurs */ :root{ --typo1:'Oswald', sans-serif; --typo2:'Anton', sans-serif; --typo3:Verdana; --blanc:#fff; --txt:#222; --fond:#fff; --jaune-f:#222; --jaune:#444; --jaune-c:#6C006E; --noir:#fff; --violet-f:#fff; --violet-c:#BFBFBF; } .koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; } .part-rise a{ color:var(--jaune-c); text-decoration:none; } .part-rise a:hover{ color:var(--jaune-f); } .part-rise a:visited{ color:var(--jaune); } .part-rise{ width:450px; font-family:var(--typo3); background-color:var(--violet-c); padding-bottom: 10px;} .part-rise *{ box-sizing:border-box; } .part-header{ width:100%; height:190px; background-image:url('https://i.servimg.com/u/f30/19/45/51/53/pisral14.jpg'); background-position:top center; background-size:100%; background-repeat:no-repeat; } .part-rise-1, .part-rise-2{ display:flex; justify-content:space-between; } .part-rise-2{ margin:0px 15px; } .part-cont{ background-color:var(--fond); width:270px; font-size:13px; line-height:1.6em; color:var(--txt); text-align:justify; margin:15px; padding:10px; border:1px solid var(--jaune); } .part-cont a:before{ content:'~'; padding-right:5px; transition:600ms; } .part-cont a:hover:before{ content:'~'; padding-right:10px; } .part-pvs{ display:flex; width:170px; flex-wrap:wrap; margin-top:15px; } .part-pvs a{ display:block; margin:5px; position:relative; height:80px; overflow:hidden;} .part-pvs a img{ width:60px; height:70px; object-fit:cover; } .part-pvs a span{ display:block; background-color:var(--violet-f); padding:3px; text-align:center; font-size:10px; line-height:11px; position:absolute;top:-105%; width:100%; transition:600ms;} .part-pvs a:hover span{ top:50%; transform:translateY(-50%); } .part-pvs a span strong{ display:block; border-bottom:1px solid var(--violet-c); } .part-liens{ width:200px; } .part-liens a{ display:block; padding:3px; text-decoration:none; text-transform:uppercase; font-size:14px; letter-spacing:3px; transition:500ms; margin:5px 0px; background-color:var(--violet-f); font-family:var(--typo1); } .part-liens a:hover{ background-color:var(--noir); } .part-news{ width:230px; margin:10px;} .part-news h2{ margin:0; background: -webkit-linear-gradient(90deg, var(--jaune-f) 0%, var(--jaune-c) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family:var(--typo2); border-bottom:1px solid var(--jaune); color:var(--jaune); font-size:26px; line-height:24px; letter-spacing:3px; } .part-news span{ font-size:13px; line-height:15px; color:var(--txt); margin:5px; padding:10px; text-align:justify; height:170px; overflow:auto; display:block; } .part-rise-video{ margin-top:10px; } /* Ascenseurs */ ::-webkit-scrollbar, .ss-forums::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;} ::-webkit-scrollbar-thumb, .ss-forums::-webkit-scrollbar-thumb {background:var(--jaune); height:30px; border-radius:30px;} ::-webkit-scrollbar-corner, .ss-forums::-webkit-scrollbar-corner{background:none;}</style>
Revenir en haut

Nos amis proches

Fiche de partenariat n°1 Parto512 Logo WyvArtem