Welcome

Halloween Page d'accueil

Academy Waverly

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Page d'accueil Academy Waverly

PHPBB2

Optimisé Les informations du staff et des prestiges s'affichent au survol

Retour

Codage page d'accueil Academy Waverly Halloween Forumactif

CSS

a {
  text-decoration: none !important;
  transform: all;
  transition: .5s;
}

a:hover, .staff_pa_description a:hover {
  text-decoration: none !important;
  color: #c86855 !important;  
  transform: all;
  transition: .5s;
}

.clear {
  clear: both;
}

/********************************************************* PAGE D'ACCUEIL *********************************************************/

#page_daccueil {
    font-family: cambria;
    font-size: 14px;
    color: #6c676e;
    width: 1105px;
}

#liens_rapides {
    width: 20%;
    float: left;
}

#liens_rapides a {
    background: #dde9e4;
    color: #fff;
    display: block;
    font-family: 'Dancing Script', cursive;
    font-size: 30px;
    padding: 3.8% 0;
}

/* STAFF */

#bloc_staff_pa {
    float: left;
    padding: 2%;
    width: 76%;
    text-align: left;
}

.staff_pa {
  width: 262px;
  height: 107px;
  overflow: hidden;
  background: #f7f9f7;
  display: inline-block;
  margin: 0 .9%;
}

.staff_pa_img {
  position: relative;
  z-index: 2;
  width: 296px;
  height: 107px;
  margin-left: 0px;
  transform: all;
  transition: 1s;
}

.staff_pa:hover .staff_pa_img {
  margin-left: 400px;
  transform: all;
  transition: 1s;
}

.staff_pa_description {
  position: relative;
  z-index: 1;
  width: 262px;
  height: 97px;
  margin-top: -107px;
  text-align: center;
  color: #8c8c8c;
  padding: 18px 0;
  overflow: auto;
  text-transform: uppercase;
}

.pseudo_staff {
  font-size: 18px;
  font-weight: bold;
}

.rang_staff {
  font-size: 14px;
  margin: 2% 0;
  font-style: italic;
}

.staff_pa_description a {
  color: #767c99 !important;
}

/* CONTENU CONTEXTE ET BLOC GRIS */

#bloc_central_pa {
    float: left;
    margin: 0 2.8%;
    width: 45%;
    margin: 0 1.5% 0 2.8%;
}

#contexte_pa {
    text-align: justify;
    line-height: 1.5;
    margin-bottom: 2.5%;
}

#bloc_gris_contexte {
    background: #dcdedd;
    width: 100%;
    height: 60px;
}

/* BLOC "NOUS SOMMES" */

#bloc_droite {
    float: left;
    width: 27%;
    background: #edefed;
    height: 197px;
    overflow: auto;
    text-align: left;
    padding: 1%;
}

#page_daccueil h2 {
    font-size: 30px;
    color: #b9d6ca;
    padding: 0;
    margin: 0;
    font-family: 'Dancing Script', cursive;
    border-bottom: 2px solid #fff;
    width: 80%;
    margin-bottom: 1%;
}

#page_daccueil h3 {
    border-bottom: 2px solid #fff;
    color: #fff;
    float: right;
    font-size: 20px;
    margin: 5% 0 0 0;
    text-align: right;
    text-shadow: 1px 1px #e2e4e2;
    width: 70%;
}

#page_daccueil p {
    text-align: right;
}

/* BANDE BLANCHE */

#pa_bande_blanche {
    width: 100%;
    background: #f7f9f7;
    margin-bottom: 2%;
    float: left;
    padding-top: 2%;
}

#partenaires_pa {
    width: 38%;
    float: left;
}

.liens_partenaires {
    color: #6c676e !important;
    font-size: 16px;
    margin-right: 2%;
    text-align: left;
}

/* PRESTIGES */
#prestiges {
    width: 30%;
    float: left;
}

#prestiges h2 {
    color: #c2bcc4;
    font-size: 30px;
    border: 0;
    margin-top: -3%;
    margin: 0;
    font-family: 'Dancing Script', cursive;
    margin-top: -5%;
}

.prestige_pa {
  width: 157px;
  height: 59px;
  overflow: hidden;
  background: #ebecec;
  display: inline-block;
  margin: 0 .9%;
}

.prestige_pa_img {
  position: relative;
  z-index: 2;
  width: 169px;
  height: 59px;
  margin-left: 0px;
  transform: all;
  transition: 1s;
}

.prestige_pa:hover .prestige_pa_img {
  margin-left: 400px;
  transform: all;
  transition: 1s;
}

.prestige_pa_description {
  position: relative;
  z-index: 1;
  width: 159px;
  height: 59px;
  margin-top: -68px;
  text-align: center;
  color: #8c8c8c;
  padding: 18px 0;
  overflow: auto;
  text-transform: uppercase;
}

/* BULLES CHATS */
.infobulle {
  display: inline-block;
}

.infobulle > div {
    margin-top: -80px;
    opacity: 0;
    position: absolute;
    transform: all;
    transition: .5s;
    visibility: hidden;
    margin-left: -8px;
}

.infobulle:hover > div {
  opacity: 1;
  visibility: visible;
  transform: all;
  transition: .5s;
}

.bouh {
    background: rgba(255,255,255,.8);
    border-radius: 100px;
    color: #7099ae;
    height: 45px;
    text-align: center;
    width: 80px;
    padding-top: 35px;
}

HTML

<div id="page_daccueil">
                                                                 
   <div id="liens_rapides">
                                    <a href="http://academy-waverly.forumactif.com/t14-reglement">Règlement</a> <a href="http://academy-waverly.forumactif.com/t15-contexte">Contexte</a><a href="http://academy-waverly.forumactif.com/t18-bottin-des-avatars">Bottin Avatars</a><a href="http://academy-waverly.forumactif.com/t32-classes-logements-metiers">Liste métiers</a><a href="http://academy-waverly.forumactif.com/t21-infos-sur-les-predefinis">Prédéfinis</a><a href="http://academy-waverly.forumactif.com/f10-questions">Questions</a><a href="http://academy-waverly.forumactif.com/f11-partenariats">Partenariats</a>                                
   </div>
                                                               
   <div id="bloc_staff_pa">
                                                                        
      <div class="staff_pa">
                                                                     
         <div class="staff_pa_img">
                                          <img src="https://img4.hostingpics.net/pics/405199staff1.jpg" />                              
         </div>
                                                                     
         <div class="staff_pa_description">
                                                                  
            <div style="color: #E86664;" class="pseudo_staff">
                                       Anastasia I. Romanov                        
            </div>
                                                            
            <div class="rang_staff">
                                       Fondatrice                        
            </div><a href="http://academy-waverly.forumactif.com/privmsg?mode=post&u=1">Message privé</a>                            
         </div>
                                                                     
      </div>
                                                          
      <div class="staff_pa">
                                                                     
         <div class="staff_pa_img">
                                          <img src="https://img4.hostingpics.net/pics/217729staff2.jpg" />                              
         </div>
                                                                     
         <div class="staff_pa_description">
                                                                  
            <div style="color: #8cb48c;" class="pseudo_staff">
                                       Je sais pas qui                        
            </div>
                                                            
            <div class="rang_staff">
                                       Rang                        
            </div><a href="#">Message privé</a>                            
         </div>
                                                                     
      </div>
                                                  
      <div class="staff_pa">
                                                                     
         <div class="staff_pa_img">
                                          <img src="https://img4.hostingpics.net/pics/977925staff3.jpg" />                              
         </div>
                                                                     
         <div class="staff_pa_description">
                                                                  
            <div style="color: #8ab5bc;" class="pseudo_staff">
                                       Je sais pas qui                        
            </div>
                                                            
            <div class="rang_staff">
                                       Rang                        
            </div><a href="#">Message privé</a>                            
         </div>
                                                                     
      </div>
                                                                
      <div style="clear: both;">
                                                 
      </div>
                                                                  
   </div>
                                         
   <div id="bloc_central_pa">
                                          
      <div id="contexte_pa">
                             Waverly Academy est un pensionnat situé dans un vieux manoir, aux abords de la ville de Sydney. En ces lieux rode un étrange personnage nommé Le chat noir. Qui est-il ? Qui sont-ils ? Personne ne le sait. Ce dernier effraye les pensionnaires en envoyant des avertissements. Au deuxième message, surveillez vos arrières… Quelque chose risque de vous arriver. On a même entendu que le chat noir rodait en ville… Ne faites rien qui puisse lui iriser les poils. Seriez vous tranquille ou sur vos gardes ? Prenez vous ça au sérieux ou n’est-ce qu’une plaisanterie ?                    
      </div>
                    
      <div id="bloc_gris_contexte">
                       
      </div>
                                
   </div>
                                   
   <div id="bloc_droite">
                                      
      <h2>
                         Nous sommes                
      </h2>
                      mi à fin février 2017, les températures sont chaudes.<br />                
      <h3>
                         17/09                
      </h3>
                                    
      <div class="clear">
                                       
      </div>
                                      
      <p>
                         Ouverture officielle du forum                
      </p>
                                      
   </div>
                                         
   <div id="pa_bande_blanche">
                                  
      <div id="partenaires_pa">
                       <a href="http://saintecatherine.forumactif.com/" target="_blank"><img src="http://nsa39.casimages.com/img/2017/09/30//170930063953555333.png" /></a> <a href="http://dear-reaper.forumactif.com/" target="_blank"><img src="http://nsa39.casimages.com/img/2017/09/30//17093006371237987.png" /></a> <a href="http://pensionnatanimal.forumactif.com/" target="_blank"><img src="http://nsa39.casimages.com/img/2017/10/22//171022055436131331.png" /></a> <a href="http://alonetogether.forumactif.org/" target="_blank"><img src="http://nsa39.casimages.com/img/2017/10/08//171008053517965006.png" /></a> <a href="http://institutespoir.forumactif.com/" target="_blank"><img src="http://nsa39.casimages.com/img/2017/10/08//171008053229505504.png" /></a> <a href="http://academieeternia.forumactif.org/" target="_blank"><img src="http://nsa39.casimages.com/img/2017/10/08//171008055022426001.png" /></a><br /> <a class="liens_partenaires" href="http://academy-waverly.forumactif.com/t45-nos-copains">>> Les autres</a>    <a class="liens_partenaires" href="http://academy-waverly.forumactif.com/t28-les-partenariats#32">>> Devenir ami</a> <a class="liens_partenaires" href="http://academy-waverly.forumactif.com/t30-nos-logos-fiche">>> Nous lier</a>                
      </div>
                                  
      <div id="prestiges">
                                     
         <h2>
                          Les prestiges              
         </h2>
               
         <div class="prestige_pa">
                                                                        
            <div class="prestige_pa_img">
                                             <img src="https://img4.hostingpics.net/pics/980937prestig.jpg" />                              
            </div>
                                                                        
            <div class="prestige_pa_description">
                                                                 Membre du mois<br />                          
               <div style="color: #8ab5bc;" class="pseudo_staff">
                                          Hallo ? Ween                        
               </div>
                       
            </div>
                                                                        
         </div>
             
         <div class="prestige_pa">
                                                                        
            <div class="prestige_pa_img">
                                             <img src="https://img4.hostingpics.net/pics/980937prestig.jpg" />                              
            </div>
                                                                        
            <div class="prestige_pa_description">
                                                                 Meilleur Top-Siteur<br />                          
               <div style="color: #8ab5bc;" class="pseudo_staff">
                                          Ici Trouille                        
               </div>
                       
            </div>
                                                                        
         </div>
                     
      </div>
                                
      <div id="tops">
                       <a href="http://www.root-top.com/topsite/callista/in.php?ID=1320" target="_blank"><img src="https://i.imgur.com/ejF8wbY.jpg" /></a> <a href="http://www.root-top.com/topsite/chenshen/in.php?ID=1435" target="_blank"><img src="https://i.imgur.com/3Ipm4A7.jpg" /></a> <a href="http://www.root-top.com/topsite/virtu4ldreaiviz/in.php?ID=5211" target="_blank"><img src="https://i.imgur.com/kdO4pCp.jpg" /></a> <a href="https://img4.hostingpics.net/pics/528192topsite4.png" target="_blank"><img src="https://i.imgur.com/d0DubG7.jpg" /></a><br />      
         <div class="infobulle">
                  <img src="https://i.imgur.com/nXVX2ts.jpg" />          
            <div>
                           
               <div class="bouh">
                        00 pts      
               </div>
                                 
            </div>
                        
         </div>
                 
         <div class="infobulle">
                  <img src="https://i.imgur.com/dG7VYTC.jpg" />          
            <div>
                           
               <div class="bouh">
                        00 pts      
               </div>
                                 
            </div>
                        
         </div>
                 
         <div class="infobulle">
                  <img src="https://i.imgur.com/5YqpjtN.jpg" />          
            <div>
                           
               <div class="bouh">
                        00 pts      
               </div>
                                 
            </div>
                        
         </div>
                       
      </div>
                                  
   </div>
                   
   <div style="clear: both;">
                                              
   </div>
                             
</div>

Dernière modification : 25 April 2020 23 : 33.

#academywaverly #pageaccueil #forumactif #codage #libreservice

Halloween