KoalaVolant

Lun 6 Juin 2022 - 13:18

Cette page d'accueil a été fait pour une commande Smile

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">  <div class="pafow-bienvenue">Bienvenue sur Cosmos Island {USERNAME}</div>  <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>  <div class="pafow-deuxcol">  <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>  <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>  <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>  <img src="https://64.media.tumblr.com/4196600edf389c2083d51e7940150067/8c4f8474f97bf9e0-19/s540x810/bb85c5e12da2dd4a77ee6fcca264d8b2b66ca270.gif" class="pafow-img"/>  <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>  <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> <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>  </div>  <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>  </div>