PA#1

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

PA

Cette PA est accordée avec le QEEL#1. Mais vous n'êtes pas obligés de les utiliser ensemble.

/ ! \ 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é à la fin de la PA. Mais 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 750px.
◈ Il y a de la place pour 6 scénarios, en système d'onglet avec overflow pour donner un maximum d'informations.
◈ Le staff est présenté sous slide. Il comporte de la place pour 3 membres du staff actuellement. Mais il y a possibilité d'ajouter ou d'enlever si vous êtes plus ou moins.
◈ Vous pouvez modifier : les couleurs, le style d'écriture et le contenu.
◈ Si jamais vous avez besoin d'aide pour la modification du code ou un soucis, c'est par ici que je vous aiderai !

Le code

Merci à vous de l'utiliser !
A mettre dans votre page HTML :

Code:: <!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8" />
   <style>
   a {
   color: #C2515F;
   font-family: Verdana;
   font-size:10px;
   text-decoration: none;
   }

   a:hover {
   color: #000000;
   font-size:10px;
   font-family: Verdana;
   text-decoration: none;
   }

   /*modifier l'apparence des scrollbars de tout le forum*/
   ::-webkit-scrollbar {
   width: 5px; /*largeur de la scrollbar verticale*/
   height: 5px; /*hauteur de la scrollbar horizontale*/
   background-color: #FDFCE8;
   }

   ::-webkit-scrollbar-track {
   background-color: #FDFCE8; /*couleur du fond de la scrollbar*/
   }

   ::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
   background-color: #C2515F /*couleur de l'ascenseur*/;
   }

   u{
   border-bottom: 1px dotted;
   border-color:#C2515F;
   text-decoration: none;
   }

   I{
   border-bottom:none;
   color:#000000;
   text-decoration: none;
   text-shadow: #C2515F 1px 1px 0px;
   }

   .fond {
   width:700px;
   height:500px;
   }

   .bloc {
   background-color: #FDFCE8;
   color: #000000;
   padding:10px;
   text-align: justify;
   font-size:12px;
   }

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

   .onglet_0{background:transparent;}

   .onglet_1{background:transparent;}

   .contenu_onglet {
   display:none;
   text-align: center;
   width: 170px;
   padding: 10px;
   height: 220px;
   font-size: 12px;
   overflow:auto;
   }

   /* 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: #FDFCE8;
   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: 30px;
   height: 30px;
   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) {
   background: url('https://nsm08.casimages.com/img/2016/05/25//1605251158378388814254145.png') no-repeat;
   float: right;
   margin: 80px 20px 0px 0px;
   display: block;
   }

   /* Mise en place de la flèche vers le slide précédent */
   #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;
   float: left;
   margin: 80px 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;
   }

   .info {
   position: relative;
   z-index: 24;
   text-decoration: none;
   }

   c.info:hover {
   z-index: 25;
   }

   c.info span {
   display: none;
   }

   c.info:hover span {
   display: block;
   position: absolute;
   top: -170px;
   left: 10px;
   width: 170px;
   height: 170px;
   background-color: rgba(255,255,255,0.5);
   color: #000000;
   text-align: center;
   font-weight: none;
   }

   .crédits {
   font-size:8px;
   text-align:center;
   }

   </style>
  </head>
  <body>
   <center>
   <div class="bloc" style="width: 665px; height: 20px; margin-left:-7px;">
   <div style="width: 655px; text-align: center; padding:5px; margin-left:-7px;">
   <a href="URL" target="_blank">Lien 1</a> ⚤
   <a href="URL" target="_blank">Lien 2</a> ⚤
   <a href="URL" target="_blank">Lien 3</a> ⚤
   <a href="URL" target="_blank">Lien 4</a> ⚤
   <a href="URL" target="_blank">Lien 5</a>
   </div>
   </div>
   </center>
   <table align="center" class="fond">
   <tr>
   <td>
   <div class="bloc" style="width: 200px; height: 270px;">
   <div style="width: 190px; height: 260px; text-align: justify; overflow: auto; padding:5px;">
   <p style="text-indent:2em">Paragraphe numéro 1 de votre contexte. Paragraphe numéro 1 de votre contexte. Paragraphe numéro 1 de votre contexte. Paragraphe numéro 1 de votre contexte. Paragraphe numéro 1 de votre contexte.</p>
   <p style="text-indent:2em">Paragraphe numéro 2 de votre contexte. Paragraphe numéro 2 de votre contexte. Paragraphe numéro 2 de votre contexte. Paragraphe numéro 2 de votre contexte. Paragraphe numéro 2 de votre contexte.</p>
   <p style="text-indent:2em">Paragraphe numéro 3 de votre contexte. Paragraphe numéro 3 de votre contexte. Paragraphe numéro 3 de votre contexte. Paragraphe numéro 3 de votre contexte. Paragraphe numéro 3 de votre contexte.</p>
   <div style="text-align:right">
   <a href="URL" target="_blank">Lire plus</a>
   </div>
   </div>
   </div>
   <br/>
   <div class="bloc" style="width: 200px; height: 110px;">
   <div style="width: 190px; height: 100px; text-align: justify; padding:5px;">
   <img src="https://ssl.gstatic.com/onebox/weather/64/cloudy.png" style="float:left;padding-right:5px;"/>
   <p style="margin-top:-0.5em;"><b>Nous sommes le XX/XX/XXXX<br/></b>
   Le temps est très nuageux aujourd'hui, avec des températures entre 9° et 18°. N'oubliez pas votre parapluie en sortant, on ne sait jamais!</p>
   </div>
   </div>
   </td>
   <td>
   <div class="bloc" style="width: 200px; height: 420px;">
   <div style="width: 190px; height: 410px; text-align: justify; padding:5px;">
   <script type="text/javascript">
   //
   </script>
   <div class="systeme_onglets">
   <div class="onglets" align="center">
   <span class="onglet_0 onglet" id="onglet_NomOnglet1" onmouseover="javascript:change_onglet('NomOnglet1');"><img src="http://41.media.tumblr.com/51be5b600cbe2735fb95eca2cb56f7fe/tumblr_nfz2p49Bwf1qiiwoqo4_250.png" style="width:50px;"/></span>
   <span class="onglet_0 onglet" id="onglet_NomOnglet2" onmouseover="javascript:change_onglet('NomOnglet2');"><img src="https://40.media.tumblr.com/b32f53a758b1a100534559fd7e298774/tumblr_nszl60OQ0W1qiiwoqo1_250.png" style="width:50px;"/></span>
   <span class="onglet_0 onglet" id="onglet_NomOnglet3" onmouseover="javascript:change_onglet('NomOnglet3');"><img src="http://41.media.tumblr.com/5569e8cb7428cf2bb1414c22b11f2ded/tumblr_n5qdfiNFCh1qiiwoqo2_250.png" style="width:50px;"/></span>
   <span class="onglet_0 onglet" id="onglet_NomOnglet4" onmouseover="javascript:change_onglet('NomOnglet4');"><img src="https://40.media.tumblr.com/0c8d3b1c81f292bdbe262f799f702a60/tumblr_nnvvamLOTC1qiiwoqo3_250.png" style="width:50px;"/></span>
   <span class="onglet_0 onglet" id="onglet_NomOnglet5" onmouseover="javascript:change_onglet('NomOnglet5');"><img src="http://67.media.tumblr.com/3ebc173d56776219af4168f66566ef31/tumblr_o763xtLVLM1qiiwoqo1_250.png" style="width:50px;"/></span>
   <span class="onglet_0 onglet" id="onglet_NomOnglet6" onmouseover="javascript:change_onglet('NomOnglet6');"><img src="http://41.media.tumblr.com/875758392bdcb66cfab62cef1ebd624b/tumblr_mxkgk8SMr81qiiwoqo1_250.png" style="width:50px;"/></span>
   </div>
   <div class="contenu_onglets">
   <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">
   <i>PRENOM NOM 1</i><br/><br/>
   Âge ⚤ <font color=#AD1C1C>Groupe</font>
   <p style="text-align:justify;">Mini-Story, points importants de l'histoire du personnage, choses non négociables, ...</p>
   Ses liens : <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a> ⚤ <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a><br/><br/>
   <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">En savoir plus</a>
   </div>
   <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">
   <i>PRENOM NOM 2</i><br/><br/>
   Âge ⚤ <font color=#EF7F8B>Groupe</font>
   <p style="text-align:justify;">Mini-Story, points importants de l'histoire du personnage, choses non négociables, ...</p>
   Ses liens : <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a> ⚤ <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a><br/><br/>
   <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">En savoir plus</a>
   </div>
   <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">
   <i>PRENOM NOM 3</i><br/><br/>
   Âge ⚤ <font color=#A2CDD6>Groupe</font>
   <p style="text-align:justify;">Mini-Story, points importants de l'histoire du personnage, choses non négociables, ...</p>
   Ses liens : <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a> ⚤ <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a><br/><br/>
   <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">En savoir plus</a>
   </div>
   <div class="contenu_onglet" id="contenu_onglet_NomOnglet4">
   <i>PRENOM NOM 4</i><br/><br/>
   Âge ⚤ <font color=#EEAE57>Groupe</font>
   <p style="text-align:justify;">Mini-Story, points importants de l'histoire du personnage, choses non négociables, ...</p>
   Ses liens : <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a> ⚤ <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a><br/><br/>
   <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">En savoir plus</a>
   </div>
   <div class="contenu_onglet" id="contenu_onglet_NomOnglet5">
   <i>PRENOM NOM 5</i><br/><br/>
   Âge ⚤ <font color=#B8DB4F>Groupe</font>
   <p style="text-align:justify;">Mini-Story, points importants de l'histoire du personnage, choses non négociables, ...</p>
   Ses liens : <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a> ⚤ <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a><br/><br/>
   <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">En savoir plus</a>
   </div>
   <div class="contenu_onglet" id="contenu_onglet_NomOnglet6">
   <i>PRENOM NOM 6</i><br/><br/>
   Âge ⚤ <font color=#000099>Groupe</font>
   <p style="text-align:justify;">Mini-Story, points importants de l'histoire du personnage, choses non négociables, ...</p>
   Ses liens : <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a> ⚤ <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">X</a><br/><br/>
   <a href="http://naughtyladies.forumgratuit.org/" target="_blanck">En savoir plus</a>
   </div>
   </div>
   <div class="onglets" align="center">
   </div>
   </div>
   <script type="text/javascript">
   //
   </script>
   </div>
   </div>
   </td>
   <td>
   <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" />
   <div id="slides">
   <div class="inner">
   <div class="a_slide">
   <img class="left" src="http://pixel.nymag.com/imgs/daily/vulture/2015/02/09/09-katie-cassidy-chatroom-silo.w245.h368.png" style="width:126px;height:190px;"/>
   <p style="text-align:center; margin-top:-5px; font-size:18px;"><i><b>⚤ PSEUDO 1 ⚤</b></i></p>
   <p style="text-align:right; padding:10px; font-size:14px;">
   Rôle<br/><br/>
   <a href="URL" target="_blank" style="font-size:14px;">Profil</a><br/><br/>
   <a href="URL" target="_blank" style="font-size:14px;">MP</a><br/><br/>
   Présence
   </p>
   </div>
   <div class="a_slide">
   <img class="right" src="http://img09.deviantart.net/66b8/i/2015/361/b/c/png___mila_kunis_by_andie_mikaelson-d9lmmsx.png" style="width:152px;height:190px;"/>
   <p style="text-align:center; margin-top:-5px; font-size:18px;"><i><b>⚤ PSEUDO 2 ⚤</b></i></p>
   <p style="text-align:left; padding:10px; font-size:14px;">
   Rôle<br/><br/>
   <a href="URL" target="_blank" style="font-size:14px;">Profil</a><br/><br/>
   <a href="URL" target="_blank" style="font-size:14px;">MP</a><br/><br/>
   Présence
   </p>
   </div>
   <div class="a_slide">
   <img class="left" src="https://2img.net/i/fa/pbucket.gif" style="width:107px;height:190px;"/>
   <p style="text-align:center; margin-top:-5px; font-size:18px;"><i><b>⚤ PSEUDO 3 ⚤</b></i></p>
   <p style="text-align:right; padding:10px; font-size:14px;">
   Rôle<br/><br/>
   <a href="URL" target="_blank" style="font-size:14px;">Profil</a><br/><br/>
   <a href="URL" target="_blank" style="font-size:14px;">MP</a><br/><br/>
   Présence
   </p>
   </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>
   </div>
   </div>
   <br/>
   <div class="bloc" style="width: 190px; height: 190px;">
   <div style="width: 190px; height: 190px; text-align: justify; padding:5px;">
   <c class="info"><img src="https://nsm09.casimages.com/img/2020/06/12//2006120936508388816850244.png" /><span><br /><br />
   <d style="COLOR: #000000; FONT-SIZE: 17px;"><i><b>Membre du mois</b></i></d> <br /><br/>
   Félicitations à XXX et XXX!</span></c>
   </div>
   </div>
   </td>
   </tr>
   </table>
   <div class="crédits"><a href="https://tourmaline.forumactif.com/" target="_blanck">Loukoum</a>
   </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:: <iframe style="width: 750px; height: 600px;" src="ICI VOTRE PAGE HTML" frameborder="0" scrolling="no"></iframe>

Rechercher

Résultats par : Messages Sujets
Recherche avancée