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 : 9753

    le Ven 13 Juin 2014 - 20:42

    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
    Zélya
    FémininAge : 29Messages : 190

    le Ven 13 Juin 2014 - 20:48

    Bonsoir elle est magnifique ^^ j'adore vraiment tes codages ^^



    avatar
    Cruelly
    FémininAge : 25Messages : 2570

    le Ven 13 Juin 2014 - 20:58

    Hihi ma petite Pa :)
    Heureuse qu'elle ne plaise pas seulement a moi ^^



    Présence réduite pour le moment.
    avatar
    Neva
    FémininAge : 27Messages : 18564

    le Mar 17 Juin 2014 - 22:58

    Hey Hallow,
    Tu ne mets pas ton crédit sur cette pa ?



     
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Mer 18 Juin 2014 - 7:57

    Plop !

    Non je l'ai pas mis puisque Cruelly devait en avoir trois, je pensais que ça irait dans un topic dédié aux crédits du coup. Il faut que je l'ajoute ?




    < / Libre service codage >
    avatar
    Cruelly
    FémininAge : 25Messages : 2570

    le Mer 18 Juin 2014 - 8:16

    Personnellement je l'ai ajouter dans mes crédits, mais si vous le souhaitez je peux l'ajouter sur la PA aussi ^^



    Présence réduite pour le moment.
    avatar
    Malice1329
    FémininAge : 29Messages : 79

    le Mer 18 Juin 2014 - 13:59

    c'est tout simplement magnifique, j'ignore d’où te vient tout ces idées, mais tu est génial



    avatar
    Waphy's
    FémininAge : 19Messages : 54

    le Mer 18 Juin 2014 - 17:39

    merci !
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Mer 18 Juin 2014 - 17:48

    @Malice1329 a écrit:c'est tout simplement magnifique, j'ignore d’où te vient tout ces idées, mais tu est génial

    En fait pour le coup le schéma vient de Cruelly comme indiqué dans le premier post.




    < / Libre service codage >
    avatar
    Neva
    FémininAge : 27Messages : 18564

    le Mer 18 Juin 2014 - 18:44

    Yep, je veux bien que tu le mettes comme dans la plupart des PA qu'on a. Tant qu'on peut s'assurer que les membres n'oublient pas, faisons-le :)



     
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Mer 18 Juin 2014 - 19:56

    Bon, c'est modifié ^^




    < / Libre service codage >
    avatar
    AlexeB
    FémininAge : 22Messages : 164

    le Jeu 19 Juin 2014 - 9:59

    Merci du partage :heart:
    avatar
    Neva
    FémininAge : 27Messages : 18564

    le Jeu 19 Juin 2014 - 18:00

    Merci, c'est déplacé !



     
    avatar
    Lisou
    FémininAge : 17Messages : 303

    le Jeu 19 Juin 2014 - 18:34

    Après avoir pris les catégories, je prends la PA, qui n'a plus du tout comme thème pokémon !
    avatar
    Leoguillem
    MasculinAge : 18Messages : 137

    le Jeu 19 Juin 2014 - 19:07

    Merci !



    - Je signe Marabout -
    Løve
    MasculinAge : 23Messages : 189

    le Jeu 19 Juin 2014 - 20:39

    Très bel ensemble^^
    avatar
    Pooni
    FémininAge : 20Messages : 39

    le Ven 20 Juin 2014 - 17:10

    J'aime beaucoup, merci !
    avatar
    lΔω
    FémininAge : 20Messages : 105

    le Ven 20 Juin 2014 - 20:19

    Merci beaucoup :)
    avatar
    Monaka
    FémininAge : 26Messages : 132

    le Sam 21 Juin 2014 - 19:31

    J'aime beaucoup !
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Dim 22 Juin 2014 - 12:23

    Magnifique
    avatar
    Airore
    FémininAge : 19Messages : 132

    le Dim 22 Juin 2014 - 17:27

    merci !
    avatar
    Ayzi
    MasculinAge : 26Messages : 24

    le Dim 22 Juin 2014 - 18:51

    Merci
    avatar
    isKeiko
    FémininAge : 23Messages : 29

    le Dim 22 Juin 2014 - 19:37

    ** c'est magnifique merci !!
    avatar
    Invité

    le Dim 22 Juin 2014 - 22:48

    Miici !
    avatar
    Pinku
    FémininAge : 20Messages : 139

    le Lun 23 Juin 2014 - 10:27

    Mais *Bip* C'est vraiment Mamayaaaa ! o_o' Merci beaucoup pour ses partages !
    Contenu sponsorisé


      La date/heure actuelle est Lun 16 Juil 2018 - 18:30