PA simple

Présentation

Bonjour ! Voici ma première Page d'acceuil. Elle est simple, sans onglets mais avec des animations lorsqu'on passe la sourie. Cette PA a été codée pour notre partenaire Une Lumière derrière les ombres . Elle est facielement personnalisable. 

 

L'aperçu :

 

Quand on passe la sourie sur les différents éléments :

Le code !

Le css :

.PA_general { width: 770px; height: 500px; /*-Dimensions de la PA -*/

background-color : #1f1d1a; /*-Couleur de fond de la PA-*/

overflow: hidden; color: black; /*-couleur du texte -*/

text-align: justify;

border: solid #82ABCE 2px; /*- La bordure de la PA -*/

margin: auto; padding:8px;}


.PA_titre { text-align: center; padding-top: 10px; color: #82ABCE; text-align: center; font-size: 32px; font-family: 'georgia';} /*- Tout ce qui concerne le titre de la PA -*/
.PA_accroche { text-align: center; color :#C0D6E7; font-size: 13px; font-style: italic;} /*- Le sous titre -*/
.PA_tops { border: solid #82ABCE 1px; margin-top : 3px ; transform: rotate(-1deg); text-align : center;}
.PA_amis { background-color : #63696E;  text-align : center;}
.PA_ttops { color :#C0D6E7; }
.PA_tamis { color :#C0D6E7; font-size: 13px; }
.PA_Stafftd  { width: 80px; border: 1px solid #82ABCE; border-radius : 40px; }
.PA_contexte { background-color : #788087; padding : 9px; font-size: 11px; color : white; border: 1px solid #ADB1B6; width: 200px; height: 228px;}

/*-staff-*/
.staff_e2 {
display:inline-block;
padding : 3px;}

.staff_e2 div {
width: 140px; 
height: 35px; 
margin-left:50px;
margin-top:-70px; 
text-align: center; 
font-size: 12px; 
line-height: 10px; 
background-color: #8FBADA; 
border: 2px solid #5496C7; 
border-radius : 3px;
padding: 5px 5px 15px 5px; 
opacity: 0; 
position: absolute; 
}

.staff_e2 img {
width: 70px; 
height: 70px;
border-radius : 100px ;
transform : rotate(0deg) ;
  -webkit-transition-property : transform ; -webkit-transition-duration : 0.2s ;
-moz-transition-property : transform ; -moz-transition-duration : 0.2s ; 
-ms-transition-property : transform ; -ms-transition-duration : 0.2s ;
 }

.staff_e2:hover img {
transform : rotate(45deg) ;
-webkit-transition-property : transform ; -webkit-transition-duration : 0.2s ;
-moz-transition-property : transform ; -moz-transition-duration : 0.2s ; 
-ms-transition-property : transform ; -ms-transition-duration : 0.2s ;
  
}


.staff_e2:hover div {
opacity: 1; 
visibility: visible; 

}
/*-Fin-staff-*/

.PA_event {width : 150px; transform: rotate(0deg); -webkit-transition-property : transform ; -webkit-transition-duration : 1s ;}
.PA_event:hover { transform: rotate(1080deg); -webkit-transition-property : transform ; -webkit-transition-duration : 1s ;}

.PA_eventd { background-color : #171511 ; width:150 ; height:60px; opacity :0; -webkit-transition-property : opacity, transform ; -webkit-transition-duration : 1s ; 
-moz-transition-property : opacity, transform ; -moz-transition-duration : 1s ; 
-ms-transition-property : opacity, transform ; -ms-transition-duration : 1s ;
color : white ; text-align : center ; overflow : auto ; transform: rotate(-1080deg);}

.PA_eventd:hover {opacity : 1 ; -webkit-transition-property : opacity, transform ; -webkit-transition-duration : 1s ; 
-moz-transition-property : opacity, transform ; -moz-transition-duration : 1s ; 
-ms-transition-property : opacity, transform ; -ms-transition-duration : 1s ; transform: rotate(0deg);}


.PA_annonce1 { height : 100px; text-align : center ; }

.PA_annonce1c { background-color : #788087; height : 50%; width : 50% ; opacity : 0.4 ; margin : auto ; font-size : 6px ; transition-property: opacity, width, height, font-size; transition-duration : 0.5s ;}
.PA_annonce1c:hover { background-color : #788087; height : 100%; width : 100% ; opacity : 1 ; font-size : 12px ; transition-property: opacity, width, height, font-size; transition-duration : 0.5s ;}

.PA_annonce2 { height : 100px; text-align : center ;}
.PA_annonce2c { background-color : #788087; height : 50%; width : 50% ; opacity : 0.4 ; margin : auto ; font-size : 8px ; transition-property: opacity, width, height, font-size; transition-duration : 0.5s ; }
.PA_annonce2c:hover { background-color : #788087; height : 100%; width : 80% ; opacity : 1 ; font-size : 12px ; transition-property: opacity, width, height, font-size; transition-duration : 0.5s ;}

.PA_membre {text-align : center; width : 170px; height: 170px; background-image : url(http://zupimages.net/up/15/29/kr0y.png) ; margin-top : 3px;
-webkit-transition-property : background-image ; -webkit-transition-duration : 0.5s ;
-moz-transition-property : background-image ; -moz-transition-duration : 0.5s ; 
-ms-transition-property : background-image ; -ms-transition-duration : 0.5s ;} 

.PA_membre:hover {background-image : url(http://zupimages.net/up/15/29/9sfc.png);
-webkit-transition-property : background-image ; -webkit-transition-duration : 0.5s ;
-moz-transition-property : background-image ; -moz-transition-duration : 0.5s ; 
-ms-transition-property : background-image ; -ms-transition-duration : 0.5s ;
}
.PA_membrec { padding-top : 10px; padding-left : 20px; padding-left : 20px; color : white ; width : 150px; height: 170px; opacity : 0 ;}
.PA_membrec:hover {opacity : 1;}

 

HTML : 

 

<table class="PA_general">
                                                                                                                                                                                                                                 
    <thead>
                                                                                                                                                                                                                                     
        <tr>
                                                                                                                                                                                                                                         
            <td colspan="5" class="PA_titre">
                                                                                                                               Bienvenue                                                                                                              
            </td>
                                                                                                                                                                                                                                         
        </tr>
                                                                                                                                                                                                                                     
        <tr>
                                                                                                                                                                                                                                         
            <td colspan="5" class="PA_accroche">
                                                                                                                               « Voyons combien de temps tu pourras survivre parmi nous »                                                                                                               
            </td>
                                                                                                                                                                                                                                         
        </tr>
                                                                                                                                                                                                                                     
    </thead>
                                                                                                                                                                                                                                 
    <tfoot>
                                                                                                                                                                                                                                   
        <tr>
                                                                                                                                                                                                                                     
            <td style="width: 105px;">
                                                                                                                                                                                                                                         
                <div class="PA_tops">
                                                                                                                                  <span class="PA_ttops">Top-Sites</span><br /> <a href="LIEN"><img src="http://zupimages.net/up/15/28/ieiu.png" /></a> <a href="LIEN"><img src="http://zupimages.net/up/15/28/ieiu.png" /></a><br /><a href="LIEN"><img src="http://zupimages.net/up/15/28/ieiu.png" /></a> <a href="LIEN"><img src="http://zupimages.net/up/15/28/ieiu.png" /></a>                                                                                                              
                </div>
                                                                                                                                                                                                                                         
            </td>
                                                                                                                                                                                                                                     
            <td colspan="4">
                                                                                                                                                                                                                                         
                <div class="PA_amis">
                                                                                                                                  <span class="PA_tamis">Nos amis</span> <br />      <br />     <a href="http://elia-ls.e-monsite.com/"><img src="http://zupimages.net/up/15/26/lzoj.png" style="padding:1px;" /></a> <a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a> <a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a><strong></strong><a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a><a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a><a href="http://uldlo.forumactif.org/" <a=""><img style="padding:1px;" src="http://zupimages.net/up/15/25/00ko.bmp" /></a><br />  <a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a><a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a><a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a><a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a><a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a>  <a href="http://uldlo.forumactif.org/"><img src="http://zupimages.net/up/15/25/00ko.bmp" style="padding:1px;" /></a>                                                                                                              
                </div>
                                          
                <div style="padding-top : 5px;" align="center">
                             <a href="http://elia-ls.e-monsite.com/"><span style="color: grey;">Eli Libre-Service</span></a>         
                </div>
                                                                                                                                                                                                                             
            </td>
                                                                                                                                                                                                                                         
        </tr>
                                                                                                                                                                                                                             
        <tr>
                                                                                                                                                                                                                                 
            <td colspan="5" style="height: 4px;">
                                                                                                                                                                                                                                       
            </td>
                                                                                                                                                                                                                                   
        </tr>
                                                                                                                                                                                                                                 
    </tfoot>
                                                                                                                                                                                                                                 
    <tbody>
                                                                                                                                                                                         
        <tr>
                                                                                                                                                                                            
            <td colspan="3" rowspan="2">
                                                                                                                               
                <div class="PA_contexte">
                                                                                                           L'épidémie est apparue durant l'été 2021. Les cas se multiplièrent extrêmement rapidement sans que personne ne puisse l'arrêter. Impossible de savoir son mode de transmission ni ses points faibles. <br /><br />  Les victimes devenaient pâles, lentes, perdaient leurs réflexes. Elles ne se nourrissaient plus mais se montraient particulièrement agressives avec les personnes seines. Paris fut bombardée, détruite. La population fut évacuée loin des centres de recherche afin d'empêcher la contamination. Mais rien ne fut efficace... <a href="http://uldlo.forumactif.org/t11-contexte"><span style="color: #99ccff;">En savoir plus ?</span>  </a>                                                       
                </div>
                                                                                                                                                          
            </td>
                                                                                                                                                                                         
            <td style="width: 400px;">
                                                                                                                                                       
                <table style="width: 100%;">
                                                                                                                   
                    <tbody>
                                                                                                                       
                        <tr>
                                                                                                                           
                            <td style="width: 152px; padding : 4px;">
                                                                                    
                                <div style="border: dotted #82ABCE 1px;">
                                                                                                                     
                                    <div align="center" style="margin-bot : 3px;">
                                                                                  <span style="color: #82ABCE; font-size : 15px;">Events</span>                                          
                                    </div>
                                                                                                                                
                                    <div style="background-image : url(http://zupimages.net/up/15/29/oda2.jpg)" class="PA_event">
                                                                                                                                   
                                        <div class="PA_eventd">
                                                                                          <span style="color : red; font-size : 11px">Terminé !</span> <br /> Titre de l'Event <br /><span style="font-size : 9px ; color : #F9F9F9 ;">15/05/15 - 02/12/15 </span><br /><span style="font-size : 11px"><a href="#"><span style="color: grey">Voir</span> </a> - <a href="#"><span style="color: grey">S'inscrire</span> </a></span>                                              
                                        </div>
                                                                                                                                   
                                    </div>
                                                                                                                               
                                    <div style="background-image : url(http://zupimages.net/up/15/29/77zp.jpg)" class="PA_event">
                                                                                                                                   
                                        <div class="PA_eventd">
                                                                                          <span style="color : red; font-size : 11px">Terminé !</span> <br /> Titre de l'Event <br /><span style="font-size : 9px ; color : #F9F9F9 ;">15/05/15 - 02/12/15 </span><br /><span style="font-size : 11px"><a href="#"><span style="color: grey">Voir</span> </a> - <a href="#"><span style="color: grey">S'inscrire</span> </a></span>                                              
                                        </div>
                                                                                                                                   
                                    </div><br />                            
                                </div>
                                                                                                    
                            </td>
                                                                                                                           
                            <td>
                                                                                                            
                                <div class="PA_membre">
                                                                                  
                                    <div class="PA_membrec">
                                                               Membre du mois <br /> PSEUDO <br /> <br />Sa fiche  - MP   <br /><br />  <br /> Merci pour ses votes aux tops site et à son investissement !                     
                                    </div>
                                                                                      
                                </div>
                                                                                                      
                            </td>
                                                                                                                           
                        </tr>
                                                                                                                       
                        <tr>
                                                                                                                           
                            <td class="PA_annonce1">
                                                                                             
                                <div class="PA_annonce1c">
                                                                                    <strong>02/05/15 -</strong> Ouverture du forum !  <br /> <strong>15/03/15 -</strong> Création du forum   <br /> <strong>XX/XX/15 -</strong> Annonces !                                 
                                </div>
                                                                                                             
                            </td>
                                                                                                                           
                            <td class="PA_annonce2">
                                                                                             
                                <div class="PA_annonce2c">
                                                                                    <a href="http://uldlo.forumactif.org/t9-reglement">Règlement</a> <br /> <a href="http://uldlo.forumactif.org/t15-les-clans">Les groupes</a> <br /><a href="http://uldlo.forumactif.org/t21-le-bottin-des-avatars">Le Bottin</a> <br /> <a href="http://uldlo.forumactif.org/t10-les-credits-du-forum">Les Crédits</a> <br />                           
                                </div>
                                                                                                             
                            </td>
                                                                                                                                            
                        </tr>
                                                                                                                       
                    </tbody>
                                                                                                                   
                </table>
                                                                                                                                                     
            </td>
                                                                                                                                                                                         
            <td class="PA_Stafftd" rowspan="2">
                                                                                                                                                                                            
                <div class="staff_e2">
                                                                                                            <span><img src="http://zupimages.net/up/15/29/gwms.jpg" />                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </span>                                                                                                      
                    <div>
                                                                                                                <span><strong>William</strong>- <em>Fondateur</em><br /><br />« Citations »<br /><a target="_blank" href="LIENS">Profil</a> | <a target="_blank" href="LIENS">MP</a></span>                                                                                                      
                    </div>
                                                                                                                                                                                                   
                </div>
                                                                                                      <br />                                                                                      
                <div class="staff_e2">
                                                                                                           <span><img src="http://zupimages.net/up/15/26/4lkm.jpg" />                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </span>                                                                                                      
                    <div>
                                                                                                                <span><strong>Cratos</strong>- <em>Fondateur</em><br /><br />« Citations »<br /><a target="_blank" href="LIENS">Profil</a> | <a target="_blank" href="LIENS">MP</a></span>                                                                                                      
                    </div>
                                                                                                                                                                                                   
                </div><br />                                                                                      
                <div class="staff_e2">
                                                                                                            <span><img src="http://zupimages.net/up/15/29/3zfh.jpg" />                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </span>                                                                                                      
                    <div>
                                                                                                                <span><strong>Seona</strong>- <em>Admin</em><br /><br />« Citations »<br /><a target="_blank" href="LIENS">Profil</a> | <a target="_blank" href="LIENS">MP</a></span>                                                                                                      
                    </div>
                                                                                                                                                                                                   
                </div>
                                                                                                                                                                                           
            </td>
                                                                                                                                                                                           
        </tr>
                                                                                                                                                                                                                                                     
        <tr>
                                                                                                                                                                                             
        </tr>
                                                                                                                                                                                                                                     
    </tbody>
</table>

Pour finir

Si vous souhaitez utiliser ce code, merci de poster un commentaire et de laisser le crédit ! C'est obligatoire !

Si vous avez du mal à modifier, il vous suffit de me demander, je serais ravi de vous aider.

Commentaires (1)

Les directeurs
  • 1. Les directeurs (site web) | 09/05/2016

La PA est superbe, vraiment très beau travail, je vous l'emprunte pour mon forum ^w^

merci de la mise à dispo.

Ajouter un commentaire

Vous utilisez un logiciel de type AdBlock, qui bloque le service de captchas publicitaires utilisé sur ce site. Pour pouvoir envoyer votre message, désactivez Adblock.

×