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

    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
    Tink ♥
    FémininAge : 26Messages : 66

    le Jeu 24 Nov 2016 - 13:32

    Merci pour le partage !
    avatar
    Cloudygirl
    FémininAge : 33Messages : 65

    le Sam 14 Jan 2017 - 20:08

    Merci beaucoup pour le partage. C'est trop joli =)
    céleste callisto
    FémininAge : 26Messages : 54

    le Lun 27 Fév 2017 - 13:58

    Merci
    avatar
    Momiji-chan
    FémininAge : 20Messages : 38

    le Jeu 9 Mar 2017 - 19:36

    Merci pour cette jolie PA. :)
    avatar
    Lilice
    FémininAge : 25Messages : 109

    le Ven 17 Mar 2017 - 13:13

    Merci
    avatar
    Cannelle Cannelle
    MasculinAge : 19Messages : 33

    le Lun 3 Avr 2017 - 10:31

    Merci ^^
    avatar
    Nokomis
    FémininAge : 24Messages : 18

    le Dim 30 Avr 2017 - 16:22

    Merci <3
    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Mer 10 Mai 2017 - 9:14

    Merci



    avatar
    Kamui Kyuuji
    MasculinAge : 26Messages : 30

    le Dim 21 Mai 2017 - 13:38

    Merci.
    avatar
    MadSushi
    FémininAge : 22Messages : 25

    le Dim 21 Mai 2017 - 21:10

    Merci :)
    avatar
    Amakhaza
    FémininAge : 15Messages : 52

    le Jeu 15 Juin 2017 - 14:16

    franchement top, merci pour le partage ^^
    avatar
    Kizuro hoki
    MasculinAge : 22Messages : 45

    le Dim 18 Juin 2017 - 23:56

    J'adore !
    avatar
    Lalia
    FémininAge : 18Messages : 40

    le Dim 23 Juil 2017 - 23:00

    Merci! x3
    avatar
    Melle Lena
    FémininAge : 43Messages : 298

    le Ven 28 Juil 2017 - 8:50

    Merci beaucoup
    avatar
    Nélie Reinart
    FémininAge : 18Messages : 33

    le Dim 6 Aoû 2017 - 14:30

    merci o/
    avatar
    PATAGON
    FémininAge : 19Messages : 6

    le Ven 11 Aoû 2017 - 18:50

    merci !
    avatar
    Kanu
    FémininAge : 28Messages : 60

    le Mar 15 Aoû 2017 - 15:05

    Très joli ! o/
    avatar
    Mattyew
    MasculinAge : 24Messages : 88

    le Jeu 17 Aoû 2017 - 11:38

    Classe ! Merci du partage.
    avatar
    Strabo
    FémininAge : 30Messages : 18

    le Dim 20 Aoû 2017 - 1:28

    Merci pour le partage
    avatar
    Lizzie Bonnefoy
    FémininAge : 24Messages : 1

    le Mer 30 Aoû 2017 - 14:12

    Merci ! Very Happy
    avatar
    Mikasa
    FémininAge : 20Messages : 162

    le Lun 25 Sep 2017 - 15:25

    merci




    Signa:


    avatar
    Arcanine
    FémininAge : 27Messages : 14

    le Mer 27 Sep 2017 - 14:48

    Bonjour je trouve sa super beau
    avatar
    Piratress
    FémininAge : 21Messages : 215

    le Mar 31 Oct 2017 - 22:07

    merci ! :)
    avatar
    Hawwa'h
    FémininAge : 21Messages : 2

    le Jeu 2 Nov 2017 - 15:49

    Trop mignon*-*
    merci beaucoup!!
    avatar
    Mystick
    FémininAge : 33Messages : 100

    le Ven 10 Nov 2017 - 12:31

    Merciii !!
    Contenu sponsorisé


      La date/heure actuelle est Mar 17 Juil 2018 - 4:03