KoalaVolant
Ven 18 Juin 2021 - 21:45
Ce code fait partie du thème complet "Simple Harry Potter"
N'oubliez pas de mettre un crédit.
- C'est une page d'accueil en iframe.
- Il faut donc rajouter le code HTML dans Modules > Pages HTML
- Et ensuite mettre le lien de la page dans la page d'accueil sous forme d'iframe.
- Je ne cautionne toujours pas les propos de J.K Rowling, si jamais vous vous demandiez.
Iframe
- Code:
<iframe src=" https://mythicsrebirth.forumgratuit.org/h9-pa-impedimenta" style="width: 811px; height: 400px;" marginheight="0" scrolling="no" frameborder="0"></iframe>
HTML
- Code:
<style>
/* Couleurs */
/* Liens */
.paimp a{ color:#222; text-decoration:none; font-family: 'Playfair Display', serif; font-size:13px; }
/* Bordure blanche */
.pastaff img, .pascenar a{ border:2px solid white; }
/* Staff */
.pastaff span div{ background-color:#FBFBFB; }
.staff-bloc strong{ color:#92DFEF; font-weight:normal; }
.staff-bloc em{ background-color:#ECC427; color:#fff; }
.staff-bloc a{ color:#888; }
/* Bienvenue */
.pabienvenue strong{ border-bottom:1px solid #ACACAC; color:#ECC427;}
.pabienvenue em{ color:#92dfef; }
.pabienvenue div strong{ background-color:#fff; color:#222; }
/* Contexte */
.pacontexte{ background-color:#F1F4EF; color:#555; }
.pacontexte h2, .pamembre h2{ background-color:#92dfef; color:#fff; }
/* Liens utiles */
.pafastlink a{ background-color:#F1F4EF; color:#92dfef; }
.pafastlink a strong{ color:#ECC427; }
/* Membre du mois */
.pamembre a span{ background-color: rgba(255, 255, 255, 0.8);; color:#222; }
/* Partenaires */
.pabaspart div{ background-color:#F1F4EF; }
.pabaspart h3{ color:#92dfef; }
.pabaspart h3 strong{ color:#ECC427; }
/* Structure */
.paimp{ width:800px; padding:10px; background-color:#FBFBFB; }
.paimp *{ box-sizing:border-box; }
.pahaut{ display:flex; justify-content:space-between; width:773px; }
.pamiddle{ display:flex; justify-content:space-between; width:773px; }
.pastaff, .pacontexte{ width:275px; }
.pabienvenue{ width:200px; }
/* Staff */
.pastaff{ width:267px; height:99px !important; position:relative; }
.pastaff span{ display:block; }
.pastaff img{ width:218px; max-width:218px; height:40px; object-fit:cover; }
.staff-h{ position:absolute; top:0; left:0; }
.staff-b{ position:absolute; bottom:-55px; left:0; }
.staff-d{ position:absolute; width:48px !important; max-width:48px !important; height:154px !important; right:0; top:0;}
.pastaff > span div{ width:211px; height:53px; position:absolute; top:45px; left:0; text-align:center; padding:5px; }
.pastaff .staff-2, .pastaff .staff-3{ display:none; }
.pastaff .staff-1{ z-index:15; }
.pastaff .staff-2{ z-index:25; }
.pastaff .staff-3{ z-index:35; }
.pastaff .staff-h2:hover .staff-2{ display:block; }
.pastaff .staff-h3:hover .staff-3{ display:block; }
/* Bloc staff */
.staff-bloc {font-size:13px; }
.staff-bloc strong{ text-transform:uppercase; font-family: 'Playfair Display SC', serif; }
.staff-bloc em{ padding:1px; text-transform:uppercase; font-family: 'Playfair Display SC', serif; font-size:11px; padding:0px 5px;
margin-top:1px; display:inline-block; font-style:normal; }
.staff-bloc a{ text-decoration:none; font-family:Verdana; font-size:11px; }
/* Bienvenue */
.pabienvenue{ font-family: 'Playfair Display', serif; font-size:28px; text-align:center; text-transform: lowercase;}
.pabienvenue strong{ display:block; padding-bottom:2px; font-weight:normal; }
.pabienvenue em{ display:block; padding-bottom:2px; font-style:normal; }
.pabienvenue div{ width:200px; display:flex; justify-content:space-between; font-size:11px; position:relative; }
.pabienvenue div span strong{ -moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
transition:500ms; }
.pabienvenue div span:hover strong{ -moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.pabienvenue div img{ width:42px; }
.pabienvenue div strong{ border:none; padding:5px; font-family:Verdana; position:absolute; width: 42px; top: 15px; font-size: 9px; }
/* Contexte */
.pacontexte{ padding:5px;font-size:12px; font-family:Verdana; font-size:11px; line-height:13px; max-height:150px; text-align:justify; overflow:auto; }
.pacontexte h2{ margin:0; display:inline-block; text-transform:uppercase; font-family: 'Playfair Display SC', serif; font-size:11px; }
/* Scénario */
.pascenar{ width:275px; display:flex; justify-content:center; flex-wrap:wrap; height: 175px; padding: 15px 0px;}
.pascenar a{ position:relative; margin: 0px 10px; border-width:3px; }
.pascenar img, .pascenar a span, .pascenar a{ width:50px; height:50px; display:block;}
.pascenar img, .pascenar a span, .pascenar a{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.pascenar img{ z-index:8; object-fit:cover;}
.pascenar a span{ z-index:13; display: block; font-size:12px; line-height:50px; text-align:center; position: absolute;top: 0; background-color: #fff; -moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
transition:500ms;}
.pascenar a:hover span{ -moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
/* Liens Utiles */
.pafastlink{ width:200px; margin-top:10px; display: flex;justify-content: center;flex-wrap: wrap; align-items: flex-start;}
.pafastlink a{ width:80%; margin:0 auto; display:block; text-align:center; padding:5px; font-size:15px; }
/* Membre du mois */
.pamembre{ width:275px; display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
.pamembre h2{ width:100%; text-transform:uppercase; font-family: 'Playfair Display SC', serif; font-size:11px; text-align:center; }
.pamembre a{ position:relative; display:block; }
.pamembre img{ display:block; width:75px; height:120px; margin:0px 3px; object-fit:cover; }
.pamembre a span{ display:block; width:78px; height:120px; font-size:12px; line-height:120px; text-align:center; font-family:Verdana; position:absolute; top:0; left:0;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
transition:500ms;}
.pamembre a:hover span{ -moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
/* Partenaire */
.pabaspart{ display:flex; justify-content:space-between; flex-wrap:wrap; width:800px; }
.pabaspart h3{ width:100%; text-transform:uppercase; font-family: 'Playfair Display SC', serif; font-size:13px; margin:0; }
.pabaspart div{ padding:3px; width:100%;
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Playfair+Display+SC&display=swap" rel="stylesheet">
<div class="paimp">
<!-- HAUT DE LA PA -->
<div class="pahaut">
<!-- STAFF -->
<div class="pastaff">
<span class="staff-h1"><img src="https://i.servimg.com/u/f83/15/29/33/88/kit_ro11.png" class="staff-h"><div class="staff-bloc staff-1">
<strong>Nom Prenom</strong><br>
<em>Fondatrice</em><br>
<a href="">profil</a> - <a href="">mp</a>
</div></span>
<span class="staff-h2"> <img src="https://i.servimg.com/u/f83/15/29/33/88/kit_en10.png" class="staff-b"> <div class="staff-bloc staff-2">
<strong>Nom Prenom</strong><br>
<em>Fonda</em><br>
<a href="">profil</a> - <a href="">mp</a>
</div></span>
<span class="staff-h3"><img src="https://nsa40.casimages.com/img/2020/10/01/201001011520579855.png" class="staff-d">
<div class="staff-bloc staff-3">
<strong>Nom Prenom</strong><br>
<em>Fondatr</em><br>
<a href="">profil</a> - <a href="">mp</a>
</div></span>
</div>
<!-- FIN DU STAFF -->
<!-- BIENVENUE -->
<div class="pabienvenue"><strong>Bienvenue sur</strong><em>impedimenta</em>
<div>
<span><img src="https://media.discordapp.net/attachments/716934528077135933/773152471093870602/rouge.png"><strong>1000 pts</strong></span>
<span><img src="https://media.discordapp.net/attachments/716934528077135933/773152495350054912/jaune.png"><strong>1000 pts</strong></span>
<span><img src="https://media.discordapp.net/attachments/716934528077135933/773152533106524160/bleu.png"><strong>1000 pts</strong></span>
<span><img src="https://media.discordapp.net/attachments/716934528077135933/773152552874541056/vert.png"><strong>1000 pts</strong></span>
</div>
</div>
<!-- FIN BIENVENUE -->
<!-- CONTEXTE -->
<div class="pacontexte"><h2>Contexte</h2>
<span>Décembre 2021 : Malgré les craintes de l'Angleterre suite au traumatisme laissé par la seconde guerre des sorciers, le ministre de la magie Kingsley Shackelbolt a tout de même décidé d'organiser deux grands événements. L'écosse accueillera bel et bien la coupe du monde de Quiddich l’an prochain ainsi que le tournoi des trois sorciers. Une bonne ou une mauvaise nouvelle ? En parallèle, Poudlard est en émoi suite à l’annonce d’un tournoi inter-maison. Chacune d’entre elles, a d’ores et déjà trouvé leur champion. Ces derniers vont s’affronter dans quatre épreuves qui mettront à rude épreuve leurs talents académiques et les valeurs de leurs maisons. Pour certains, c'est un bon moyen de tourner la page, pour d'autres, une inquiétude peut être justifiée car toute paix n'est jamais définitive. Une nouvelle menace reviendra-t-elle troubler le monde magique après autant d’années ? Et quand est-il des descendants des quatre fondateurs de l'école ? Peuvent-ils aider ?
<br><a href="https://impedimenta.forumactif.org/t2872-le-contexte-d-impedimenta">Suite</a></span>
</div>
<!-- FIN CONTEXTE -->
</div>
<!-- FIN HAUT -->
<!-- MILIEU -->
<div class="pamiddle">
<!-- SCENARIOS -->
<div class="pascenar">
<a href=""><img src="https://2img.net/h/pa1.narvii.com/6920/909ebe568ba0e79e2acc91272e3701ee5f371808r1-245-245_00.gif"><span>Infos</span></a>
<a href=""><img src="https://2img.net/h/pa1.narvii.com/6920/909ebe568ba0e79e2acc91272e3701ee5f371808r1-245-245_00.gif"><span>Infos</span></a>
<a href=""><img src="https://2img.net/h/pa1.narvii.com/6920/909ebe568ba0e79e2acc91272e3701ee5f371808r1-245-245_00.gif"><span>Infos</span></a>
<a href=""><img src="https://2img.net/h/pa1.narvii.com/6920/909ebe568ba0e79e2acc91272e3701ee5f371808r1-245-245_00.gif"><span>Infos</span></a>
<a href=""><img src="https://2img.net/h/pa1.narvii.com/6920/909ebe568ba0e79e2acc91272e3701ee5f371808r1-245-245_00.gif"><span>Infos</span></a>
<a href=""><img src="https://2img.net/h/pa1.narvii.com/6920/909ebe568ba0e79e2acc91272e3701ee5f371808r1-245-245_00.gif"><span>Infos</span></a>
</div>
<!-- FIN SCENARIOS -->
<!-- LIENS RAPIDES -->
<div class="pafastlink">
<a href="">lien <strong>rapide</strong></a>
<a href="">lien <strong>rapide</strong></a>
<a href="">lien <strong>rapide</strong></a>
<a href="">lien <strong>rapide</strong></a>
</div>
<!-- FIN LIEN RAPIDES -->
<!-- MEMBRE DU MOIS -->
<div class="pamembre">
<h2>Nos membres du mois</h2>
<a href=""><img src="https://nsm09.casimages.com/img/2020/10/10//shv1Kb-ChrisPratt15.jpg"><span>Infos</span></a>
<a href=""><img src="https://nsm09.casimages.com/img/2020/10/10//shv1Kb-ChrisPratt15.jpg"><span>Infos</span></a>
<a href=""><img src="https://nsm09.casimages.com/img/2020/10/10//shv1Kb-ChrisPratt15.jpg"><span>Infos</span></a>
</div>
<!-- FIN MEMBRES DU MOIS -->
</div>
<!-- FIN DU MILIEU -->
<!-- BAS AVEC PARTENARIAT -->
<!-- PARTENARIATS -->
<div class="pabaspart"><h3>Nos <strong>amis</strong></h3>
<div>
<marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="4" direction="left" width="780px"> <a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
<a href=""><img src="https://www.zupimages.net/up/20/40/oe9d.png"></a>
</marquee>
</div>
</div>
<!-- FIN DE LA PA -->
</div>
|
|
|
