ancien codage by laura

htlm pa slidder:

Code:: <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /><style type="text/css" rel="stylesheet">

body {
background: transparent;}



/* BLOC STAFF */

.le-staff{display:inline-block; vertical-align:top;width:100px; height:50px; text-align:center; background:transparent; }
/* BLOC CONTENU STAFF */
.le-staff ul {position:relative; margin:0 auto;width:245px; height:150px; padding:0px 0px 0; overflow:hidden;font-size:0; line-height:0; white-space: nowrap;}
/* CONTENU STAFF */
.le-staff ul li {position:relative; display:inline-block; vertical-align:top; overflow:hidden; width: 245px; height: 140px; white-space:normal; font: 10px Arial; text-decoration: none; line-height: 13px;/* MODIFIABLE */
transition: all 0.35s linear; -webkit-transition: all 0.35s linear;}

/*LES BULLES*/
.le-staff .bibi {margin-top:0px; margin-left: 12px; width:200px; text-align:center; font-size:0; line-height:0; text-align:center;}
.le-staff .bibi label {position:relative; display:inline-block; margin:0 5px;padding:1px; font-size: 10px; transition: all 0.5s;color: #ffffff;}
.le-staff .bibi label:after {position:absolute; left: -1px; top: -1Px;content:''; padding:4px; border-radius:50%; opacity: 0;}
.le-staff .bibi label:hover:after {opacity: 1;}
.le-staff > input:nth-of-type(1):checked ~ .bibi label:nth-of-type(1):after,
.le-staff > input:nth-of-type(2):checked ~ .bibi label:nth-of-type(2):after,
.le-staff > input:nth-of-type(3):checked ~ .bibi label:nth-of-type(3):after,
.le-staff > input:nth-of-type(4):checked ~ .bibi label:nth-of-type(4):after,
.le-staff > input:nth-of-type(5):checked ~ .bibi label:nth-of-type(5):after,
.le-staff > input:nth-of-type(6):checked ~ .bibi label:nth-of-type(6):after,
.le-staff > input:nth-of-type(7):checked ~ .bibi label:nth-of-type(7):after,
.le-staff > input:nth-of-type(<img src="https://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />:checked ~ .bibi label:nth-of-type(<img src="https://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />:after {
opacity: 1;
}
.le-staff > input {
display:none;
}
  .le-staff > input:nth-of-type(11):checked ~ ul li:first-of-type {
margin-left:-1000%;
}
  .le-staff > input:nth-of-type(10):checked ~ ul li:first-of-type {
margin-left:-900%;
}
  .le-staff > input:nth-of-type(9):checked ~ ul li:first-of-type {
margin-left:-800%;
}
.le-staff > input:nth-of-type(<img src="https://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />:checked ~ ul li:first-of-type {
margin-left:-700%;
}
  .le-staff > input:nth-of-type(7):checked ~ ul li:first-of-type {
margin-left:-600%;
}
.le-staff > input:nth-of-type(6):checked ~ ul li:first-of-type {
margin-left:-500%;
}
.le-staff > input:nth-of-type(5):checked ~ ul li:first-of-type {
margin-left:-400%;
}
.le-staff > input:nth-of-type(4):checked ~ ul li:first-of-type {
margin-left:-300%;
}
.le-staff > input:nth-of-type(3):checked ~ ul li:first-of-type {
margin-left:-200%;
}
.le-staff > input:nth-of-type(2):checked ~ ul li:first-of-type {
margin-left:-100%;
}
.le-staff > input:nth-of-type(1):checked ~ ul li:first-of-type {
margin-left:0%;
}

/*CODAGE STAFF ONGLET*/
.staff-inside {position: relative;width: 200px;height: 100px;}
.staff-inside .gauche {position: absolute; top: 11px;left: 8px;}
.staff-inside .gauche img {width: 60px;height: 95px;object-fit: cover;object-position: 50% 25%;filter: saturate(100%);border: 2px solid #4d4248; transition: all 0.8s;}
.staff-inside .gauche img:hover { filter: saturate(200%);}
.staff-inside .droite {position: absolute; top: 15px;left: 85px;}
.staff-inside .droite .pseudo {width: 150px;text-align: center; position: relative;white-space: nowrap;}
.sous { margin-top: -3px;text-align: center;padding-bottom: 1px;}
.lienmp-mp {margin-top: 2px;text-align: center;padding: 1px;}
.lienmp-mp a {padding: 0px; }
.quote{padding: 5px; margin-top: 5px; font-size: 9px; text-align: justify; line-height: 10px;}

</style> <script type="text/javascript">$(function() {
  $('.tabs-onglets').each(function(){
   var onglets = this;
   var ongletActuel = $('a:first', onglets).addClass('selected').attr('href');

   // Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
   $(ongletActuel).show().siblings().hide();

   // Gestion de l'événement clic
   $('a', onglets).click(function(e) {
   var idOnglet = $(this).attr('href');

   // Si autre onglet, afficher le contenu demandé et masquer le contenu restant
   if (idOnglet != ongletActuel) {
   $(idOnglet).fadeIn().siblings().hide();

   // Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
   $('a', onglets).removeClass('selected');
   $(this).addClass('selected');
   ongletActuel = idOnglet;
   }

   // Empêche le déclenchement du lien
   e.preventDefault();
   });
  });
});</script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pirata+One" />
<div class="le-staff"><input checked="" id="STAFF1" name="navSTAFF" type="radio" /><input id="STAFF2" name="navSTAFF" type="radio" /><input id="STAFF3" name="navSTAFF" type="radio" />
<ul>

   <li>
      <a target="_blank" href="https://divin.forumactif.com/u2"> <img src="https://www.zupimages.net/up/22/34/fc9o.png" /> </a>
   </li>

   <li>
      <a target="_blank" href="https://divin.forumactif.com/u3"> <img src="https://www.zupimages.net/up/22/34/zd12.png" /> </a>
   </li>

   <li>
      <a target="_blank" href="https://divin.forumactif.com/u1"> <img src="https://zupimages.net/up/22/34/pygw.png" /> </a>
   </li>

   <div class="bibi">

      <div>
         <label for="STAFF1">☾</label><label for="STAFF2">☆</label><label for="STAFF3">☽</label>
      </div>

   </div>

</ul>
</div>

pa htlm:

Code:: <br /> <title>PA DIVIN</title><meta charset="utf-9" /> <meta charset="utf-8" /> <meta content="chrome=1" http-equiv="X-UA-Compatible" /> <meta content="Codaslider : JQuery Slider Plugin" name="description" /> <link rel="stylesheet" href="http://ahp.li/c33f1cb6aeb66e99fdcb.css" /> <style type="text/css" media="screen">

   /****FONTS****/
a {text-decoration: none; color:#8E9AA2;}
a:link { text-decoration: none; transition: 0.5s;
  -webkit-transition: 0.5s;}
a:hover {text-decoration: none!important; color:#5D1839; }

@font-face {
  font-family: Catcher;
  src: url(https://dl.dropbox.com/s/fb70e3qhpibipzs/breamcatcher%20rg.otf?);
}

@font-face {
  font-family: Oswald;
  src: url(https://dl.dropbox.com/s/dva79no60rr3uur/Oswald-Light.ttf?);
}

@font-face {
  font-family: Inconsolata;
  src: url(https://dl.dropbox.com/s/o96bzsaaqorup2d/Inconsolata-VariableFont_wdth%2Cwght.ttf?);
}

@font-face {
  font-family: Elsie;
  src: url(https://dl.dropbox.com/s/9y6uo2z6tq98crh/Elsie-Regular.ttf?);
}


   m {
  font-family: 'Oswald', sans-serif;
  font-size:10px;
  font-style:italic;
  color:#863779;
  text-transform:uppercase;
  letter-spacing:0.5px;}

v {
  font-family: 'Oswald', sans-serif;
  font-size:10px;
  font-style:italic;
  color:#917056;
  text-transform:uppercase;
  letter-spacing:0.5px;}

j {
  font-family: 'Oswald', sans-serif;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:#8e9aa2;}

   s {
   font-family: 'Elsie';
   font-size:12px;
   color: #917056;
   }

   k {
   font-family: 'Elsie';
   font-size:12px;
   font-variant: smallcaps;
   color: #732b59;
   letter-spacing:1px;
   }

   f {
   font-family: 'Elsie';
   font-size:12px;
   font-style:italic;
   color: #49426f;
   }

   n {
   font-family: 'Elsie';
   font-size:14px;
   font-variant: small-caps;
   color: #49426f;
   text-decoration: underline #8e8ba7;
   text-decoration-thickness: 3px;
   }

   o {
   font-family: 'Elsie';
   font-size:14px;
   font-variant: small-caps;
   color: #863779;
   text-decoration: underline #8e8ba7;
   text-decoration-thickness: 3px;
   }
/****DÉBUT SCROLLBAR****/
::-webkit-scrollbar {
width: 4px;
height: 20px;}
::-webkit-scrollbar-track-piece {
background-color: #04050D;}
::-webkit-scrollbar-thumb:vertical {
  height: 20px;
background-color: #35335b;}
::-webkit-scrollbar-thumb:horizontal{
height: 4px;
background-color:#35335b;}
/****FIN SCROLLBAR****/

/*body*/


   body {
   margin: 0, auto;
}



   /*FICHE*/

   #pa {background: url(https://www.zupimages.net/up/22/34/9km4.png);
  width: 800px;
  height: 700px;
  poition: relative;
  background-repeat: no-repeat;}

   .fichetitre2{
  font-family:'Catcher';
  font-size:17px;
  color:#bb5023;
  text-transform:uppercase;
  text-align:center;
  margin:auto;
  letter-spacing:0.5px;
  width:250px;
  height:20px;
  border-bottom: 0.5px solid #3e3955;
}
.fichecitation2{
  font-family:'Elsie';
  color:#d4bdb4;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  text-align:center;
  margin:auto;
  width:250px;
}
.partenaires img{
  padding:5px;
}
.liensutiles {
   position: relative;
   top: 5px;
}
.liensutiles a {
   background: #04050D;
   border: 1px solid #3e3955;
   font-family: Oswald;
   font-size: 10px;
   text-transform: uppercase;
   font-weight: bolder;
   display: inline-block;
   border-radius: 3px;
   line-height: 21px;
   padding: 0px 5px;
   margin-right: 3px;
   width: 30px;
   margin: 3px;
}
.pvs {
   margin-top: 10px;
   margin-left: -5px;
   }
.pvs img {
   width: 55px;
   height: 80px;
   border: 0.5px solid #3e3955;
   border-radius:3px;
   object-fit: cover;
   object-position: 50% 25%;
   background-size: 100px!important;
   margin: 5px;
   display: inline-block;
   box-shadow: 1px 1Px 2Px rgba(0,0,0,0.2);
   filter: grayscale(1);
   opacity: 1;
   }
.pvs img:hover {
   filter: saturate(100%);;
   }

.mdm img {
   width: 60px;
   height: 90px;
   display: inline-block;
   margin: 4px;
   object-fit: cover;
   border-radius: 3px;
   border: 0.5px solid #3e3955;
}

.écritures {
  color:#d4bdb4;
  font-size:8px
  text-align:center;
  margin:auto;
  letter-spacing:0.5px;
}

   /*SLIDER*/

   /*SLIDER*/

.coda-slider-wrapper {width: 320px!important; height: 380px;position: absolute; margin-top: 260px; margin-left: 385px;overflow-x: hidden!important;overflow-y: hidden!important;}
.coda-slider-wrapper .coda-slider {width: 280px!important; height: 420px; overflow-x: hidden!important; overflow-y: hidden!important; }
.coda-slider-wrapper .coda-slider .panel {width: 280px!important; height: 420px; display: inline-block; overflow-x: hidden!important; overflow-y: hidden!important;text-align:justify; }
.coda-slider-wrapper .coda-slider .panel .panel-wrapper {overflow-x: hidden!important; overflow-y: hidden!important;padding: 0px; }
.coda-slider-wrapper .coda-nav { display: none; }
.coda-slider-wrapper .coda-nav .current { display: none; }
.coda-slider-wrapper .coda-nav a { display: none; }
.coda-slider-wrapper .coda-nav a:hover { display: none; }
.coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right { }
.coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a { text-shadow: 0px 0px 0px transparent!important;color: transparent!important; padding: 5px; width: 10px; height: 20px; display: inline-block;margin-top:145px;}
.coda-slider-wrapper .coda-nav-right {float:right!important;}
.coda-slider-wrapper .loading { height: 100%;padding: 20px;text-align: justify; }
.arrows .coda-slider { margin: 0 0px; }
.coda-slider-wrapper { clear: both;overflow: auto; }
.coda-slider-wrapper .coda-slider { float: left;overflow: hidden; position: relative; }
.coda-slider-wrapper .coda-slider .panel-container {position: relative; }
.coda-slider-wrapper .coda-slider .panel-container .panel { display: inline-block;float: left; }
.coda-slider-wrapper .coda-nav { }
.coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-right {float: left; }
.coda-slider-wrapper .coda-nav-left a, .coda-slider-wrapper .coda-nav-right a { display: block;text-align: justify; text-decoration: none; }
.coda-slider-wrapper .coda-nav-left, .coda-slider-wrapper .coda-nav-left-arrow { clear: both; }

   /*PANEL*/
   .panel-interieur {height: 350px;margin: 7px;margin-right: 7px;color: #645C70;font-family: verdana;font-size: 10px;}


   .liens { display: block; position: absolute; }
   .groupes { width: 57px; height: 16px; left: 663px; top: 244px;}
   .listings { width: 57px; height: 16px; left: 663px; top: 298px;}
   .invités { width: 57px; height: 16px; left: 527px; top: 325px;}
   .partenariats { width: 75px; height: 16px; left: 655px; top: 325px;}

   .avatars { width: 89px; height: 18px; left: 449px; top: 115px;}
   .postesvacants { width: 89px; height: 18px; left: 449px; top: 140px;}
   .scénarios { width: 89px; height: 18px; left: 449px; top: 160px;}

   .contexte { width: 89px; height: 18px; left: 560px; top: 115px;}
   .annexes { width: 89px; height: 18px; left: 560px; top: 140px;}
   .règlement { width: 89px; height: 18px; left: 560px; top: 160px;}
</style>
 <script src="https://ahp.li/ae4e8038ead1f9dfe8c5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
 <script src="https://ahp.li/c2c9d227eecd2d4290c5.js"></script> <script>
   $(function(){

   /* Here is the slider using default settings */
   $('#slider-id').codaSlider();
   /* If you want to adjust the settings, you set an option
   as follows:

   $('#slider-id').codaSlider({
   autoSlide:true,
   autoHeight:false
   });

   */
   });


   </script>
<div id="pa">

<div class="fond">

   <div class="coda-slider" id="slider-id">

      <div>

         <div class="panel-interieur">

            <div class="écritures">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mollis sapien. Maecenas quis tristique mauris. Nullam vitae molestie elit. Curabitur gravida tortor dui, at fringilla odio congue a. Nulla vitae porttitor ligula, nec posuere dolor. Etiam interdum ligula nec dui interdum, sit amet volutpat urna blandit. Suspendisse ante nisi, elementum efficitur facilisis non, vestibulum eu augue. Morbi id congue nulla. Duis feugiat diam ut justo tincidunt, ut consectetur dolor fringilla. Ut turpis odio, eleifend eget fermentum quis, tempus non nunc.<br /><br /><br />Donec eu dui ipsum. Maecenas varius velit quis urna pretium maximus. Vestibulum efficitur eros consectetur, molestie nulla a, pulvinar tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae finibus lacus, quis luctus felis. Praesent sit amet diam laoreet orci hendrerit ornare. Maecenas eu est in enim consectetur convallis vitae in nulla. Maecenas ut nisl nec ligula ullamcorper tempor at nec erat.
            </div>

         </div>

      </div>

      <div>

         <div class="panel-interieur">

            <div class="écritures">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec mollis sapien. Maecenas quis tristique mauris. Nullam vitae molestie elit. Curabitur gravida tortor dui, at fringilla odio congue a. Nulla vitae porttitor ligula, nec posuere dolor. Etiam interdum ligula nec dui interdum, sit amet volutpat urna blandit. Suspendisse ante nisi, elementum efficitur facilisis non, vestibulum eu augue. Morbi id congue nulla. Duis feugiat diam ut justo tincidunt, ut consectetur dolor fringilla. Ut turpis odio, eleifend eget fermentum quis, tempus non nunc.
            </div>
            <br /><br />
            <div class="fichetitre2">
               Les nouvelles de DIVIN ☆
            </div>

            <div class="fichecitation2">
               les nouveautés et co'
            </div>
            <br /><j>00/00/00 ☾</j> Blabla<br /> <j>00/00/00 ☾</j> Blabla<br /> <j>00/00/00 ☾</j> Blabla<br /> <j>00/00/00 ☾</j> Blabla
         </div>

      </div>

      <div>

         <div class="panel-interieur">

            <div class="fichetitre2">
               Nos meilleurs amis ☆
            </div>

            <div class="fichecitation2">
               les alliances de DIVIN
            </div>
            <br />
            <center>

               <div class="partenaires">
                  <select onchange="location = this.value" style="width: 268px;"> <option selected="selected">TOP PARTENAIRES</option> <option value="url1-de-renvoi">choix 1</option> <option value="url2-de-renvoi">choix 2</option> <option value="url3-de-renvoi">choix 3</option> <option value="url4-de-renvoi">choix 4</option></select>
               </div>

            </center>

         </div>

      </div>

   </div>

</div><a target="_blank" href="https://divin.forumactif.com/t14-bottin-les-visages-du-forum" class="liens avatars"></a> <a target="_blank" href="https://divin.forumactif.com/f22-pre-liens-des-membres" class="liens postesvacants"></a> <a target="_blank" href="https://divin.forumactif.com/f10-on-les-attend" class="liens scénarios"></a> <a target="_blank" href="https://divin.forumactif.com/t3-contexte-notre-base" class="liens contexte"></a> <a target="_blank" href="https://divin.forumactif.com/t7-annexe-les-dieux-et-deesses-hades-athenes-bref-tout-savoir" class="liens annexes"></a> <a target="_blank" href="https://divin.forumactif.com/t6-reglement-nos-lois" class="liens règlement"></a>
<div style="margin-left: 62px;">
   <br /><br /><br /><br /><iframe frameborder="0" allowfullscreen="" marginwidth="0px" marginheight="0px" scrolling="no" name="" style="width: 240px; height: 170px;" src="h71-staff"></iframe>
</div>

</div>