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

    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
    Sweetie Plum
    FémininAge : 23Messages : 27

    le Mar 24 Juin 2014 - 10:33

    Wouhou ! ** Elle est drôlement super cette PA !** Merci du partage !**
    avatar
    Susan Storm
    FémininAge : 38Messages : 77

    le Mar 24 Juin 2014 - 13:40

    Mercii Very Happy
    avatar
    Stitch56
    FémininAge : 24Messages : 200

    le Mar 24 Juin 2014 - 15:28

    Merci ♥
    avatar
    Loupiotte-Fr
    FémininAge : 22Messages : 27

    le Mar 24 Juin 2014 - 18:45

    merci **



    Once Upon a Time
    ... Réécrit l'histoire ...
    avatar
    soraya
    FémininAge : 26Messages : 38

    le Mer 25 Juin 2014 - 14:14

    Merci, c'est vraiment très beau !




       
    Cory Monteith  1982 - 2013 Oh, why you look so sad? Tears are in your eyes come on and come to me now. Don't be ashamed to cry, let me see you through 'cause I've seen the dark side too. © by anaëlle.
    avatar
    Pastiche
    FémininAge : 23Messages : 78

    le Ven 27 Juin 2014 - 10:39

    Merci beaucoup ! ♥ C'est vraiment très joli.
    avatar
    cosmos-chann
    FémininAge : 20Messages : 115

    le Ven 27 Juin 2014 - 13:32

    Trop belle !
    avatar
    miniKIN
    FémininAge : 25Messages : 4

    le Ven 27 Juin 2014 - 15:21

    J'adore ! Il est super joli ! Beau travail !
    avatar
    Ceecemel
    FémininAge : 20Messages : 36

    le Sam 28 Juin 2014 - 22:02

    Trooop CUUTE
    avatar
    Raween
    FémininAge : 26Messages : 110

    le Sam 28 Juin 2014 - 22:15

    Merci beaucoup ^^
    avatar
    Furries
    FémininAge : 21Messages : 34

    le Dim 29 Juin 2014 - 9:53

    Elle est toute mignonne est épurée, j'aime beaucoup et je vais surement m'en servir, merci ♥
    avatar
    Kovu
    FémininAge : 17Messages : 254

    le Dim 29 Juin 2014 - 15:27

    merci



    avatar
    skaera22
    MasculinAge : 23Messages : 72

    le Dim 29 Juin 2014 - 15:59

    Superbe !! Un gros coup coeur :)
    avatar
    katia06
    FémininAge : 49Messages : 203

    le Dim 29 Juin 2014 - 19:32

    merci



    avatar
    Kim Jae Yoon
    FémininAge : 27Messages : 128

    le Dim 29 Juin 2014 - 19:44

    Merci !
    avatar
    Raymanou
    MasculinAge : 25Messages : 49

    le Dim 29 Juin 2014 - 23:05

    Merci beaucoup elle est super Wink
    avatar
    Heartfilia
    FémininAge : 18Messages : 98

    le Dim 29 Juin 2014 - 23:09

    Merci c'est superbe!



    YOU HELLA SAVED MY LIFE
    - chloe price
    avatar
    Myosotis
    FémininAge : 18Messages : 95

    le Lun 30 Juin 2014 - 0:12

    Merci :)
    avatar
    Stiou
    FémininAge : 24Messages : 42

    le Lun 30 Juin 2014 - 3:25

    Juste parce que celle-là est trop bien aussi *-*



    avatar
    Invité

    le Lun 30 Juin 2014 - 3:47

    J'adore vraiment ce thème pokémon, le codage est fantastique ! Encore merci pour ce partage <3
    avatar
    Myxookiie
    FémininAge : 25Messages : 47

    le Lun 30 Juin 2014 - 5:46

    Trop beau! Bravo! *-*
    Shinju.dot
    FémininAge : 28Messages : 88

    le Lun 30 Juin 2014 - 13:49

    merci
    avatar
    Leyaa
    FémininAge : 21Messages : 27

    le Lun 30 Juin 2014 - 16:15

    C'est superbe !
    avatar
    zbou
    FémininAge : 24Messages : 83

    le Lun 30 Juin 2014 - 17:05

    Merci pour le partage ♥
    avatar
    Luxuria
    FémininAge : 20Messages : 83

    le Lun 30 Juin 2014 - 22:04

    Canon ! Merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:26