PA#8

Messages : 181 Date d'inscription : 02/06/2020 Age : 30

PA

/ ! \ Ce code est une page HTML. Vous devez créer une page HTML en version avancée. Et pour toutes modifications, il faudra utiliser les 3 écrous, sans quoi le code risque de ne pas fonctionner.

◈ Rendu en ligne ◈
Vous pouvez la découvrir en 2 versions :
1ère version ◈ 2ème version

◈ Petit rendu en image ◈

A savoir sur cette PA

◈ Le crédit est à mentionner dans votre sujet des crédits. Merci d'utiliser ce code

Code:: <a href="https://tourmaline.forumactif.com/" target="_blank">PA réalisée par Loukoum</a>

Dans le cas où vous n'avez pas de sujet, l'emplacement en bas à droite sera parfait pour afficher que la PA est de moi, avec le même code !
◈ La largeur maximale de cette PA est de 775px, l'iframe est programmé à 790px pour pouvoir l'accueillir correctement. La hauteur elle est de 550px.
◈ 7 emplacements pour les liens de navigation rapide.
◈ Encadré des nouveautés avec overflow au survol.
◈ Partenaires cachés derrière un petit symbole.
◈ Encadré de contexte avec un overflow au survol.
◈ Vous avez entre 1 place et 5 places pour le staff. Avec affichage des MCs en image.
◈ 10 places sont possibles pour les scénarios.
◈ Encadré "A découvrir" vous permet d'obtenir autant de slides que vous le souhaitez.
◈ Le cadre des crédits / informations importantes n'a pas d'overflow. A vous de bien gérer le contenu.
◈ Vous pouvez modifier : les couleurs, le style d'écriture et le contenu.
◈ Si jamais vous avez besoin un soucis ou besoin de modifications, c'est par ici que je m'occuperai de vous !

Le code

Merci à vous de l'utiliser !
Voici le code a mettre dans votre page HTML !

Code:: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
/*----------------------------*/
/*----Apparence des liens-----*/
/*----------------------------*/
a:visited, a:link { /*-----Général-----*/
text-decoration: none !important;
color: #606F50;
transition: 1s;
}

a:hover { /*-----Au survol-----*/
color: #552D45;
transition: 1s;
}

/*----------------------------*/
/*-Apparence de la scrollbare-*/
/*----------------------------*/
::-webkit-scrollbar { /*-----Taille-----*/
width: 5px;
}

::-webkit-scrollbar-track { /*-----Fond-----*/
background: #552D45;
}

::-webkit-scrollbar-thumb { /*-----Couleur de l'ascenseur-----*/
background: #606F50;
}

::-webkit-scrollbar-thumb:hover { /*-----Couleur de l'ascenseur au survol-----*/
background: #FBD4E9;
}

.fond { /*-----Fond de la Page d'Accueil---*/
width:775px;
height:500px;
background-color:#552D45; /*MODIFIABLE*/
background-image: url("https://www.transparenttextures.com/patterns/subtle-white-feathers.png"); /*MODIFIABLE*/
}

/*----------------------------*/
/*----Elements modifiables----*/
/*----------------------------*/

/*-----Les titres-----*/
.titre {
font-family: 'Fleur De Leah', cursive;
font-size:20px;
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align:center;
}

.news d, .bullestaff d, .contenu_onglet d, .slidetexte d {
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
padding:2px 5px;
letter-spacing:1px;
color:#FFFFFF;
font-size:12px;
}

.contenu_onglet b {
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/*-----Les blocs-----*/
.liens, .news, .partenaires, .contexte, .staff, .scenarios, .infos, .credits {
background-color:#FFFFFF;
color:#552D45;
font-family: 'Marcellus', serif;
font-size:12px;
text-align:justify;
}

/*-----Les liens-----*/
.lien1, .lien2:hover { /*-----Normal-----*/
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
}

.lien1:hover, .lien2 { /*-----Au survol-----*/
background-image: linear-gradient(to right, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
}

.lien1 a, .lien2 a { /*-----Couleur du lien-----*/
color:#FFFFFF;
}

/*----------------------------*/
/*--Ne rien toucher après !!!-*/
/*----------------------------*/

.liens {
position:relative;
top:10px;
left:10px;
width:135px;
height:170px;
padding:2px 5px;
}

.lien1, .lien2 {
display:block;
font-size:12px;
margin-top:5px;
margin-bottom:9px;
text-align:center;
letter-spacing:2px;
}

.news {
position:relative;
top:20px;
left:10px;
width:135px;
height:230px;
padding:2px 5px;
}

.newstexte {
height:200px;
overflow:hidden;
}

.newstexte:hover, .contextetexte:hover {
overflow:auto;
padding-right:5px;
}

.partenaires {
position:relative;
top:30px;
left:10px;
width:135px;
height:50px;
padding:2px 5px;
text-align:center;
}

.contexte {
position:relative;
top:-451px;
left:165px;
width:295px;
height:275px;
padding:2px 5px;
}

.contextetexte {
height:240px;
overflow:hidden;
}

.staff {
position:relative;
top:-441px;
left:165px;
width:295px;
height:188px;
padding:2px 5px;
text-align:center;
}

.staff img {
width:56px;
height:56px;
border-radius:100px;
object-fit:cover;
}

.bulleTiti, .bullePhil, .bullePaul, .bulleMaddi, .bulleSeth {
display: inline-block;
}

.bulleTiti > div, .bullePhil > div, .bullePaul > div, .bulleMaddi > div, .bulleSeth > div {
position: absolute;
opacity: 0;
visibility: hidden;
background-color: #FFFFFF;
width:290px;
height:90px;
padding:5px;
}

.bulleTiti:hover > div, .bullePhil:hover > div, .bullePaul:hover > div, .bulleMaddi:hover > div, .bulleSeth:hover > div {
opacity: 1;
visibility: visible;
}

.bulleTiti {
margin-top: 0px;
margin-left: 0px;
}

.bullePhil:hover > div {
margin-top: 0px;
margin-left: -60px;
}

.bullePaul:hover > div {
margin-top: 0px;
margin-left: -120px;
}

.bulleMaddi:hover > div {
margin-top: 0px;
margin-left: -180px;
}

.bulleSeth:hover > div {
margin-top: 0px;
margin-left: -240px;
}

.bullestaff {
font-size:10px;
}

.bullestaff img {
width:38px;
height:38px;
object-fit:cover;
border-radius:100px;
}

.scenarios {
position:relative;
top:-921px;
left:480px;
width:275px;
height:235px;
padding:5px;
}

.onglet {
cursor:pointer;
font-family:'Indie Flower';
font-size: 15px;
text-align: center;
text-shadow : 1px 1px 0px #2F4031;
}

.onglet_0{background:transparent;}

.onglet_1{background:transparent;}

.contenu_onglet {
display:none;
text-align: center;
width: 275px;
height: 100px;
font-size: 12px;
overflow:auto;
}

.onglets img {
width:50px;
height:50px;
object-fit:cover;
border-radius:100px;
}

.onglettexte {
text-align:justify;
font-size:10px;
}

.infos {
position:relative;
top:-911px;
left:480px;
width:275px;
height:150px;
padding:5px;
}

/* Permet de cacher les input (apparait sous forme radio sinon) */
#slideshow input {
display: none;
}

/* Création du slideshow (contour) */
#slideshow {
position: relative;
width: 280px;
height: 140px;
}

/* Conteneur de inner et de tous les slides, permet d'afficher un seul slide à la fois. */
#slides {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 275px;
height: 140px;
background-position: center center;
overflow: hidden;
}

/* Conteneur de tous les slides */
#slides .inner {
width: 700%;
}

/* Mise en forme des slides */
#slides .a_slide {
position: relative;
width: 275px;
height: 140px;
float: left;
}

/* Déplacement des slides */
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#slide6:checked ~ #slides .inner { margin-left:-500%; }
#slide7:checked ~ #slides .inner { margin-left:-600%; }

/* Mise en place de l'élément contenant les flèches */
#controls {
position: absolute;
top: 120px;
left: 0;
z-index: 0;
width: 100%;
height: 50px;
}

/* On met les labels à la bonne taille et on les cache */
#controls label {
display: none;
width: 15px;
height: 15px;
opacity: 0.3;
transition: all ease-out 0.2s;
}

/* Effet au passage de la souris sur les flèches */
#controls label:hover {
opacity: 0.8;
transition: all ease-out 0.2s;
}

/* Mise en place de la flèche vers le slide suivant */
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5),
#slide5:checked ~ #controls label:nth-child(6),
#slide6:checked ~ #controls label:nth-child(7),
#slide7:checked ~ #controls label:nth-child(1) {
background: url('https://www.zupimages.net/up/22/01/hyud.png') no-repeat;
background-size:15px 15px;
/*background-color:#970800;
border-radius:100%;*/
float: right;
margin: 18px 0px 0 0;
display: block;
transform: rotate(90deg);
}

/* Mise en place de la flèche vers le slide précédent */
#slide1:checked ~ #controls label:nth-child(7),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4),
#slide6:checked ~ #controls label:nth-child(5),
#slide7:checked ~ #controls label:nth-child(6) {
background: url('https://www.zupimages.net/up/22/01/hyud.png') no-repeat;
background-size:15px 15px;
/*background-color:#970800;
border-radius:100%;*/
float: left;
margin: 18px 0 0 0px;
display: block;
transform: rotate(-90deg);
}

/* Animation slides */
#slides .inner {
-webkit-transform: translateZ(0);
transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.slidetexte {
height:110px;
overflow:hiden;
}

.slidetexte2 {
height:140px;
overflow:hiden;
}

.slidetexte:hover, .slidetexte2:hover {
overflow:auto;
padding-right:5px;
}

.progress-barPhilipp, .progress-barAndrei, .progress-barAnti, .progress-barNeutre {
width: 90px;
height: 14px;
padding: 4px;
}

.progress-barPhilipp:before {
content: '';
display: block;
position: absolute;
width: 0px;
height: 5px;
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}

.progress-barAndrei:before {
content: '';
display: block;
position: absolute;
width: 0px;
height: 5px;
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}

.progress-barAnti:before {
content: '';
display: block;
position: absolute;
width: 5px;
height: 5px;
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}

.progress-barNeutre:before {
content: '';
display: block;
position: absolute;
width: 0px;
height: 5px;
background-image: linear-gradient(to left, #552d45, #67383b, #6c4a36, #695d3c, #606f50);
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}

.imgquid {
width:46%;
}

.credits {
position:relative;
top:-901px;
left:480px;
width:275px;
height:45px;
padding:5px;
font-size:10px;
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Marcellus&display=swap" rel="stylesheet" />
<div class="fond">
<div class="liens">
<div class="lien1"><a href="https://repellomuggletum.forumactif.com/t2-reglement#2" target="_blank">Ϟ Règlement Ϟ</a></div>
<div class="lien2"><a href="https://repellomuggletum.forumactif.com/t4-annexe-1-chronologie#4" target="_blank">Ϟ Chronologie Ϟ</a></div>
<div class="lien1"><a href="https://repellomuggletum.forumactif.com/t5-annexe-2-les-ecoles-l-orphelinat#5" target="_blank">Ϟ Ecoles Ϟ</a></div>
<div class="lien2"><a href="https://repellomuggletum.forumactif.com/t6-annexe-3-tour-du-monde-des-metiers#13" target="_blank">Ϟ Métiers Ϟ</a></div>
<div class="lien1"><a href="https://repellomuggletum.forumactif.com/t9-annexe-6-les-pozhiratelis#44" target="_blank">Ϟ Pozhiratelis Ϟ</a></div>
<div class="lien2"><a href="https://repellomuggletum.forumactif.com/t10-annexe-2-bottin-des-avatars#45" target="_blank">Ϟ Avatars Ϟ</a></div>
<div class="lien1"><a href="https://repellomuggletum.forumactif.com/h3-scenarios" target="_blank">Ϟ Scénarios Ϟ</a></div>
</div>
<div class="news">
<div class="titre">
La Gazette
</div>
<div class="newstexte">
<d>07/03/2022</d> Les Gryffondors remportent leur match contre les Poufsouffle. En route maintenant pour Beauxbatons et le match Félins d'Or / Loups d'Argent.<br/>
<d>28/02/2022</d> Découvrez les petites nouveautés de notre MAJ mensuelle <a href="https://repellomuggletum.forumactif.com/t642-nouveautes-des-maj#61030" target="_blank">juste ici</a>. Et n'oubliez pas que vous pouvez commenter <a href="https://repellomuggletum.forumactif.com/t588p25-nouveautes-des-maj-topic-destine-a-vos-commentaires#61031" target="_blank">par là</a>.<br/>
<d>25/02/20222</d> Les soldes sont de retour dans les boutiques ! Profitez de 28% de réduction. Rendez-vous dans les sujets : <a href="https://repellomuggletum.forumactif.com/t1393-printemps-2135-guerre-des-camps#60841" target="_blank">guerre des camps</a>, <a href="https://repellomuggletum.forumactif.com/t1063-boutique-nouvelles-cartes-cartes-personnalisees#60842" target="_blank">chocogrenouilles</a>, <a href="https://repellomuggletum.forumactif.com/t1246p50-les-sortileges#60843" target="_blank">sortilèges</a>, <a href="https://repellomuggletum.forumactif.com/t1245-depensez-vos-pis#60844" target="_blank">dépenser vos PIs</a>.<br/>
<d>21/02/2022</d> Les Félins d'Or remportent leur match contre les Renards de Fer. En route maintenant pour Durmstrang et le match Voda / Zemlya !<br/>
<d>14/02/2022</d> Serpentard a remporté son match contre Serdaigle. Partons désormais pour Beauxbatons et le match Félins d'Or VS Renards de Fer !<br/>
</div>
</div>
<div class="partenaires">
<div class="titre">
Portoloins
</div>
<a href="https://resurrectionhp.forumactif.com/" target="_blank">Ϟ</a>
<a href="https://famouslastwords.forumactif.com/" target="_blank">Ϟ</a>
<a href="https://hogwartsfamily.forumactif.org/" target="_blank">Ϟ</a>
<a href="https://wildkingdom.forumactif.com/" target="_blank">Ϟ</a>
<a href="https://veritaserum.forumactif.com/" target="_blank">Ϟ</a>
<a href="https://yonggak-high-school.forumactif.com/" target="_blank">Ϟ</a>
<a href="https://beyond-our-realm.forumactif.com/" target="_blank">Ϟ</a>
<a href="https://croisee-des-chemins.forumactif.com/" target="_blank">Ϟ</a>
<a href="https://earth-asf.forumactif.com/" target="_blank">Ϟ</a>
</div>
<div class="contexte">
<div class="titre">
Printemps 2135
</div>
<div class="contextetexte">
La nouvelle année fut riche en nouvelles, bonnes ou mauvaises ? Cela ne dépend que de votre sang…<br/>
<br/>
Que vous soyez Pozhiratelis, résistants, étudiants ou moldus, soyez rassurés ! En effet, comme précédemment annoncé, un Maitre en Potion plus ou moins inconnu a su purifier l’eau potable, vous pouvez donc boire sans modération et sans prendre le risque de subir un effet secondaire peu agréable.<br/>
<br/>
Parmi les Pozhiratelis, l’ambiance est à l’orage, les deux têtes pensantes sont en conflit mais aucune information n’a filtré à ce sujet…<br/>
<br/>
Et cette querelle interne semble faire la joie de la résistance, un petit groupe de rebelles qui tentent de renverser le gouvernement actuel pour mettre fin à la dictature des Pozhiratelis. Ces derniers se sont mis à la recherche des différentes failles qui apparaissent aléatoirement dans le dôme afin de prendre contact avec le reste du monde. Certains membres ont récemment infiltré le zoo de la Grande Ville Marchande et ont libéré la centaine de créatures s’y trouvant, lâchant manticores, erklings, eruptifs et autres focifères, dans les rues d’Europe.<br/>
<br/>
Les terroristes se sont volatilisés dans la nature et le Secrétariat s’est activement lancé à leur recherche pour les traduire en justice. Quant aux animaux fantastiques, désormais en liberté, il est conseillé à la population de ne pas s’en approcher et de prendre contact le plus rapidement possible avec le Secrétariat des Êtres.<br/>
<br/>
La magnifique saison qu’est le printemps s’annonce des plus palpitante et pourrait bien marquer un tournant inattendu…
</div>
</div>
<div class="staff">
<div class="titre">
L'élite des sorciers
</div>
<div class="bulleTiti">
<img src="https://pbs.twimg.com/media/EtaNVG6WgAITQrN.jpg" />
<div class="bullestaff">
<d>Ϟ Tiphaine V. Retrac Ϟ</d><br/><div style="height:2px;"></div>
<i>Alias Loukoum, Fondatrice</i> Ϟ <a href="" target="_blank">Hibou</a> Ϟ <a href="" target="_blank">Profil</a> Ϟ<br/>
Autres visages<br/>
Babylon Ϟ Emily Ϟ Connor Ϟ Hawke Ϟ Darko Ϟ Ludmila Ϟ Il kwon
<img src="https://i.servimg.com/u/f47/19/09/85/47/baby112.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/emily210.png" />
<img src="https://pbs.twimg.com/profile_images/1293042805670064128/eOXPOwYg_400x400.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/hawke110.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/darko211.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/ludmil11.jpg" />
<img src="https://thumb.intipseleb.com/media/frontend/thumbs3/2021/02/16/602ba6b3ac2a4-choi-siwon_663_372.jpeg" />
</div>
</div>
<div class="bullePhil">
<img src="https://i.servimg.com/u/f47/19/09/85/47/philip13.jpg" />
<div class="bullestaff">
<d>Ϟ Philipp Von Roppelt Ϟ</d><br/><div style="height:2px;"></div>
<i>Alias Bounty, Fondateur</i> Ϟ <a href="" target="_blank">Hibou</a> Ϟ <a href="" target="_blank">Profil</a> Ϟ<br/>
Pas d'autres visages
</div>
</div>
<div class="bullePaul">
<img src="https://i.servimg.com/u/f47/19/09/85/47/paul110.png" />
<div class="bullestaff">
<d>Ϟ Paul A. Roy Ϟ</d><br/><div style="height:2px;"></div>
<i>Alias Pitch, Fondatrice</i> Ϟ <a href="" target="_blank">Hibou</a> Ϟ <a href="" target="_blank">Profil</a> Ϟ<br/>
Autres visages<br/>
Sydney Ϟ Timaël Ϟ Charlie Ϟ Margot<br/>
<img src="https://i.servimg.com/u/f47/19/09/85/47/syd310.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/tim111.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/charli16.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/margot14.jpg" />
</div>
</div>
<div class="bulleMaddi">
<img src="https://i.servimg.com/u/f47/19/09/85/47/mady210.jpg" />
<div class="bullestaff">
<d>Ϟ Maddison L. Jones Ϟ</d><br/><div style="height:2px;"></div>
<i>Alias Nougat, Fondatrice</i> Ϟ <a href="" target="_blank">Hibou</a> Ϟ <a href="" target="_blank">Profil</a> Ϟ<br/>
Autres visages<br/>
Nikita Ϟ Thomas Ϟ Lovely<br/>
<img src="https://i.servimg.com/u/f47/19/09/85/47/nikita15.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/thomas14.jpg" />
<img src="https://i.servimg.com/u/f47/19/09/85/47/lovely13.jpg" />
</div>
</div>
<div class="bulleSeth">
<img src="https://www.zupimages.net/up/22/03/vmyo.jpg" />
<div class="bullestaff">
<d>Ϟ Seth Underwood Ϟ</d><br/><div style="height:2px;"></div>
<i>Alias Chewi, Fondateur</i> Ϟ <a href="" target="_blank">Hibou</a> Ϟ <a href="" target="_blank">Profil</a> Ϟ<br/>
Autres visages<br/>
Derek<br/>
<img src="https://i.servimg.com/u/f47/19/09/85/47/derek210.jpg" />
</div>
</div>
<br/>
<br/>Survoles les images pour découvrir les membres du Staff !
</div>
<div class="scenarios">
<div class="titre">
Sorciers recherchés
</div>
<script type="text/javascript">
//
</script>
<div class="systeme_onglets">
<div align="center" class="onglets">
<span onmouseover="javascript:change_onglet('NomOnglet1');" id="onglet_NomOnglet1" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f30/11/30/12/47/ava_js10.jpg" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet2');" id="onglet_NomOnglet2" class="onglet_0 onglet"><img src="https://i.mydramalist.com/erWEK_5f.jpg" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet3');" id="onglet_NomOnglet3" class="onglet_0 onglet"><img src="https://2img.net/image.noelshack.com/fichiers/2013/43/1382798112-6.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet4');" id="onglet_NomOnglet4" class="onglet_0 onglet"><img src="https://resize.programme-television.ladmedia.fr/rcrop/1200,/img/var/premiere/storage/images/tele-7-jours/news-tv/pirates-des-caraibes-la-fontaine-de-jouvence-m6-astrid-berges-frisbey-la-sirene-des-caraibes-4051892/74535569-1-fre-FR/Pirates-des-Caraibes-La-Fontaine-de-Jouvence-M6-Astrid-Berges-Frisbey-la-sirene-des-Caraibes.jpg" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet5');" id="onglet_NomOnglet5" class="onglet_0 onglet"><img src="https://www.japanfm.fr/wp-content/uploads/2021/07/1625917033_Shownu-de-MONSTA-X-annonce-personnellement-quil-senrolera-dans-larmee.jpeg" /></span>
</div>
<div class="contenu_onglets">
<div id="contenu_onglet_NomOnglet1" class="contenu_onglet">
<d>Ϟ Abraham Ryan Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 55 ans<br/>
<b>Ϟ Opinion politique</b> Hait les Pozhiratelis mais est obligé de se soumettre, pour protéger sa famille.<br/>
<b>Ϟ Ascendance</b> Sang pur<br/>
<b>Ϟ Métier</b> Ministre de la Magie Anglais<br/>
<b>Ϟ Personnage Prédéfini</b>
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t74-famille-ryan">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet2" class="contenu_onglet">
<d>Ϟ Park Ha-Neul Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 34 ans<br/>
<b>Ϟ Opinion politique</b> Hais les Pozhiratelis par dessus tout, car ces derniers l'ont privés de son mari.<br/>
<b>Ϟ Ascendance</b> Libre, mais pas sang pur (sinon Il kwon n'aurait pas été remarié si elle était de sang pur).<br/>
<b>Ϟ Métier</b> Autrefois avocate. Depuis qu'elle a accouché, elle est mère au foyer.<br/>
<b>Ϟ Attendue par</b> Il kwon.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t1279-f-park-ha-neul-feat-song-qian-victoria-song#54758">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet3" class="contenu_onglet">
<d>Ϟ William Bless Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 57 / 58 ans<br/>
<b>Ϟ Opinion politique</b> Anti-Pozhiratelis<br/>
<b>Ϟ Ascendance</b> Né-moldu<br/>
<b>Ϟ Métier</b> Médecin à Paris (partie moldue)<br/>
<b>Ϟ Attendu par</b> Nikita.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t743-famille-bless-1f-2m#29224">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet4" class="contenu_onglet">
<d>Ϟ Tabitha J. Valentyne Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 3 288 ans<br/>
<b>Ϟ Opinion politique</b> Je me fiche de ce qu'il se passe dans votre monde de sorcier. Moi je vis ma petite vie de sirène.<br/>
<b>Ϟ Ascendance</b> Moldue. Je n'ai jamais connu la magie. Et pourtant, je sais désormais manipuler aisément l'eau.<br/>
<b>Ϟ Métier</b> Aujourd'hui, le métier que j'exerce est libre. Mais saches que j'ai été Infirmière. Et je peux avoir fait bien des métiers depuis toutes ces années, je te laisse le choix de faire ce que tu veux de moi.<br/>
<b>Ϟ Attendue par</b> Tiphaine.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t654-f-tabitha-j-valentyne-feat-astrid-berges-frisbey#23051">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet5" class="contenu_onglet">
<d>Ϟ Park Tae-Hyun Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 32 ans<br/>
<b>Ϟ Opinion politique</b> Il s'en fiche un peu. Tae-Hyun n'use plus trop de la magie. Il a fait ses études parce qu'il fallait les faire, mais il se sent mieux à réaliser son rêve qu'à pratiquer la magie.<br/>
<b>Ϟ Ascendance</b> Sang pur.<br/>
<b>Ϟ Métier</b> Célébrité (chanteur / acteur / mannequin / ...). C'est libre, mais c'est quelqu'un de très médiatisé et très connu en Asie, voir peut-être même au-delà de l'Asie.<br/>
<b>Ϟ Attendu par</b> Il kwon.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t1280-famille-park-dans-le-droit-et-l-illegal#54769">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet6" class="contenu_onglet">
<d>Ϟ Yuri Sidorov Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 18 ans<br/>
<b>Ϟ Opinion politique</b> pro-Pozhiratelis, est un tout jeune corbeau<br/>
<b>Ϟ Ascendance</b> sang-pur<br/>
<b>Ϟ Etudes</b> Durmstrang, 8ème année<br/>
<b>Ϟ Attendu par</b> Demetria, Connor et Timaël.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t1184-m-yuri-sidorov-ft-alexander-ludwig#50771">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet7" class="contenu_onglet">
<d>Ϟ Daenerys Stark Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> Entre 18 et 23 ans<br/>
<b>Ϟ Opinion politique</b> Anti Pozhi<br/>
<b>Ϟ Ascendance</b> Sang-Mêlée<br/>
<b>Ϟ Métier</b> Libre<br/>
<b>Ϟ Attendu par</b> Derek et Tiphaine.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t1229-f-dany-stark-barbara-palvin#52609">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet8" class="contenu_onglet">
<d>Ϟ Kathleen June Twarby Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 42 ans<br/>
<b>Ϟ Opinion politique</b> Pro-Pozhirateli (Pro Kathleen en vrai)<br/>
<b>Ϟ Ascendance</b> Née moldue<br/>
<b>Ϟ Métier</b> Secrétaire Européenne<br/>
<b>Ϟ Attendue par</b> Philipp et Elena.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t1229-f-dany-stark-barbara-palvin#52609">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet9" class="contenu_onglet">
<d>Ϟ Aïna Dimitrov Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 42 / 43 ans<br/>
<b>Ϟ Opinion politique</b> Contre les Pozhiratelis<br/>
<b>Ϟ Ascendance</b> Moldue<br/>
<b>Ϟ Métier</b> Enseignante de langues dans un lycée moldu<br/>
<b>Ϟ Personnage prédéfini</b>
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t81-famille-dimitrov#161">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet10" class="contenu_onglet">
<d>Ϟ Erin Ϟ</d><br/><div style="height:2px;"></div>
<div class="onglettexte">
<b>Ϟ Âge</b> 18 / 19 ans<br/>
<b>Ϟ Opinion politique</b> N'a pas connaissance du monde magique.<br/>
<b>Ϟ Ascendance</b> Moldue<br/>
<b>Ϟ Métier</b> Libre. Peut encore être étudiante.<br/>
<b>Ϟ Attendue par</b> Allison et Babylon.
</div>
<a target="_blank" href="https://repellomuggletum.forumactif.com/t757-f-erin-meilleure-amie#31193">En savoir plus</a>
</div>
</div>
<div style="height:2px;"></div>
<div align="center" class="onglets">
<span onmouseover="javascript:change_onglet('NomOnglet6');" id="onglet_NomOnglet6" class="onglet_0 onglet"><img src="https://2img.net/h/i.imgbox.com/WeUFYt3o.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet7');" id="onglet_NomOnglet7" class="onglet_0 onglet"><img src="https://64.media.tumblr.com/16cca864e4610097cbb4e6183f9c9329/tumblr_oe2anzQAab1sddr1ro2_250.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet8');" id="onglet_NomOnglet8" class="onglet_0 onglet"><img src="https://resize-parismatch.lanmedia.fr/img/var/news/storage/images/paris-match/people-a-z/candice-swanepoel/25517833-1-fre-FR/Candice-Swanepoel.jpg" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet9');" id="onglet_NomOnglet9" class="onglet_0 onglet"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Mamie_Gummer_for_Make_It_Fair%2C_side.jpg" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet10');" id="onglet_NomOnglet10" class="onglet_0 onglet"><img src="https://images.mubicdn.net/images/cast_member/147802/cache-370271-1536572890/image-w856.jpg?size=800x" /></span>
</div>
</div>
<script type="text/javascript">
//
</script>
</div>
<div class="infos">
<div id="slideshow">
<input checked name="slideshow" id="slide1" type="radio" />
<input name="slideshow" id="slide2" type="radio" />
<input name="slideshow" id="slide3" type="radio" />
<input name="slideshow" id="slide4" type="radio" />
<input name="slideshow" id="slide5" type="radio" />
<input name="slideshow" id="slide6" type="radio" />
<input name="slideshow" id="slide7" type="radio" />
<div id="slides">
<div class="inner">
<div class="a_slide">
<div class="titre">A découvrir ici</div>
<div class="slidetexte">
Ϟ Les mini-évents du mois en cours.<br/>
Ϟ La guerre des camps.<br/>
Ϟ Les matchs de Quidditch.<br/>
Ϟ Nos membres du mois.<br/>
Ϟ Les personnages que l'on recherche.<br/>
Ϟ Des liens libres attendus (hors scénarios et pré-liens) + Membres en attente de RPG.<br/><br/>
Actionne les flèches pour découvrir ces informations !
</div>
</div>
<div class="a_slide">
<div class="titre">Mars 2135</div>
La nouvelle saison venant de se lancer, on vous laisse prendre connaissance des diverses chasses qui vous attendent !<br/>
Pour participer, rendez-vous <a href="https://repellomuggletum.forumactif.com/t1392-attrapez-les-toutes#59424" target="_blank">juste ici</a>. (Les moldus / cracmols sont les bienvenus !!!)
</div>
<div class="a_slide">
<div class="titre">La guerre des camps</div>
<table>
<tr>
<td>
Pozhiratelis (Philipp &
Andreï)
</td>
<td>
<div class="progress-barPhilipp"></div>
</td>
</tr>
<tr>
<td>
Anti-Pozhiratelis / Résistance
</td>
<td>
<div class="progress-barAnti"></div>
</td>
</tr>
<tr>
<td>
Sorciers neutre
</td>
<td>
<div class="progress-barNeutre"></div>
</td>
</tr>
</table><div style="height:5px;"></div>
<span style="font-size:10px;">Pour participer et prendre le pouvoir sur la prochaine saison c'est <a target="_blank" href="https://repellomuggletum.forumactif.com/t1393-printemps-2135-guerre-des-camps#59425">par ici</a> !</span>
</div>
<div class="a_slide">
<div class="titre">Les matchs de Quidditch</div>
<table align="center">
<tr>
<td align="center">
<img src="https://vignette.wikia.nocookie.net/harrypotter/images/f/fd/Blason_de_Serpentard.png/revision/latest/scale-to-width-down/150?cb=20150103152635&path-prefix=fr" class="imgquid" />
</td>
<td align="center">
<img src="https://vignette.wikia.nocookie.net/harrypotter/images/8/81/Blason_de_Gryffondor.png/revision/latest/scale-to-width-down/150?cb=20130818150749&path-prefix=fr" class="imgquid" />
</td>
</tr>
<tr>
<td align="center">
<span style="color:#006600;font-weight:bold;">15</span>
</td>
<td align="center">
<span style="color:#FF0000;font-weight:bold;">0</span>
</td>
</tr>
</table>
<center><a target="_blank" href="https://repellomuggletum.forumactif.com/t1442-serpentard-vs-gryffondor#62209" >Viens participer au match !</a></center>
</div>
<div class="a_slide">
<div class="titre">Nos membres du mois</div>
<div class="slidetexte">
<d>Ϟ The Best</d> Ϟ Seth Underwood<br/><br/>
<d>Ϟ Meilleur RPGiste</d> Ϟ Eowyn Derry &
Seth Underwood<br/><br/>
<d>Ϟ Meilleur Voteur</d> Ϟ Lovely Graves<br/><br/>
<a href="https://repellomuggletum.forumactif.com/t1426-fevrier-2022#61029" target="_blank">Les féliciter</a>
</div>
</div>
<div class="a_slide">
<div class="slidetexte2">
<div class="titre">Types de personnages recherchés</div>
<i>Remplir une de ces conditions vous fera remporter 1 000 PIs dès votre inscription !)</i>
<br/><br/><d>Ϟ Sexe</d> Ϟ Nos hommes sont en surnombre. Pensez donc à prendre un personnage féminin !
<br/><br/><d>Ϟ Etudiant</d> Ϟ Il manque d'étudiants à Poudard. Et si vous alliez rejoindre l'école Anglaise ?
<br/><br/><d>Ϟ Personnel</d> Ϟ L'équipe éducative de Durmstrang est en faible nombre... Un poste vous intéresse peut-être dans l'école Bulgare ?
<br/><br/><d>Ϟ Hors école</d> Ϟ Envie de travailler dans l'un de nos Ministères ou à l'Hôpital ? Venez, on vous attend avec impatience !!!
</div>
</div>
<div class="a_slide">
<div class="slidetexte2">
<div class="titre">Liens libres</div>
Ϟ Hawke J. Carrow est à la recherche d'une jeune femme qui sera folle amoureuse de lui et ne cesserait de le suivre pour obtenir une nouvelle nuit en sa compagnie.<br/>
<div class="titre">Recherches de RPGs</div>
Ϟ Caitlyn Dragonneau, Park Il kwon, Darko J. Marloes et Eowyn Derry sont à la recherche de personnes pour RP !<br/>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
<label for="slide6"></label>
<label for="slide7"></label>
</div>
</div>
<script type="text/javascript">
$(function(){
function changement_onglet(){
if(indice == nbr_container -1) $('#slideshow > input').eq(0).trigger('click');
else $('#slideshow > input').eq(indice + 1).trigger('click');
}

var nbr_container = $("#slideshow #controls label").length;
var lirediapo, indice = 0;
lirediapo = setInterval(changement_onglet,5000);

// On récupère l'indice du dernier elt cliqué
$("#slideshow > input").click(function(){
indice = $(this).index();
});

$("#slideshow").mouseenter(function(){
clearInterval(lirediapo);
});

$("#slideshow").mouseleave(function(){
lirediapo = setInterval(changement_onglet,5000);
});
});
</script>
</div>
<div class="credits">
L'aventure a commencée le 31/01/2010. RM appartient à son staff et ne cautionne pas les propos de JKR. Toute reproduction totale ou partielle est passible de sanction. Retrouvez l'ensemble de nos crédits <a href="https://repellomuggletum.forumactif.com/t1407-credits#59447" target="_blank">ici</a>.
</div>
</div>
</body>
</html>

A mettre au niveau de la PA (Panneau d'Administration > Affichage > Généralités > Message sur la Page d'Accueil)

Code:: <center>
<iframe style="width: 790px; height: 550px;" src="URLDELAPAGEHTML" frameborder="0" scrolling="no"> </iframe>
</center>

Rechercher

Résultats par : Messages Sujets
Recherche avancée