Cette page d'accueil est la gagnante du concours de codage sur PRD.
De fait, elle marche en iframe pour plus de praticité.
La page d'accueil fait 900px de largeur mais vous pouvez diminuer bien sûr.

Installation

Il faut aller dans le panneau d'administration. Modules > Pages HTML
Créer une nouvelle page html que vous appelez comme vous voulez et y mettre ce code complet (CSS + HTML)

Code:

<style> /* Couleurs et Images de fond */
 
  .pa-wrapper{ background-color:#dedede; }
 
  /* Message de bienvenue */
  .pa-wrapper h1{ color:#fff;
background: #444;
background: linear-gradient(90deg, #447C88 0%, #A3A3A3 100%);
}
 
  /* Couleurs des liens */
 
  .pa-wrapper a, .pa-wrapper a:visited, .pa-wrapper a:active{ color:#5F581B; }
  .pa-wrapper a:hover{ color:#dedede; }

  /* Liens Utiles et les H3 */
 
  .pa-links a, .pa-staff h3{ background: #444;
background: linear-gradient(90deg, #447C88 0%, #A3A3A3 100%);
  color:#fff; text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5); }
 
.pa-links a:hover{ background:#444; color:#dedede; }
 
  /* Couleur du contexte */
 
  .pa-contexte span{  background-color:#fff; }
    .pa-contexte a{  color:#fff;  background:#838383; }
    .pa-contexte a:hover{ background-color:#6A6A6A; color:#dedede; }
 
  /* Couleurs des news */
 
  .pa-news strong{ /*Petit titre*/
  color:#42737D;
}
 
  /* Couleur des tops et partenariats */
 
  .pa-top, .pa-part{ background: #444;
background: linear-gradient(90deg, #447C88 0%, #A3A3A3 100%);   }
  .pa-top a, .pa-top strong, .pa-part strong{ color:#fff; }
 
  /* Couleurs de l'ascenseur */

.pa-wrapper ::-webkit-scrollbar {  width: 6px;  height: 6px; }
.pa-wrapper ::-webkit-scrollbar-button {  width: 0px;  height: 0px; }
.pa-wrapper ::-webkit-scrollbar-thumb {  background: #525252;  border: 0px none #ffffff;  border-radius: 50px;}
.pa-wrapper ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active{  background: #525252;}
.pa-wrapper ::-webkit-scrollbar-track {  background: #c4c4c4;  border: 0px none #ffffff;  border-radius: 50px;}
.pa-wrapper ::-webkit-scrollbar-track:hover {  background: #d2d2d2;}
.pa-wrapper ::-webkit-scrollbar-track:active {  background: #e2e2e2;}
.pa-wrapper ::-webkit-scrollbar-corner {  background: transparent;}
 
  /* Couleur des crédits */
 
.pa-credits { border-color:#787424 !important; background-color:#fff; }
 
  /* Couleur des membres */
 
 .pa-membres h3{ color:#42737D !important; }
  .pa-membres span{ background-color:#fff; }
 
  /* Couleur des PVs */
 
  .pa-pv a span{ background-color:#fff; }
 
  /* Structure */
 
  /*Générale */
  .pa-wrapper{  width:800px; margin:0 auto; font-family:Verdana;
  font-size:11px; }
  .pa-wrapper *{ box-sizing:border-box; }
  .pa-wrapper a, .pa-wrapper a:hover, .pa-wrapper a:visited, .pa-wrapper a:active{ text-decoration:none; }
  .pa-wrapper2{    height: 400px; }
 
  /* Display Flex */
 
.pa-left, .pa-right, .pa-infos, .pa-wrapper2, .pa-links, .pa-news, .pa-staff, .pa2-infos, .pa-part, .pa-credits, .pa-membres{ display:flex; }
 
  /* Blocs */
 
  .pa-left{ position:relative; left:-30px; }
  .pa-infos{ width:269px; flex-wrap:wrap; }
  .pa-right{ margin-left:60px; width:300px;}
  .pa2-infos, .pa-part{ flex-wrap:wrap; }
 
  /* Message bienvenue */
  .pa-wrapper h1{
  width:800px;
  font-family: 'Anton', sans-serif; color:#fff; font-weight:normal; text-transform:uppercase;
  font-size:20px; line-height:20px; text-align:center;
  letter-spacing:2px; padding:10px; margin:10px 0px;
  background-repeat:no-repeat;
  }
 
  /* Liens Utiles */
 
  .pa-links{ flex-direction:column; align-items:center; justify-content:center; width:100px; }
  .pa-links a{ width:100px; margin: 5px 2px; padding:5px;
  font-size:11px; line-height:13px; font-family: 'Roboto Mono', monospace; text-transform:uppercase;
  display:flex; justify-content:center; align-items:center; text-align:center;}
 
  /* Contexte */
 
 .pa-contexte {    min-width: 315px;    margin: 0px 0px 10px 20px; }
  .pa-contexte span{ display:block; overflow:auto; padding:10px; height:160px; text-align:justify;}
  .pa-contexte a{ padding:3px; font-family: 'Roboto Mono', monospace; font-size:10px; position:relative;top:0px; z-index:2; display:block; }
  .pa-contexte a:after{ content:'>'; padding-left:5px; transition:500ms; }
  .pa-contexte a:hover:after{ padding-left:10px;  }
 
  /* News */
 
  .pa-news{ margin-left:20px ;     min-width: 315px;  }
  .pa-news div{ position:relative; padding:5px; height:110px; overflow:auto; }
  .pa-news img{ max-width:122px; height:200px; object-fit:cover; clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0); position:relative; top:-28px; z-index:1;}
  .pa-news strong{ margin:0; font-family: 'Roboto Mono', monospace; letter-spacing:3px; font-size:9px; }
 
  /* Tops Sites */
 
.pa-top{ display: block; position: relative;    top: -77px;    min-width: 254px;    height: 49px;    margin-left: 20px; padding:12px; }
.pa-top strong{ font-family: 'Roboto Mono', monospace;  letter-spacing:3px; font-size:9px;  line-height:0px;}
  .pa-top span{ text-align:center; display:block; }
  .pa-top a{ font-size:25px; letter-spacing:8px;  }
 
  /* Staff */
 
  .pa-staff{ max-height:77px; }
  .pa-staff img{ width:70px; height:70px; object-fit:cover;  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); -moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);-o-transform: rotate(-15deg);-ms-transform: rotate(-15deg);
transform: rotate(-15deg); display:block; margin:0 auto;}
    .pa-staff div{ width:100px; font-size:9px; line-height:10px; text-align:center; font-family: 'Roboto Mono', monospace; letter-spacing:1px; }
  .pa-staff h3{ margin: 5px 2px; padding:5px;
  font-size:9px; line-height:11px; font-family: 'Roboto Mono', monospace; text-transform:uppercase;
  display:flex; justify-content:center; align-items:center; text-align:center; font-weight:normal; margin-top:-15px; position:relative; z-index:999; letter-spacing:0px; }
.pa-staff em{ font-size:8px;}
  .pa-staff a:hover{ color:#2C4D54; }
 
  /* Partenariats */
 
  .pa-part{  width:300px; height:110px; justify-content:center; margin-top:5px; max-height:63px; position: relative;    max-height: 71px;    top: 11px;}
  .pa-part a{ height:30px; }
  .pa-part img{ width:30px; height:30px; object-fit:cover; transition:500ms; }
  .pa-part img:hover{    filter: brightness(3) ; }
  .pa-part strong{ margin:12px 0px 5px 0px; height:auto; font-family: 'Roboto Mono', monospace;  letter-spacing:3px; font-size:9px;  line-height:0px; display:inline-block; width:100%; text-align:center;}

  /* Crédits */
 
.pa-credits{ width:100%; border:solid 1px; padding:6px; font-size:10px; margin-top:5px;}
 
  /* Membres du mois */
 
  .pa-membres{ margin-top:5px; justify-content:center; flex-wrap:wrap;  font-family: 'Roboto Mono', monospace; width:300px; font-size:10px; }
  .pa-membres h3{ width:100%; margin: 5px 0px 0px 0px; font-size:10px; font-family: 'Roboto Mono', monospace;  letter-spacing:3px; text-align:center; }
  .pa-membres img{ width:70px; height:70px; object-fit:cover; clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }
  .pa-membres div{ margin:0px 10px; position:relative; }
  .pa-membres div span{ transition:500ms; display:block; padding:5px; width:75px; height:75px; text-align:center; position:absolute; top:0px; -moz-transform: scale(0) rotate(-360deg);
-webkit-transform: scale(0) rotate(-360deg);
-o-transform: scale(0) rotate(-360deg);
-ms-transform: scale(0) rotate(-360deg);
transform: scale(0) rotate(-360deg);}
  .pa-membres div:hover span{ -moz-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg); }
  .pa-membres a:hover{ color:#2C4D54; }
 
  /* PVs et Scénarios */
 
  .pa-pv{ margin-left:20px; position:relative; top:-10px; }
  .pa-pv img, .pa-pv a span{ clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);  width:70px; height:70px; }
  .pa-pv img{ object-fit:cover; }
  .pa-pv a{ position:relative; display:block; margin:10px 0px; overflow:hidden;}
  .pa-pv a span{ font-size:10px;  padding:5px; position:absolute; left:-70px; top:0px; display:flex; align-items:center;
  text-align:center; justify-content:center; transition:600ms; }
  .pa-pv a:hover span{ left:0px; color:#2C4D54; }
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="https://fonts.googleapis.com/css?family=Anton|Roboto+Mono&display=swap" rel="stylesheet"><div class="pa-wrapper">
 
  <!-- Message de Bienvenue -->
  <h1>Bienvenue sur le forum</h1><div class="pa-wrapper2"><div class="pa-left">
 
  <!-- Liens utiles -->
  <div class="pa-links">
    <a target="_blank" href="#">Lien</a>
        <a target="_blank" href="#">Lien</a>
        <a target="_blank" href="#">Lien</a>
        <a target="_blank" href="#">Lien</a>
        <a target="_blank" href="#">Lien</a>
        <a target="_blank" href="#">Lien</a>
        <a target="_blank" href="#">Lien</a>
  </div>
  <div class="pa-infos">
    <!-- COntexte -->
    <div class="pa-contexte">
      <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula lorem sed ligula maximus tincidunt. Suspendisse sed malesuada ante. Praesent elementum mi et turpis ultrices facilisis nec et nibh. Morbi eu enim sapien. Nam auctor sem vitae est molestie semper. Praesent ac viverra nunc. Nulla pulvinar vehicula laoreet. Suspendisse potenti. Phasellus augue dolor, accumsan ac pellentesque nec, pharetra blandit velit. Integer at mauris eros. Ut interdum cursus nisi, sed gravida nibh ultricies ut. Nulla quis ex non ex fermentum euismod et eget nisi. Maecenas ultrices justo risus, nec dictum velit fringilla at. Cras eu nunc eget elit luctus mattis. Sed vel nisi felis. Vestibulum at mauris enim.

Pellentesque nec tellus vel arcu posuere egestas id venenatis turpis. Integer est nisi, elementum nec eros sit amet, vulputate mattis sem. Pellentesque posuere ac ligula nec scelerisque. Suspendisse fringilla libero enim. Etiam quis rhoncus metus. Proin nisi magna, pellentesque sed vehicula nec, suscipit in nibh. Sed rhoncus a tortor at ullamcorper. Morbi dapibus, augue vel ultricies semper, massa nisi varius enim, nec porttitor neque dui a dolor. Aliquam eget fermentum lacus.

Pellentesque tincidunt enim et elit varius, ac convallis ante lobortis. Quisque placerat mauris non purus mollis, ultricies venenatis erat luctus. Nulla porttitor quis eros id porttitor. Praesent cursus massa sed ex dictum, eu gravida sem fringilla. Vestibulum viverra quam ac consectetur interdum. Aliquam erat volutpat. Curabitur nunc arcu, fermentum varius commodo eget, pulvinar eget sem. Proin aliquet ornare quam, eu porta metus vehicula nec. Nunc venenatis imperdiet nunc, in condimentum mi iaculis sed. Suspendisse eget sollicitudin nunc, nec euismod massa. Nulla ultricies felis eget sodales efficitur.
      </span>
      <a target="_blank" href="#">la suite du contexte est par ici</a>
    </div>
  <!-- Nouveautés -->
    <div class="pa-news">
      <div>
        <strong>00/00/0000 :</strong> Nouveautées
      </div>
      <!-- Image à côté des nouveautés -->
      <img src="https://66.media.tumblr.com/705ce1c26fa0fa39aa471106b9b5afc7/tumblr_pxq75zFVCl1xe64cko1_400.gifv">
    </div>
      <!-- Tops sites -->
    <div class="pa-top">
      <strong>Votez pour le forum</strong><br>
        <span><a target="_blank" href="#">:spades:</a>
       <a target="_blank" href="#">:spades:</a>
          <a target="_blank" href="#">:spades:</a>
      </span>
    </div>
  </div>
  </div>
        <!-- Staff -->
  <div class="pa-right">
    <div class="pa2-infos">
    <div class="pa-staff">
      <div><img src="http://68.media.tumblr.com/6a3475ca1a9712c0d4d025fa1137dfa5/tumblr_n3s51aHp4y1qgtanjo1_r3_250.gif"><h3>Prénom Nom</h3>
        <a target="_blank" href="#">MP</a> -
        <a target="_blank" href="#">Profil</a><br>
        <em>DC : /</em></div>
      <div><img src="http://68.media.tumblr.com/6a3475ca1a9712c0d4d025fa1137dfa5/tumblr_n3s51aHp4y1qgtanjo1_r3_250.gif"><h3>Prénom Nom</h3>
        <a target="_blank" href="#">MP</a> -
        <a target="_blank" href="#">Profil</a><br>
        <em>DC : /</em></div>
              <div><img src="http://68.media.tumblr.com/6a3475ca1a9712c0d4d025fa1137dfa5/tumblr_n3s51aHp4y1qgtanjo1_r3_250.gif"><h3>Prénom Nom</h3>
        <a target="_blank" href="#">MP</a> -
        <a target="_blank" href="#">Profil</a><br>
        <em>DC : /</em></div>
      </div>
        <!-- Partenaires -->
        <div class="pa-part">
          <strong>Nos amis</strong>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
          <a target="_blank" href="http://www.pub-rpg-design.com/"><img src="https://i.servimg.com/u/f30/19/45/51/53/gpasle10.png"></a>
            </div>
            <!-- Crédits -->
              <div class="pa-credits">
                 PA : KoalaVolant
                  </div> <!-- Fin PA- Credits -->
            <!-- Membres du mois -->
                <div class="pa-membres"><h3>Nos membres du mois</h3>
          <div><img src="https://i.servimg.com/u/f30/19/45/51/53/tumblr10.gif"><span>Prénom Nom<br>
          <a target="_blank" href="#">MP</a><br>
          <a target="_blank" href="#">Profil</a></span>
            </div>
          <div><img src="https://i.servimg.com/u/f30/19/45/51/53/tumblr10.gif"><span>Prénom Nom<br>
          <a target="_blank" href="#">MP</a><br>
          <a target="_blank" href="#">Profil</a></span>
            </div>
              </div><!-- Fin PA Membres du mois ->
                </div> <!-- Fin PA2 Infos -->
              </div> <!-- Fin PA -right -->
                <div class="pa-pv">
                  <a target="_blank" href="#"><img src="https://i.servimg.com/u/f30/19/45/51/53/asaico10.gif"><span>PV<br>Nom</span></a>
                                  <a target="_blank" href="#"><img src="https://i.servimg.com/u/f30/19/45/51/53/asaico10.gif"><span>PV<br>Nom</span></a>
                  <a target="_blank" href="#"><img src="https://i.servimg.com/u/f30/19/45/51/53/asaico10.gif"><span>PV<br>Nom</span></a>
                                      <a target="_blank" href="#"><img src="https://i.servimg.com/u/f30/19/45/51/53/asaico10.gif"><span>PV<br>Nom</span></a>
                                                          <a target="_blank" href="#"><img src="https://i.servimg.com/u/f30/19/45/51/53/asaico10.gif"><span>PV<br>Nom</span></a>
                    </div>
                    </div></div>
                </div>

Ensuite, sur la page d'accueil en elle même vous pourrez y mettre cet iframe avec le lien vers la page HTML où il y a la page d'accueil :

Code:

<iframe width="900" frameborder="0" src="LIENDUFORUM" height="500"></iframe>