Welcome

Halloween Page d'accueil

Violette

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

PHPBB2

Optimisé Les informations du staff s'affichent au survol

Retour

Codage page d'accueil violette Halloween Forumactif

CSS

/********************************************************** PAGE ACCUEIL, HALLOWEEN **********************************************************/

.fond_PA {
    background: #332129;
    text-align: justify;
    width: 800px;
    padding: 10px;
}

.fond_PA a {
    color: #A2778B !important;
    text-decoration: none !important;
}

/* Mise en forme colonnes */
.pa_colonne_gauche, .pa_colonne_milieu, .pa_colonne_droite {
    float: left;
}

.pa_colonne_gauche {
    width: 35%;
}

.pa_colonne_milieu {
    width: 24%;
    margin: 0 2%;
}

.pa_colonne_droite {
    width: 37%;
}

.clear {
    clear: both;
}

/* Titres */
.fond_PA h2 {
    color: #A2778B;
    font-size: 30px;
    font-family: 'Dancing Script', cursive;
    text-align: center;
}

.fond_PA h3 {
    color: #E1D5DB;
    font-family: 'Dancing Script', cursive;
    font-size: 25px;
    text-align: center;
    margin: 0;
}

/* Blocs */
.blocsPA {
    background: #3D2A33;
    color: #E6DBE0;
    overflow: auto;
    padding: 5%;
    text-align: justify;
    width: 80%;
    margin: auto;
}

.contexte_pa {
    height: 407px;
}

.news_pa, .liens_pa {
    height: 120px;
    width: 80%;
}

.news_pa span {
    color: #A2778B;
}

.liens_pa {
    text-align: center;
}

.tops_pa {
    text-align: center;
    width: 80%;
}

.partenaires_pa {
    max-height: 30px;
    padding: 5%;
    width: 75%;
}

.blocsPA p {
    width: 170px; 
    height: 50px;
}

/* Staff */
.bloc_staff {
    margin: auto auto 10%;
    text-align: center;
    width: 90%;
}

.infobulle {
    display: inline-block;
    position: relative;
    width: 85px;
}

.infobulle img {
    width: 100%;
}

.infobulle .contenu_bulle {
    top: 0;
    opacity: 0;
    position: absolute;
    transform: scale(0.3) rotate(-45deg);
    transition: all .3s linear;
    visibility: hidden;
}

.infobulle:hover .contenu_bulle {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(0deg);
    background: #3D2A33;
    color: #f0f0f0;
    height: 66px;
    margin: auto;
    padding: 10px;
    text-align: center;
    width: 65px;
}

.contenu_bulle h4 {
    margin: 0;
    margin-top: 30%;
}

/* Temoignage */
.temoignage {
    width: 85%;
    margin: 8% auto auto auto;
}

.temoignage img {
    float: left;
    margin-right: 2%;
    width: 90px;
}

.temoignage p {
    height: 80px;
    overflow: auto;
    padding: 2%;
    width: 58%;
}

/********************************************************** FIN PAGE ACCUEIL, HALLOWEEN **********************************************************/

HTML

<div class="fond_PA">
                                                     
 <h2>
                                  Bienvenue sur Quatre Clans, une nouvelle vie                              
 </h2>
                                               
 <div class="pa_colonne_gauche">
                                                                                 
 <h3>
                                                 Contexte                                             
 </h3>
                                                                                       
 <div class="blocsPA contexte_pa">
                                                 Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. Admiratio Sulpicio saepe forte et odio esset vel a in a multis P eum solebat memini una enim tum Pompeio utebare et cum coniunctissime una Attice capitali ego querella memini a sedentem ore hominum ore Meministi Attice a Sulpicio Sulpicio tribunus et forte illum amantissime quanta eo multa cum querella pauci et amantissime tum admodum et hemicyclio ut erat erat pauci coniunctissime magis qui erat is qui esset a sedentem solebat Sulpicio profecto illum quanta multum domi vixerat erat qui esset vixerat querella tribunus multa hominum pauci coniunctissime coniunctissime sedentem Pompeio erat qui multa admodum consul saepe Q vel Pompeio. <a href="#">La suite</a>                                          
 </div>
                                                                                  
 </div>
                                 
 <div class="pa_colonne_milieu">
                                         
 <h3>
                                                 Nouvelles                                             
 </h3>
                                                                                       
 <div class="blocsPA news_pa">
                                                 <span>XX/XX</span> Nouveauté<br /><span>XX/XX</span> Nouveauté<br /><span>XX/XX</span> Nouveauté<br /><span>XX/XX</span> Nouveauté<br /><span>XX/XX</span> Nouveauté                                          
 </div><br /><br />                                          
 <h3>
                                                 Liens utiles                                             
 </h3>
                                                                                       
 <div class="blocsPA liens_pa">
                                                 <a href="#">www</a><br /> <a href="#">www</a><br /> <a href="#">www</a><br /> <a href="#">www</a><br /> <a href="#">www</a><br />                                          
 </div>
                                            <br /><br />                                          
 <h3>
                                                 Top-sites                                             
 </h3>
                                                                                       
 <div class="blocsPA tops_pa">
                                                                                                       <a href="#"><img src="http://i61.servimg.com/u/f61/13/51/98/19/i_icon10.gif" /></a> <a href="#"><img src="http://i61.servimg.com/u/f61/13/51/98/19/i_icon10.gif" /></a>                                                                                            
 </div>
                                                                                  
 </div>
                                 
 <div class="pa_colonne_droite">
                                                                                                                             
 <h3>
                                                 Le staff                                             
 </h3>
                                 
 <div class="bloc_staff">
                               
 <div class="infobulle">
                            <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />                            
 <div class="contenu_bulle">
                                                                     
 <h4>
                             Pseudo                           
 </h4>
                          Rang                        
 </div>
                                                                         
 </div>
                             
 <div class="infobulle">
                            <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />                            
 <div class="contenu_bulle">
                                                                     
 <h4>
                             Pseudo                           
 </h4>
                          Rang                        
 </div>
                                                                         
 </div>
                             
 <div class="infobulle">
                            <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />                            
 <div class="contenu_bulle">
                                                                     
 <h4>
                             Pseudo                           
 </h4>
                          Rang                        
 </div>
                                                                         
 </div>
                             
 <div class="infobulle">
                            <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />                            
 <div class="contenu_bulle">
                                                                     
 <h4>
                             Pseudo                           
 </h4>
                          Rang                        
 </div>
                                                                         
 </div>
                             
 <div class="infobulle">
                            <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />                            
 <div class="contenu_bulle">
                                                                     
 <h4>
                             Pseudo                           
 </h4>
                          Rang                        
 </div>
                                                                         
 </div>
                             
 <div class="infobulle">
                            <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />                            
 <div class="contenu_bulle">
                                                                     
 <h4>
                             Pseudo                           
 </h4>
                          Rang                        
 </div>
                                                                         
 </div>
                                 
 </div>
                                                                                                                               
 <h3>
                                                 Les amis                                             
 </h3>
                                                                                       
 <div class="blocsPA partenaires_pa">
                                                               
 <marquee>
                <a href="http://ls-halloween.fr" target="_blank"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr" target="_blank"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr" target="_blank"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr" target="_blank"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr" target="_blank"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr" target="_blank"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a>                     
 </marquee>
                                              
 </div>
                                            <br /><br />                                          
 <div class="temoignage">
                                                         <img src="http://i58.servimg.com/u/f58/18/43/33/39/113.png" />                                                       
 <p class="blocsPA">
                                                                Verbis falli et tamen ego dicit non dicit philosopho vult afferat inquam a oratio afferat philosopho igitur ego sententiae philosophi istius non si possumus philosopho istius locis afferat offendit tamen philosopho non satisfacit istius tot sed intellegam philosopho igitur philosophi si offendit igitur falli philosopho philosopho et verbis admodum fallare aeque eloquentiam complectitur philosophi re non satisfacit a igitur quod intellegam complectitur ego plane admodum offendit tamen offendit flagitem afferat satisfacit quidem Torquate falli locis non quot mihi ego homines non eloquentiam sententiae et non non offendit quod ego admodum afferat oratio igitur tot satisfacit sententiae tot me vult quod.                                                            
 </p>
                                                                                                                
 </div>
                                                                                  
 </div>
                               
 <div class="clear">
                                  
 </div>
                                      
</div><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script" />

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

#pageaccueilviolette #pageaccueil #forumactif #codage #libreservice

Halloween