Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le deal à ne pas rater :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

 :: Se mettre au poil :: Codes Randoms Voir le sujet précédent Voir le sujet suivant Aller en bas
PA NAZELL slide
Messages : 173
Date d'inscription : 27/03/2013
Soonsony Nooby
Soonsony Nooby
Admin



Sam 9 Sep - 9:42
Code:
<div class="fondPA">
               
<div class="slider-btns">
       <label class="slider-btn" for="slide_1"><img src="https://www.zupimages.net/up/23/34/3c4y.png" /></label> <label class="slider-btn" for="slide_2"><img src="https://www.zupimages.net/up/23/34/l1k3.png" /></label> <label class="slider-btn" for="slide_3"><img src="https://www.zupimages.net/up/23/34/gx5m.png" /></label>        
</div>
               
<div class="slider" data-creator="nazell.space">
          <input type="radio" id="slide_1" name="slide" checked="" />          
<div class="slide" data-id="1">
                       
<div class="blocpredef">
                                                             
<div class="blocpredef1">
<img src="https://www.zupimages.net/up/23/28/00qv.jpg" /> <a href="https://ile-safari-rpg.forumactif.com/t41-libre-ricin-chlori">CHLORI </a>
</div>

<div class="blocpredef2">
<img src="https://www.zupimages.net/up/23/28/6les.jpg" /> <a href="https://ile-safari-rpg.forumactif.com/t48-libre-cruz-timon">TIMON </a>
</div>

<div class="blocpredef3">
<img src="https://www.zupimages.net/up/23/28/rs5y.jpg" /><a href="https://ile-safari-rpg.forumactif.com/t47-libre-moen-leonelle"> LEONELLE </a>
</div>

<div class="blocpredef4">
<img src="https://www.zupimages.net/up/23/27/igmn.jpg" /><a href="https://ile-safari-rpg.forumactif.com/t26-libre-tahiri-komeo"> KOMEO</a>
</div><a href="https://ile-safari-rpg.forumactif.com/f4-personnages-predefinis">voir + de prédéfinis libres (total 11)</a>                                                            
</div>
                                                                 
<div class="blocstaff">
                                                             
<div class="titrestaff">
                               les larbins à vot' service                                
</div>
                                                             
<div class="staff1">
                               <img src="https://www.zupimages.net/up/23/34/c7sz.png" />                        
<div>
                        Maki - Fonda MdJ<br /><strong>présente</strong><br /><a href="#">MP</a>                          
</div>
                                                       
</div>
                                                             
<div class="staff2">
                               <img src="https://www.zupimages.net/up/23/34/r61e.png" />                        
<div>
                        Eden - MdJ<br /><strong>présent</strong><br /><a href="#">MP</a>                          
</div>
                                                         
</div>
                                                             
<div class="staff3">
                               <img src="https://www.zupimages.net/up/23/25/5ew8.png" />                        
<div>
                        NO STAFF<br /><strong>hahaha</strong><br /><a href="#">MP</a>                          
</div>
                                                       
</div>
                                                             
<div class="staff4">
                               <img src="https://www.zupimages.net/up/23/25/5ew8.png" />                        
<div>
                        NO STAFF<br /><strong>hahaha</strong><br /><a href="#">MP</a>                          
</div>
                                                         
</div>
                                                             
</div>
                                                           
<div class="bloctoppartos">
                       
<div class="titretoppartos">
                               les légendaires                                
</div>
                               
<div class="toppartos">
                               <a target="_blank" href="https://idragon.forumactif.com/"><img src="https://i.imgur.com/aCMNEPL.png" /></a><a target="_blank" href="https://7goldenrings.forumactif.com/"><img src="https://i.imgur.com/d3b9w3Q.png" /></a><a target="_blank" href="https://oneiros.forumactif.com/"><img src="https://i.servimg.com/u/f10/11/44/54/89/505010.png" /></a><a target="_blank" href="https://monde-tenebres.forumactif.com/"><img src="https://i.servimg.com/u/f62/13/23/07/03/_bouto10.png" /></a><a target="_blank" href="#"><img src="https://www.zupimages.net/up/23/24/xhl7.png" /></a><a target="_blank" href="#"><img src="https://www.zupimages.net/up/23/24/xhl7.png" /></a>                                            
</div>
                                                               
</div>
                                                               
<div class="topsitebloc">
                         
<div class="topsitetitre">
                                                                                                                                                                                                                                   top-sites                                                                                                                                                                                                                                    
</div>
                                                                                                                                                                                                     
<div class="topsite1">
                                                                                                    <a href="http://www.root-top.com/topsite/virtu4lschool/in.php?ID=3101" target="_blank"><img src="https://www.zupimages.net/up/23/25/5ew8.png" /></a>                                                                                                
</div>
                                                                                                                                                                                                       
<div class="topsite2">
                                                                                                    <a href="http://www.root-top.com/topsite/korben/in.php?ID=14566" target="_blank"><img src="https://www.zupimages.net/up/23/25/ha4o.png" /></a>                                                                                                    
</div>
                                                                                                                                                                                                       
<div class="topsite3">
                                                                                                    <a href="http://www.root-top.com/topsite/virtu4lhunt3r/in.php?ID=3134" target="_blank"><img src="https://www.zupimages.net/up/23/25/dqmx.png" /></a>                                                                                                    
</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                               
</div>
                                                         
<div class="bloclienPA">
                                                                                                                                                                                                                                                                                                                                                                                         
<div class="liensu">
                                                                                                                                                                                           <a href="https://ile-safari-rpg.forumactif.com/t14-demande-de-partenariat">Partenariat</a>                                                                                                                                                                                            
</div>
                                                                                                                                                                                                                                                                                                                                                                                         
<div class="liensu">
                                                                                                                                                                                           <a href="https://ile-safari-rpg.forumactif.com/t32-guide-d-arrivee#50">Guide d'arrivée</a>                                                                                                                                                                                            
</div>
                                                                                                                                                                                                             
<div class="liensu">
                                                                                                                                                                                           <a href="https://ile-safari-rpg.forumactif.com/t23-les-excursions-safari">Safari</a>                                                                                                                                                                                            
</div>
                                                                                                                                                                             
<div class="liensu">
                                                                                                                                                                                           <a href="https://ile-safari-rpg.forumactif.com/t55-4-la-carte#95">carte</a>                                                                                                                                                                                            
</div>
                                                                                                                                                                                                                                                                                                                                                                                         
<div class="liensu">
                                                                                                                                                                                           <a href="https://discord.gg/XWmQJBNrNm">discord</a>                                                                                                                                                                                            
</div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                     
</div>
                 
</div>
         <input type="radio" id="slide_2" name="slide" />          
<div class="slide" data-id="2">
                               
<div class="blocpkmnpension">
                                                                           
<div class="titrepkmnpension">
                                      pokémons à adopter                                      
</div>
                                                                           
<div class="pkmnpension">
                                                                           
<div>
                                      <img src="https://www.zupimages.net/up/23/34/hxwz.png" />                                      
</div>
                                                                           
<div>
                                      <img src="https://www.zupimages.net/up/23/34/hxwz.png" />                                      
</div>
                                                                           
<div>
                                      <img src="https://www.zupimages.net/up/23/34/hxwz.png" />                                      
</div>
                                                                           
<div>
                                      <img src="https://www.zupimages.net/up/23/34/hxwz.png" />                                      
</div>
                                                                           
<div>
                                      <img src="https://www.zupimages.net/up/23/34/hxwz.png" />                                      
</div>
                                                                           
<div>
                                      <img src="https://www.zupimages.net/up/23/34/hxwz.png" />                                      
</div>
                                                                           
</div>
                                                                           
</div>
                                                                           
<div class="blocechangepa">
                                                                         
<div class="titreechangepa">
                                     ils ont des pokémons à échanger !                                      
</div>
                                                                         
<div class="echangepa">
                                     nom du joueur : 0 pokémon<br />nom du joueur : 0 pokémon<br />nom du joueur : 0 pokémon<br />nom du joueur : 0 pokémon<br />nom du joueur : 0 pokémon<br />nom du joueur : 0 pokémon<br />                                      
</div>
                                                                                   
</div>
                                                                       
<div class="blocvedettepkmn">
                                                                       
<div class="titrevedettepkmn">
                                    à ne pas manquer                                    
</div>
                                                                       
<div class="soustitrevedettepkmn">
                                    disponible à l'échange/adoption                                    
</div>
                                                                       
<div class="vedettepkmn">
                                    <img src="https://www.pokepedia.fr/images/thumb/1/14/Polarhume-NB.png/175px-Polarhume-NB.png" /><strong>POLARHUME</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a leo eros. Donec convallis faucibus lectus, a dignissim odio aliquam ac. Cras et justo lorem. Etiam lacus nunc, scelerisque in placerat id, congue sit amet mauris. Quisque in euismod magna. Quisque nunc dolor, finibus quis faucibus gravida, auctor ut ex.                                    
</div>
                                                                       
</div>
                 
</div>
         <input type="radio" id="slide_3" name="slide" />          
<div class="slide" data-id="3">
         SLIDER 3          
</div>
               
</div>
           
<div style="" class="imgfondpa">
                                       <img src="https://www.zupimages.net/up/23/34/pog6.png" />                                        
</div>
             
</div>
Revenir en haut Aller en bas
Messages : 173
Date d'inscription : 27/03/2013
Soonsony Nooby
Soonsony Nooby
Admin



Sam 9 Sep - 9:43
Code:
/**
* Animation
**/
@keyframes slidein {
  0% { order: 2; opacity: 0; }
   100% { order: 2; opacity: 1; }
}

.slider {
   --width: 400px;
   --height: 400px;
   
   display: grid;
   /* styles */
   min-width: var(--width);
   max-width: var(--width);
   min-height: var(--height);
   max-height: var(--height);
   margin: 2em auto;
}
/*
   Cache les inputs
*/
.slider > input[name="slide"] {
   appearance: none;
   display: none;
}
/*
   Empile les slides les unes sur les autres comme un paquet de carte
*/
.slider > .slide {
   grid-area: 1/1;
   width: 100%;
   height: 100%;
}
/*
   Quand un input est coché
   La slide juste en-dessous de l'input se met au-dessus de la pile
*/
input[name="slide"]:checked + .slide {
   order: 2;
   opacity: 1;
   animation-delay: .5s;
   animation: 2s slidein;
}
/*
   Styles et Comportement par défaut de chaque slide
*/
.slide {
   background: white;
   order: 1;
   opacity: 0;
   transition: .5s opacity;
}
/*
   Définition des styles personnalisés pour chaque slide
*/
.slide[data-id="1"] {
position: absolute;
    right: 0;
    top: 0;
    width: 648px;
}
.slide[data-id="2"] {
position: absolute;
    right: 0;
    top: 0;
    width: 648px;
}
.slide[data-id="3"] {
position: absolute;
    right: 0;
    top: 0;
    width: 648px;
}

/*
   Styles de la balise qui entour les boutons du slider
*/
.slider-btns{
    width: 300px;
    border: none;
    position: absolute;
    left: 0;
    top: 0;
}
/*
   Styles par défaut des boutons
*/
.slider-btn {
   padding: .3em .5em;
   cursor: pointer;
}
Revenir en haut Aller en bas
Page 1 sur 1
Sauter vers: