Cette page d'accueil a été fait pour une commande
Il s'accorde, en couleurs avec le QEEL suivant : clique là



Il suffit de mettre dans "Panneau d'admin > Affichage > Page d'accueil" ceci :

Code:

<iframe frameborder="0" scrolling="no" marginheight="0" style="width: 811px; height: 400px;" src="LIEN DE LA PAGE"></iframe>

Et de changer "LIENDELAPAGE" par la page où se trouvera la page d'accueil :3 !
A savoir que c'est donc le même principe qu'une fiche de pub n.n !

Et ensuite il faut aller dans Modules > Pages HTML et créer la page HTML qui sera à mettre sur LIENDELPAGe :

Code:

<style>
  
    /* Couleurs */
    
    :root{
    --main-color:#E5E9DE;
    --main-color-d: linear-gradient(90deg, rgba(148,186,222,1) 0%, rgba(194,209,192,1) 100%);
    --snd-color:#7A8D53;
    --three-color:#7597b7;
    --grey:#555;
    --white:#f0f0f0;
    
    --font1:'DM Sans', sans-serif;
    --font2: 'Marck Script', cursive; ;
    }
    
    /* Structure */
    
    .pafow, .pafow *{ box-sizing:border-box; font-family:var(--font1); }
    .pafow{ width:800px; display:flex; justify-content:space-between; flex-wrap:wrap; }
    .pafow a{ text-decoration:none; }
  
  .pafow-bienvenue, .pafow-liens{ width:100%; }

    /* Bienvenue */
    
    .pafow-bienvenue{ padding:10px; font-size:22px; text-align:center; font-family:var(--font2);
    background:var(--main-color-d); color:var(--white); }
    
    /* Liens */
    
    .pafow-liens{ margin-top:5px; display:flex; justify-content:space-between; }
    .pafow-liens a{ text-decoration:none; padding:5px; text-align:center; font-weight:bold; width:129px;  
    font-size:12px; line-height:14px; background:var(--white); color:var(--grey); display:block; transition:500ms;}
    .pafow-liens a:hover{ background-color:var(--three-color); color:var(--white); transition:500ms; }
  
    /* Deux col */
    
    .pafow-deuxcol{ display:flex; justify-content:space-between; flex-wrap:wrap; width:89.5%; margin-top:5px;  }
    
  /* Titres */
  
    .pafow h2{  background:var(--main-color-d); color:var(--white); font-family:var(--font2); font-size:15px; width:100%; margin:0px; margin-bottom:5px;  text-align:center; padding:5px;  }
    
  /* Context */
    .pafow-contexte{ width:36%; height:147px; padding:10px; border:1px solid var(--snd-color); text-align:justify; font-size:12px; line-height:14px; overflow:auto;  }
    
    .pafow-staff{ width:41%; text-align:center; }
    .pafow-staff div{ padding:5px; width:100%;  background:var(--white); display:flex; justify-content:center; align-items:center; }
    .pafow-staff a{ margin:0px 5px; display:block; font-size:11px; color:var(--grey); }
  .pafow-staff a strong{ background:var(--three-color); color:var(--white); display:block; font-family:var(--font2); }
    .pafow-staff a img{ width:60px; height:60px; object-fit:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
  
    .pafow-membres{ width:21%; flex-wrap:wrap; }
  .pafow-membres div{ display:flex; justify-content:center; align-items:center:}
  .pafow-membres a{ margin:0px 2px; color:var(--grey); }
  .pafow-membres a img{ width:70px; height:70px; object-fit:cover; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
  .pafow-membres a span{ display:block; text-align:center; font-family:var(--font2);     margin-top: 3px;}
  .pafow-membres a strong{ font-family:var(--font1); font-size:10px;  display:block; }
    
  .pafow-img{ display:block; width:36%; object-fit:cover; height:100px; }
  
  .pafow-event{ width:41%;  }
  .pafow-event h3{ background:var(--main-color); color:var(--grey); font-family:var(--font2); font-size:15px;
  width:100%; margin:0px; margin-bottom:5px;  text-align:center; padding:0px;}
  .pafow-event span{ height: 78px;    display: block;    overflow: auto;    font-size: 12px;
    line-height: 14px;    text-align: justify;    padding: 5px; }
  
  .pafow-topsites{ width:21%;  }
  .pafow-topsites span{ display: flex;    justify-content: center;    font-size: 50px; }
  .pafow-topsites a{ display:block; margin:0px 5px; color:var(--snd-color); }
  
  .pafow-part{ width:100%; display: flex;    justify-content: space-between;}
  .pafow-part a.vous{ background-color:var(--three-color); color:var(--white); font-size:15px; line-height:35px; height:35px; padding:0px 5px; }
    /* Prédéfinis */
    
    .pafow-scenarios{ width:9.9%; }
  .pafow-scenarios a{ margin:3px 0px; display:block; width:75px; height:75px; position:relative; }
    .pafow-scenarios a img{ width:75px; height:75px; object-fit:cover; clip-path: polygon(100% 50%, 0% 0%, 0% 100%);}
  .pafow-scenarios a span{-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0); transition:500ms;
transform: scale(0); display:block; background:var(--white); padding:5px; position:absolute; top:21%; left:0px;
  font-size:12px; text-align:center; color:var(--grey); }
  
  .pafow-scenarios a:hover span{ -moz-transform:none;-webkit-transform:none;-o-transform:none;-ms-transform:none; transform:none; 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=DM+Sans:wght@400;700&family=Marck+Script&display=swap" rel="stylesheet">
  
  <div class="pafow">
  <!-- Message de bienvenue -->
  <div class="pafow-bienvenue">Bienvenue sur Cosmos Island {USERNAME}</div>
  <!-- Liens Utiles -->
  <div class="pafow-liens">
    <a href="" target="_blank">Lien 1</a>
    <a href="" target="_blank">Lien 1</a>
    <a href="" target="_blank">Lien 1</a>
    <a href="" target="_blank">Lien 1</a>
    <a href="" target="_blank">Lien 1</a>
    <a href="" target="_blank">Lien 1</a>
  </div>
  <!-- Deux colonnes -->
  <div class="pafow-deuxcol">
    <!-- Contexte -->
<div class="pafow-contexte">Le monde tel que vous le connaissez n'a jamais existé. Factices,
    façonnés de mes mains, les univers sont nombreux tant et si bien que nul, hormis moi, n'a connaissance de ces autres mondes.
    Tous différents, ils empruntent depuis la nuit des temps la direction que je souhaite leur donner, guidant ainsi vos destins
    jusqu'à ce jour où, afin de vous protéger d'un grand danger, j'ai usé de mes puissants pouvoirs pour façonner un nouvel endroit :
    Cosmos. L'île des univers, votre nouveau logis...
</div>
  <!-- Staff -->
  <div class="pafow-staff">
  <h2>Le staff du forum</h2>
    <div>
  <a href="" target="_blank"><img src="https://pa1.narvii.com/7637/4a6467570008614ae5994bb74a49c19454d4bc8br1-250-250_hq.gif"/>
    <span><strong>Wanda Maximoff</strong>
  DCs : Loki & Tohru</span></a>
  <a href="" target="_blank"><img src="https://pa1.narvii.com/7637/4a6467570008614ae5994bb74a49c19454d4bc8br1-250-250_hq.gif"/>
    <span><strong>Wanda Maximoff</strong>
  DCs : Loki & Tohru </span></a>
  <a href="" target="_blank"><img src="https://pa1.narvii.com/7637/4a6467570008614ae5994bb74a49c19454d4bc8br1-250-250_hq.gif"/>
    <span><strong>Wanda Maximoff</strong>
  DCs :Loki & Tohru  </span></a>
    </div>
  </div>

  <!-- Membres du mois -->
      <div class="pafow-membres"><h2>Nos membres adorés</h2>
  <div><a href="" target="_blank"><img src="https://64.media.tumblr.com/64368449729740fa748f887e55bad44e/a7ce2a1e5dec20ce-2e/s400x600/033a1d4b43420a9181b7a36e2fe46c5a39219738.gif"/>
  <span>Pseudo
  <strong>Infos</strong></span></a>
  <a href="" target="_blank"><img src="https://64.media.tumblr.com/64368449729740fa748f887e55bad44e/a7ce2a1e5dec20ce-2e/s400x600/033a1d4b43420a9181b7a36e2fe46c5a39219738.gif"/>
  <span>Pseudo
    <strong>Infos</strong></span></a></div>
</div>
  <!-- Image contexte -->
  <img src="https://64.media.tumblr.com/4196600edf389c2083d51e7940150067/8c4f8474f97bf9e0-19/s540x810/bb85c5e12da2dd4a77ee6fcca264d8b2b66ca270.gif" class="pafow-img"/>
  <!-- Event -->
  <div class="pafow-event">
  <h3>Nom de l'event</h3>
  <span>Le monde tel que vous le connaissez n'a jamais existé. Factices, façonnés de mes mains, les univers sont nombreux tant et si bien que nul,
    hormis moi, n'a connaissance de ces autres mondes. Tous différents, ils empruntent depuis la nuit des temps la direction que
    je souhaite leur donner, guidant ainsi vos destins jusqu'à ce jour où, afin de vous protéger d'un grand danger, </span>
  </div>
  <!-- Tops sites -->
  <div class="pafow-topsites">
  <h2>Les tops sites</h2>
  <span>
  <a href="" target="_blank">:diamonds:</a>
  <a href="" target="_blank">:diamonds:</a>
  <a href="" target="_blank">:diamonds:</a>
  </div>
  <!-- Partenaires --><div class="pafow-part">
  <a href="" target="_blank"><img src="https://images2.imgbox.com/85/fd/YOkjbxe1_o.png"/></a>
  <a href="" target="_blank"><img src="https://images2.imgbox.com/85/fd/YOkjbxe1_o.png"/></a>
  <a href="" target="_blank"><img src="https://images2.imgbox.com/85/fd/YOkjbxe1_o.png"/></a>
  <a href="" target="_blank"><img src="https://images2.imgbox.com/85/fd/YOkjbxe1_o.png"/></a>
      <a href="" target="_blank"><img src="https://images2.imgbox.com/85/fd/YOkjbxe1_o.png"/></a>
      <a href="" target="_blank"><img src="https://images2.imgbox.com/85/fd/YOkjbxe1_o.png"/></a>
  <a href="" target="_blank" class="vous">Vous</a>
  </div>
  <!-- Fin deux colonnes -->
  </div>
  <!-- Scénarios -->
  <div class="pafow-scenarios">
  <a href="" target="_blank"><img src="https://64.media.tumblr.com/96d6bda2d3ca6330e9749168169b5844/tumblr_inline_nukmv3pIF31tae3h3_250.gif"/>
  <span>PV Pietro Maximoff</span></a>
  <a href="" target="_blank"><img src="https://64.media.tumblr.com/96d6bda2d3ca6330e9749168169b5844/tumblr_inline_nukmv3pIF31tae3h3_250.gif"/>
  <span>PV Norbert Dragonneau</span></a>
  <a href="" target="_blank"><img src="https://64.media.tumblr.com/96d6bda2d3ca6330e9749168169b5844/tumblr_inline_nukmv3pIF31tae3h3_250.gif"/>
  <span>PV Pietro Maximoff</span></a>
  <a href="" target="_blank"><img src="https://64.media.tumblr.com/96d6bda2d3ca6330e9749168169b5844/tumblr_inline_nukmv3pIF31tae3h3_250.gif"/>
  <span>PV Norbert Dragonneau</span></a>
  </div>
  <!-- Fin -->
  </div>

A savoir que les couleurs sont modifiables au début du CSS pour plus de praticité :3 (si jamais y a des questions hésitez pas)