Animal Crossing & Compagnie
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


Bienvenue sur le forum d'Animal Crossing & Compagnie ! Amuse toi bien ici :)
 
AccueilPortailSiteDernières imagesRechercherS'enregistrerConnexion
-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.99 €
Voir le deal

 

 Page d’accueil Pokémon

Aller en bas 
2 participants
AuteurMessage
MB_eevee
Admin



Messages : 1
Date d'inscription : 18/05/2014

Page d’accueil Pokémon Empty
MessageSujet: Page d’accueil Pokémon   Page d’accueil Pokémon EmptyVen 1 Aoû - 20:45

Page d'accueil Pokémon:

Voici un tuto pour avoir une page d'accueil Pokémon.

Résultat en image:

CSS: (Affichage -- Couleurs -- Feuille 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 --------------------------------- */

Page d'acceuil ( Affichage --Page d'accueil -- Généralités)

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>

© Merci à Never Utopia


Dernière édition par MB_Eevee le Sam 2 Aoû - 13:04, édité 1 fois
Revenir en haut Aller en bas
https://animal-crossing-leaf.forumgaming.fr
Charlotte

Charlotte


Messages : 3
Date d'inscription : 01/08/2014
Age : 24
Localisation : Belique (ACNL: Morvan) ♥

Page d’accueil Pokémon Empty
MessageSujet: Re: Page d’accueil Pokémon   Page d’accueil Pokémon EmptySam 2 Aoû - 11:57

C'est jolie ♥️

J'ai vu que sur un forum, il y'avait le même mais il y'avait aussi son Qui est en ligne personnalisé et ses catégories Very Happy

Pourrais tu me passer le code s'il te plaît ?
Merci
Revenir en haut Aller en bas
 
Page d’accueil Pokémon
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Une page d'acceuil
» Topic Pokémon
» Pokémon Rubis Oméga & Saphir Alpha

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Animal Crossing & Compagnie :: Votre 1ère catégorie :: Tutoriels-
Sauter vers: