AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    PA Pokémon

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9754

    le Ven 13 Juin 2014 - 20:42

    Rappel du premier message :

    Plop,

    Suite à une demande de Cruelly voici le LS qui découle.
    Un petit merci ne coûte rien et motive celui ou celle qui partage Wink

    Page d'accueil


    Version  phpBB2 ▬ CSS & HTML ▬ Info-bulles sur le staff, les prédef et les évènements

    Aperçu ▬ www
    Le QEEL assorti et les catégories qui vont avec


    CSS
    Code:
       /* --------------------------------- PA --------------------------------- */

        /* Base de la PA */
        .fond_PA {
          background-color: #99D9D8;
          width: 690px;
          padding: 20px;
          border-radius: 50px;
          text-align: justify;
          font-size: 11px;
        }

        .titre_PA {
          position: relative;
          top: -1.3em;
          font-family: 'Lobster', cursive;
          font-size: 35px;
          color: #25867F;
          text-shadow: 1px 1px 2px white;
          text-align: center;
        }

        .sous_titre_PA {
          position: relative;
          top: -0.5em;
          z-index: 1;
          font-family: 'Lobster', cursive;
          font-size: 25px;
          color: #25867F;
          text-shadow: 1px 1px 2px white;
          text-align: center;
        }

        /* Blocs à fond bleu de la PA + couleur de leurs liens */
        .bloc_PA {
          background-color: #B3E3E3;
          color: #377B7A;
          border-radius: 25px;
          padding: 15px;
          font-size: 11px;
          position: relative;
          top:-2em;
          left: -1em;
          text-align: justify !important;
        }

        .bloc_PA a {
          color: #295654 !important;
          text-decoration: none !important;
        }

        /* Bloc spécial pour la navigation */
        .bloc_PA_navig {
          background-color: #B3E3E3;
          color: #377B7A;
          border-radius: 25px;
          padding-top: 15px;
          padding-bottom: 15px;
          font-size: 11px;
          position: relative;
          top:-2em;
          left: -1em;
          text-align: justify !important;
        }

        /* Liens de la navigation */
        .bloc_PA_navig a {
          text-decoration: none !important;
          color: #295654 !important;
        }

        /*Fond "normal" des liens */
        #liens_navig a {
          background-color: #8CC8C1;
          display: block;
        }

        /* Fond des liens au survol */
        #liens_navig a:hover {
          background-color: #99CDFF;
          display: block;
        }

        /* Info-bulles staff et vacants */
        a.info{
          position: relative;
          z-index: 24;
          color: #000;
          text-decoration: none;
        }
        
        a.info:hover{
          z-index: 25;
        }
        
        a.info span{
          display: none;
        }
        
        a.info:hover span{
          display: block;
          position: absolute;
          top: -8em;
          right: -10em;
          width: 100px;
          height: 200px;
          border-radius: 25px;
          overflow: auto;
          background-color: #B3E3E3;
          text-align: center;
          font-weight: none;
          padding: 5px;
        }

        /* Rotations des images au survol du staff et des vacants */
        .imgstaff {
          border-radius: 80%;
          -moz-transition-duration: 1s;
          -moz-transition-timing-function: linear;
          -webkit-transition-duration: 1s;
          -webkit-transition-timing-function: linear;
          transition-duration: 1s;
          transition-timing-function: linear;
        }

        .imgstaff:hover {
          border-radius: 80%;
          -moz-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }

        /* Info-bulles Evènements */
        a.events{
          position: relative;
          z-index: 24;
          color: #000;
          text-decoration: none;
        }
        
        a.events:hover{
          z-index: 25;
        }
        
        a.events span{
          display: none;
        }
        
        a.events:hover span{
          display: block;
          position: absolute;
          top: -8em;
          right: -10em;
          width: 200px;
          height: 60px;
          overflow: auto;
          border-radius: 25px;
          overflow: auto;
          background-color: #B3E3E3;
          text-align: center;
          font-weight: none;
          padding: 5px;
        }

        /* Rotation au survol images évènements */
        .imgevents {
          border-radius: 25px;
          -moz-transition-duration: 1s;
          -moz-transition-timing-function: linear;
          -webkit-transition-duration: 1s;
          -webkit-transition-timing-function: linear;
          transition-duration: 1s;
          transition-timing-function: linear;
        }

        .imgevents:hover {
          border-radius: 25px;
          -moz-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }

        /* --------------------------------- FIN PA --------------------------------- */

    PA
    Code:
    <br /><br />
    <div class="fond_PA">
       
       <div class="titre_PA">
           Bienvenue sur Arka Snow
       </div>
       
       <table>
          
          <tbody>
             
             <tr>
                
                <td>
                   
                   <div class="sous_titre_PA">
                       Concept
                   </div>
                   
                   <div class="bloc_PA" style="width: 150px; height: 230px; overflow: auto;">
                      
                      <center>
                          <img src="http://nsa33.casimages.com/img/2014/06/13/140613065031340116.gif" style="border-radius: 25px;" />
                      </center><br />Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia. Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur. Mox dicta finierat, multitudo omnis ad, quae imperator voluit, promptior laudato consilio consensit in pacem ea ratione maxime percita, quod norat expeditionibus crebris fortunam eius in malis tantum civilibus vigilasse, cum autem bella moverentur externa, accidisse plerumque luctuosa, icto post haec foedere gentium ritu perfectaque sollemnitate imperator Mediolanum ad hiberna discessit. <a href="#">La suite</a>
                   </div>
                   
                </td>
                
                <td style="width: 20px;">
                   
                </td>
                
                <td>
                   
                   <div class="sous_titre_PA">
                       Le staff
                   </div>
                   
                   <div class="bloc_PA" style="width: 170px;">
                      
                      <center>
                          <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/1511.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a>
                      </center>
                      
                   </div>
                    <br />
                   <div class="sous_titre_PA">
                       Postes vacants
                   </div>
                   
                   <div class="bloc_PA" style="width: 170px;">
                      
                      <center>
                          <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a><br /><a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/47/68/10/sans_t11.png" class="imgstaff" /><span><img src="http://i39.servimg.com/u/f39/18/47/68/10/3610.png" style="border-radius: 15px;" /><br />Pseudo<br />Informations</span></a> <br /><br /><a href="#">Les autres</a> - <a href="#">Les scénarios</a>
                      </center>
                      
                   </div>
                   
                </td>
                
                <td style="width: 20px;">
                   
                </td>
                
                <td>
                   
                   <div class="sous_titre_PA">
                       Concours & Events
                   </div>
                   
                   <div class="bloc_PA">
                      
                      <center>
                          <nobr><a class="events"><img src="http://i39.servimg.com/u/f39/18/47/68/10/4510.png" class="imgevents" /><span>Le texte que tu veux</span></a> <a class="events"><img src="http://i39.servimg.com/u/f39/18/47/68/10/4510.png" class="imgevents" /><span>Le texte que tu veux</span></a> </nobr>
                      </center>
                      
                   </div><br />
                   <table>
                      
                      <tbody>
                         
                         <tr>
                            
                            <td>
                               
                               <div class="sous_titre_PA">
                                   Navigation
                               </div>
                               
                               <div class="bloc_PA_navig" style="width: 135px;">
                                  
                                  <center>
                                     
                                     <div id="liens_navig">
                                         <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a>
                                     </div>
                                     
                                  </center>
                                  
                               </div>
                               
                            </td>
                            
                            <td style="width: 20px;">
                               
                            </td>
                            
                            <td>
                               
                               <div class="sous_titre_PA">
                                   Annonces
                               </div>
                               
                               <div class="bloc_PA" style="width: 135px;">
                                   <span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /> <span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br /><span style="color: #77B652;"> XX/XX </span> Nouveauté <a href="#" style="color: #77B652 !important;">La suite</a> <br />
                               </div>
                               
                            </td>
                            
                         </tr>
                         
                      </tbody>
                      
                   </table>
                   
                </td>
                
             </tr>
             
          </tbody>
          
       </table>
       <p style="font-size: 9px; position: relative; top: -1.5em;" align="right">
           © Halloween sur <a href="http://www.never-utopia.com/" style="color: #295654 !important;">Never Utopia</a>
       </p>
    </div>




    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Halloween le Mar 22 Juil 2014 - 22:02, édité 5 fois




    < / Libre service codage >
    avatar
    Neko-Rika
    FémininAge : 19Messages : 115

    le Mar 1 Juil 2014 - 17:44

    Ouah ! Vraiment sublime !
    avatar
    Bennington'
    MasculinAge : 22Messages : 20

    le Mer 2 Juil 2014 - 5:46

    Merci
    avatar
    Milka
    FémininAge : 30Messages : 112

    le Jeu 3 Juil 2014 - 14:56

    Elle est super mignonne, merci :)
    avatar
    Fayzl4D
    MasculinAge : 22Messages : 84

    le Ven 4 Juil 2014 - 15:58

    merci
    avatar
    Eirlys
    FémininAge : 26Messages : 66

    le Sam 5 Juil 2014 - 1:13

    merci
    avatar
    Dearborn
    FémininAge : 24Messages : 110

    le Sam 5 Juil 2014 - 9:46

    Merci beaucoup :3!
    avatar
    Lust Caution
    FémininAge : 24Messages : 79

    le Sam 5 Juil 2014 - 14:09

    Un gros merci pour le partage que tu nous offres.
    avatar
    Invité

    le Dim 6 Juil 2014 - 12:13

    Merci ^^
    avatar
    Invité

    le Dim 6 Juil 2014 - 15:33

    C'est tout beau ! *p*
    Merci.
    avatar
    Vixinte
    FémininAge : 20Messages : 90

    le Dim 6 Juil 2014 - 17:16

    Merci pour le partage, toujours aussi bien !
    avatar
    TUC
    FémininAge : 30Messages : 103

    le Dim 6 Juil 2014 - 17:52

    Merci :) c'est superbe :)



    avatar
    GreenGage
    FémininAge : 25Messages : 73

    le Dim 6 Juil 2014 - 18:22

    Merci du partage !
    avatar
    ( Lou' )
    FémininAge : 23Messages : 108

    le Dim 6 Juil 2014 - 21:22

    Merci **
    avatar
    Tine
    FémininAge : 20Messages : 37

    le Lun 7 Juil 2014 - 1:33

    Merci ♥
    Phénix'
    FémininAge : 17Messages : 93

    le Lun 7 Juil 2014 - 11:53

    Merci très très très très joliieeee !
    avatar
    Titou2302
    MasculinAge : 15Messages : 95

    le Lun 7 Juil 2014 - 17:21

    Merci

    avatar
    Zarwins
    FémininAge : 22Messages : 154

    le Mar 8 Juil 2014 - 5:13

    merci !



    avatar
    SamyChou
    FémininAge : 21Messages : 31

    le Mar 8 Juil 2014 - 11:54

      Merci beaucoup pour avoir mis cette PA en LS ! Very Happy
    avatar
    JasLo
    FémininAge : 16Messages : 76

    le Mar 8 Juil 2014 - 16:42

    Merci! Parfait pour mon fow pokémon!
    avatar
    Féhéla
    FémininAge : 45Messages : 238

    le Mar 8 Juil 2014 - 22:15

    jamais 2 sans 3 ! Merci pour ce trio Pokemon
    avatar
    Pandora Blue
    FémininAge : 29Messages : 29

    le Jeu 10 Juil 2014 - 0:40

    Très joli, merci du partage ♥



    I CAN'T CONTROL
    THIS BLOODLUST
    avatar
    Zeroo
    FémininAge : 23Messages : 76

    le Jeu 10 Juil 2014 - 11:40

    La dernière pièce du tableau ...

    Et de nouveau merci, ce code est décidément cool *^*
    avatar
    Bridgess
    FémininAge : 20Messages : 58

    le Jeu 10 Juil 2014 - 18:45

    Elle est trop mignonne. Merci beaucoup !
    avatar
    Sadistic Syndrome
    FémininAge : 26Messages : 84

    le Ven 11 Juil 2014 - 15:48

    Très bien pensée ! Wink
    Merci =)
    avatar
    Invité

    le Ven 11 Juil 2014 - 15:52

    Merci :3
    Contenu sponsorisé


      La date/heure actuelle est Lun 22 Oct 2018 - 22:18