PA#6

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 cliquant ici.

◈ Petit rendu en image ◈

A savoir sur cette PA

◈ Le crédit est installé en bas de la PA, il sera centré automatiquement sous la PA quand votre page HTML sera installée dans l'iframe. Je peux accepter que vous l'enleviez afin de le mettre avec vos autres crédits.
Petit code pour vous faciliter la vie si vous désirez enlever le crédit de la page HTML :

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

◈ La largeur maximale de cette PA est de 800px, l'iframe est programmé à 100% pour pouvoir s'adapter correctement. La hauteur elle est de 550px.
◈ Le staff est placé en slide. Trois slides sont programmés (le dernier sans image) mais si vous voulez en ajouter ou modifier n'hésitez pas à demander.
◈ 6 places sont réservées pour les scénarios avec un système d'onglet pour afficher le nom, le lien entre les persos et le lien vers le scénario.
◈ Deux membres du mois peuvent être affichés.
◈ Les partenaires sont cachés sous des caractères (des étoiles). Le caractère peut être changé mais vous aurez difficilement la place pour des boutons (on risque de ne pas les voir).
◈ Bien sûr le contenu des cadres de texte peut être modifié si vous n'avez pas de dates clefs, de météo, vous voulez des news plus grandes, ... . Hésitez pas.
◈ Vous pouvez modifier : les couleurs, le style d'écriture, les images 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>
/*---------------------------*/
/*-----------Styles----------*/
/*---------------------------*/

/*Liens*/
a {
color: #41555A;
font-family:'Amatic SC';
font-size:12px;
text-decoration: none;
}

/*Liens au survol*/
a:hover {
color: #3F4C4A;
font-size:12px;
font-family:'Amatic SC';
text-decoration: none;
}

/*Texte surligné*/
u{
box-shadow: #3F4C4A 0px -5px 0px inset;
font-family:'indie flower';
color: #A9B1B2;
}

/*Texte italique*/
I{
color:#41555A;
text-shadow: 1px 0px 1px #3F4C4A;
}

/*---------------------------*/
/*---------Scrollbar---------*/
/*---------------------------*/
/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #2B4546;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #A9B1B2;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #41555A;
}

/*---------------------------*/
/*-------Fond de la PA-------*/
/*---------------------------*/

.fond {
width:760px;
height:515px;
background-color: #5B7879;
}

/*---------------------------*/
/*---------Bloc liens--------*/
/*---------------------------*/

.navigation a {
display:inline-block;
width:102px;
background-image: linear-gradient(to right, #41555a, #405356, #3f5152, #3f4e4e, #3f4c4a);
font-family:'Amatic SC';
font-size:12px;
text-align:center;
color:#A9B1B2;
padding: 3px 0px 3px 0px;
margin-top:10px;
}

/*Au survol*/
.navigation a:hover {
background-image: linear-gradient(to left, #41555a, #405356, #3f5152, #3f4e4e, #3f4c4a);
}

/*----------------------------*/
/*-----Apparence générale-----*/
/*----------------------------*/
/*blocs*/
.contexte, .dates, .datemeteo, .scenarios, .blog, .video, .staff, .honneur, .news, .partenaires {
background-color: #ADB9B9;
color: #2B4546;
padding:10px;
text-align: justify;
font-size:12px;
}

/*texte dégradé*/
.dates d, .datemeteo b, .contenu_onglet pseudo, .blog b, .partenaires b, .news d {
background-image: linear-gradient(to right, #41555a, #405356, #3f5152, #3f4e4e, #3f4c4a);
font-family: 'indie flower';
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/*----------------------------*/
/*----------Contexte----------*/
/*----------------------------*/
.contexte {
position:relative;
top:10px;
left:10px;
width:260px;
height:220px;
overflow:auto;
}

/*---------------------------*/
/*--------Dates clefs--------*/
/*---------------------------*/
.dates {
position:relative;
top:20px;
left:10px;
width:260px;
height:75px;
overflow:auto;
}

/*---------------------------*/
/*-------Date et Météo-------*/
/*---------------------------*/
.datemeteo {
position:relative;
top:30px;
left:10px;
width:260px;
height:90px;
overflow:auto;
}

.datemeteo img {
float:left;
padding-right:10px;
}

/*---------------------------*/
/*---------Scénarios---------*/
/*---------------------------*/
.scenarios {
position:relative;
top:-435px;
left:300px;
width:190px;
height:220px;
}

.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: 190px;
height: 50px;
font-size: 12px;
overflow:auto;
}

/*---------------------------*/
/*--------Blog Gossip--------*/
/*---------------------------*/
.blog {
position:relative;
top:-425px;
left:300px;
width:190px;
height:75px;
overflow:hidden;
text-align:center;
}

.blog ii {
font-style:italic;
font-size:10px;
}

/*---------------------------*/
/*-----------Vidéo-----------*/
/*---------------------------*/
.video {
position:relative;
top:-415px;
left:300px;
width:190px;
height:90px;
}

/*---------------------------*/
/*-----------Staff-----------*/
/*---------------------------*/
.staff {
position:relative;
top:-880px;
left:520px;
width:210px;
height:220px;
}

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

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

/* 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: 210px;
height: 210px;
background-color: #ADB9B9;
background-position: center center;
overflow: hidden;
}

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

/* Mise en forme des slides */
#slides .a_slide {
position: relative;
width: 210px;
height: 210px;
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%; }

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

/* On met les labels à la bonne taille et on les cache */
#controls label {
display: none;
width: 10px;
height: 10px;
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(1) {
/*background: url('https://nsm08.casimages.com/img/2016/05/25//1605251158378388814254145.png') no-repeat;*/
background-color:#2F4031;
border-radius:100%;
float: right;
margin: 120px 20px 0px 0px;
display: block;
}

/* Mise en place de la flèche vers le slide précédent */
#slide1:checked ~ #controls label:nth-child(3),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2) {
/*background: url('https://nsm08.casimages.com/img/2016/05/25//1605251158388388814254146.png') no-repeat;*/
background-color:#2F4031;
border-radius:100%;
float: left;
margin: 120px 0px 0px 20px;
display: block;
}

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

/* Placer toutes les images en absolu. */
.a_slide img {
position: absolute;
display: block;
height: 190px;
}

/* On place les images à gauche */
.a_slide img.left {
bottom: 0px;
left: 0px;
}

/* On place les images à droite */
.a_slide img.right {
bottom: 0px;
right: 0px;
}

/*---------------------------*/
/*------Membres du mois------*/
/*---------------------------*/
.honneur {
position:relative;
top:-870px;
left:520px;
width:120px;
height:120px;
text-align:center;
font-size:11px!important;
}

.imsc{
border:1px solid #2B4546;
width:50px;
opacity:1;
}

/*---------------------------*/
/*--------Partenaires--------*/
/*---------------------------*/
.partenaires {
position:relative;
top:-1010px;
left:670px;
width:60px;
height:120px;
text-align:center;
}

/*---------------------------*/
/*---------Nouveautés--------*/
/*---------------------------*/
.news {
position:relative;
top:-1000px;
left:520px;
width:210px;
height:45px;
overflow:auto;
}
</style>
</head>
<body>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet" />
<div class="fond">
<center>
<div class="navigation">
<a href="https://grenatshadows.forumactif.com/t7-les-lois-de-grenat-shadows#18" target="_blank">★ Règlement ★</a>
<a href="https://grenatshadows.forumactif.com/f10-annexes" target="_blank">★ Annexes ★</a>
<a href="https://grenatshadows.forumactif.com/t11-bottin-des-celebrites#22" target="_blank">★ Bottins des avatars ★</a>
<a href="https://grenatshadows.forumactif.com/h3-scenarios" target="_blank">★ Scénarios ★</a>
<a href="https://grenatshadows.forumactif.com/f12-our-partners" target="_blank">★ Partenariats ★</a>
<a href="https://grenatshadows.forumactif.com/f14-our-fabulous-guests" target="_blank">★ Invités ★</a>
<a href="https://discord.gg/ty8Yv633nB" target="_blank">★ Discord ★</a>
</div>
</center>
<div class="contexte">
« Au début c'était incroyable. Un rêve qui se réalisait enfin après tant d'effort et tant d'années dans l'ombre. C'était en quelque sorte une vengeance sur certaines personnes qui ne croyaient pas en moi et qui me disaient que jamais je n'allais y arriver. C'était incroyable de voir toutes ces personnes qui m'aimaient et me soutenaient quoique je fasse. Voyager dans le monde entier pour faire de la promotion, recevoir plein de cadeaux et d'amour de mes fans. C'était magnifique. Mais tout n'est pas rose dans le monde des strass et des paillettes. Il y a beaucoup d'ombres sous les projecteurs. C'est pour ça que j'ai décidé de créer une ville pour toutes les célébrités qui désirent retrouver l'anonymat ou de faire un break dans leur carrière. Les personnes qui veulent continuer leur carrière coûte que coûte sont également les bienvenus tout comme vos familles ; je ne veux pas briser des couples heureux ou des amitiés parfaites. Par contre, eux, ne les cherchez pas. Les journalistes, les photographes, les paparazzis, les fans, les haters. Toutes ces personnes qui maltraitent nos vies, toutes ces personnes qui lancent des rumeurs sur nous, ne sont pas les bienvenus. Elles ne sont pas autorisées à rentrer dans la ville. Nous avons le droit de vivre notre vie comme on l'entend. Nous avons le droit de faire ce qui nous plaît sans avoir peur de faire la une d'un magazine le lendemain. Nous avons le droit d'être nous mêmes. C'est ici, dans cette ville, que nous, célébrités du monde entier, peuvent enfin vivre la vie qu'on a toujours voulue tout en faisant ce qu'on aime. »<br/>
<br/>
Cette annonce a fait fureur dans le monde entier et tout le monde ne parlait que de ça. Qui l'avait écrite ? Quelle célébrité se cachait là dessous ? A moins que ça ne soit un brillant esprit souhaitant piéger nos célébrités ?<br/>
De nombreux commentaires ont été postés. Allant de la joie à l'annonce d'un complot. Chacun avait sa version et son interprétation.<br/>
<br/>
Plusieurs mois après cette annonce, chaque célébrité a reçu dans sa boite aux lettres les coordonnées de la ville afin que ceux qui le souhaitent puissent venir y emménager. Une ville parfaite pour retrouver votre vie "d'avant". Mais aussi de quoi vous permettre de continuer vos enregistrement : les studios sont là, loin des regards indiscrets et de la pression de votre manager.<br/>
Mais là-bas aussi tout ne sera pas rose. Les ombres retrouvent toujours leur chemin. Pour les grands comme pour les petites célébrités, cette ville est le paradis rêvé que tout le monde attendait. Mais l’est-il vraiment ?<br/>
<div style="text-align:right">
<a target="_blank" href="https://grenatshadows.forumactif.com/t14-2-discours-d-accueil#25">Lire le discours d'accueil</a>
</div>
</div>
<div class="dates">
<d>Dimanche 26 Juillet 2020</d> L'annonce est publiée sur les réseaux.<br/>
<d>Mardi 23 Mars 2021</d> Grenat Shadows ouvre officiellement ses portes aux célébrités du monde entier.
</div>
<div class="datemeteo">
<img src="https://ssl.gstatic.com/onebox/weather/64/cloudy.png" />
<b>Nous sommes le Jeudi 15 Avril 2021</b><br/>
Les nuages commencent à venir couvrir ce ciel bleu. Vous pensiez pourvoir le voir ? Et bien on dirait que non... Les températures commencent à baisser doucement, il fera donc 10° à votre réveil, et nous atteindrons tout juste les 24° cet après-midi. Préparez les pulls, il semblerait qu'une vague de froid arrive... A moins que ça ne soit autre chose ?
</div>
<div class="scenarios">
<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 style="width:50px;" src="https://64.media.tumblr.com/10f1cde2820db210927d6bae3900d560/tumblr_psshosQyI81sddr1ro7_250.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet2');" id="onglet_NomOnglet2" class="onglet_0 onglet"><img style="width:50px;" src="https://64.media.tumblr.com/602ef0037941f8d83b933820c41de729/e421a1468f21cc64-7f/s250x400/1d96e57a959714b4840de89907139e1ebcd27741.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet3');" id="onglet_NomOnglet3" class="onglet_0 onglet"><img style="width:50px;" src="https://64.media.tumblr.com/0ee95e1d27893344e8de3b4904f8612a/4225e1505f985e14-f6/s250x400/82f18d6509c2d71930e65058dfe1ed7866ed1d3e.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet4');" id="onglet_NomOnglet4" class="onglet_0 onglet"><img style="width:50px;" src="https://64.media.tumblr.com/bbe3a92e8808a41be323ee87a283f96a/tumblr_ou5so9NB2Q1rz8fk6o3_250.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet5');" id="onglet_NomOnglet5" class="onglet_0 onglet"><img style="width:50px;" src="https://zupimages.net/up/21/14/dx99.png" /></span>
<span onmouseover="javascript:change_onglet('NomOnglet6');" id="onglet_NomOnglet6" class="onglet_0 onglet"><img style="width:50px;" src="https://zupimages.net/up/21/14/dx99.png" /></span>
</div>
<div class="contenu_onglets">
<div id="contenu_onglet_NomOnglet1" class="contenu_onglet">
<pseudo>Zayn Malik</pseudo><br />
Attendu par : Perrie L. Edwards<br/>
<a target="_blank" href="https://grenatshadows.forumactif.com/t130-les-scenarios-de-perrie-edwards#731">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet2" class="contenu_onglet">
<pseudo>Ian Somerhalder</pseudo><br />
Attendu par : Nina K. Dobrev<br/>
<a target="_blank" href="https://grenatshadows.forumactif.com/t144-les-scenarios-de-nina-dobrev#869">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet3" class="contenu_onglet">
<pseudo>Sam Heughan</pseudo><br />
Attendu par : Katie McGrath<br/>
<a target="_blank" href="https://grenatshadows.forumactif.com/t319-les-celebrites-attendues-par-katie-mcgrath?tt=1#3346">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet4" class="contenu_onglet">
<pseudo>Daniel Sharman</pseudo><br />
Attendu par : Crystal M. Reed.<br/>
<a target="_blank" href="https://grenatshadows.forumactif.com/t177-les-scenarios-de-crystal-reed#1268">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet5" class="contenu_onglet">
<pseudo>Pseudo5</pseudo><br />
Attendu par : pseudo.<br/>
<a target="_blank" href="https://grenatshadows.forumactif.com/">En savoir plus</a>
</div>
<div id="contenu_onglet_NomOnglet6" class="contenu_onglet">
<pseudo>Pseudo6</pseudo><br />
Attendu par : pseudo.<br/>
<a target="_blank" href="https://grenatshadows.forumactif.com/">En savoir plus</a>
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</div>
<div class="blog">
<b>Dernier article paru</b><br/>
<a href="https://grenatshadows.forumactif.com/t367-article-n4-une-trentenaire-a-grenat" target="_blank">une trentenaire<br/>à Grenat !</a><br/>
<ii>Publié le Jeudi 15 Avril 2021</ii><br/>
★ <a href="https://shadowsgossip.tumblr.com/" target="_blank">Blog</a> ★ <a href="https://grenatshadows.forumactif.com/f83-shadows-gossip" target="_blank">Commenter</a> ★
</div>
<div class="video">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/SBkwDmRrlhc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="staff">
<div id="slideshow">
<input type="radio" id="slide1" name="slideshow" checked="" />
<input type="radio" id="slide2" name="slideshow" />
<input type="radio" id="slide3" name="slideshow" />
<div id="slides">
<div class="inner">
<div class="a_slide">
<img style="width:126px;height:190px;" src="https://zupimages.net/up/21/15/1ahv.png" class="left" />
<p style="text-align:center; margin-top:-5px; font-size:24px; font-family:Allura;">
<em><i>★ Perrie L. Edwards</i></em>
</p>
<p style="text-align:right; padding:10px; font-size:14px;">
Fondatrice<br /><br />
<a style="font-size:14px;" target="_blank" href="https://grenatshadows.forumactif.com/u2">Profil</a><br /><br />
<a style="font-size:14px;" target="_blank" href="https://grenatshadows.forumactif.com/privmsg?mode=post&u=2">MP</a><br /><br />
<span style="color:orange;">Présence<br/>réduite</span>
</p>
</div>
<div class="a_slide">
<img style="width:126px;height:190px;" src="https://zupimages.net/up/21/15/619e.png" class="right" />
<p style="text-align:center; margin-top:-5px; font-size:25px; font-family:Allura;">
<em><i>★ Jade A. Thirlwall</i></em>
</p>
<p style="text-align:left; padding:10px; font-size:14px;">
Fondatrice<br /><br />
<a style="font-size:14px;" target="_blank" href="URL">Profil</a><br /><br />
<a style="font-size:14px;" target="_blank" href="URL">MP</a><br /><br />
<span style="color: green;">Présente</span>
</p>
</div>
<div class="a_slide">
<p style="text-align:center; margin-top:-5px; font-size:25px; font-family:Allura;">
<em><i>★ The Creator</i></em>
</p>
<p style="text-align:center; padding:10px; font-size:14px;">
Compte Fondateur<br /><br />
<a style="font-size:14px;" target="_blank" href="https://grenatshadows.forumactif.com/u1">Profil</a><br /><br />
<a style="font-size:14px;" target="_blank" href="https://grenatshadows.forumactif.com/privmsg?mode=post&u=1">MP en cas de soucis</a><br /><br />
</p>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
</div>
</div>
</div>
<div class="honneur">
<a target="_blank" href="https://grenatshadows.forumactif.com/u44"><img class="imsc" src="https://tinyurl.com/3j3e2xkj" /></a>
<a target="_blank" href="https://grenatshadows.forumactif.com/u36"><img class="imsc" src="https://nsa37.casimages.com/img/2016/09/29/mini_160929100108158981.png" /></a><br />
★ <strong>Katie</strong> ★ <strong>Harry</strong> ★<br />
Nos étoiles montantes
</div>
<div class="partenaires">
<b>Friends</b><br/>
<a href="https://make-money.forumactif.com/" target="_blank">★</a>
<a href="https://centauri.forumsrpg.com/" target="_blank">★</a>
<a href="https://everybodylies.forumactif.com/" target="_blank">★</a>
<a href="https://shinc.forumactif.com/" target="_blank">★</a>
<a href="https://reversalmaxima.forumactif.com/" target="_blank">★</a>
</div>
<div class="news">
<d>01/06/2021</d> De petites nouveautés viennent de faire leur apparition sur le forum ! Vous pourrez les découvrir <a href="https://grenatshadows.forumactif.com/t16-flash-infos#3277" target="_blank">juste ici</a>. Et si vous souhaitez commenter tout ça, c'est évidemment possible <a href="https://grenatshadows.forumactif.com/t128-commentaires-de-majs#3278" target="_blank">ici</a> !<br/>
<d>22/05/2021</d> C'est l'heure de voter pour le futur Maire de Grenat ! Alors qui de Omar ou Matthew remportera la bataille ? <a href="https://grenatshadows.forumactif.com/t239-event-hrp-election-du-maire#3071" target="_blank">C'est ici pour voter !</a><br/>
<d>16/05/2021</d> Les résultats de notre 1ère soirée CB sont disponibles, <a href="https://grenatshadows.forumactif.com/t270-resultats-soiree-cb-n1#2787" target="_blank">juste ici</a> !<br/>
<d>08/05/2021 - Event en place !</d><br/>
Il y a du mouvement à la Mairie... Il semblerait que l'élection du Maire soit pour bientôt ! Alors, tu te présentes ? <a href="https://grenatshadows.forumactif.com/f63-civic-center" target="_blank">Vite, avant qu'il ne soit trop tard !</a><br/>
<d>23/03/2021</d> Ouverture du forum.<br/>
</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:: <div align="center">
<iframe style="width: 100%; height: 550px;" src="https://tourmaline.forumactif.com/h7-pa6" frameborder="0" scrolling="no"> </iframe>
<br/><a href="https://tourmaline.forumactif.com/" target="_blank" style="font-size:8px;">Loukoum</a>
</div>

Rechercher

Résultats par : Messages Sujets
Recherche avancée