Welcome

Halloween Page d'accueil

Onglets

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

PHPBB2

Optimisé Le contexte, le staff et les prédéfinis s'affichent au survol

Retour

Codage page d'accueil à onglet Halloween Forumactif

CSS

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

/* Titre */
.fond_pa h2 {
    color: #F3F3F3;
    font-family: Pacifico, cursive;
    font-size: 30px;
    position: relative;
    top: -.3em;
    z-index: 1;
    margin: 0;
}

.fond_pa h2:hover {
    color: #70A0BA;
}

/* Mise en forme colonnes */
.pa_colonne {
    float: left;
    margin: 0 2.5%;
}

.clear {
    clear: both;
}

/* Systeme onglets */
.paonglet {
    display: inline-block;
    margin: 0 20px;
    padding: 10px;
    cursor: pointer;
    background: #333333;
    color: #FCE7AE;
}
            
.paonglet_0 {
    border-radius: 25px;
}

.paonglet_1 {
    border-radius: 25px;
    color: #70A0BA;
}

.contenu_paonglet {
    padding: 25px;
    display: none;
    width: 780px;
    height: 450px;
    border-radius: 25px;
    background: #0D0D0D;
}

/* Mise en forme des blocs */
.bloc_pa {
    background: #333333;
    border-radius: 25px;
    color: #F3F3F3;
    padding: 25px;
    text-align: justify;
    position: relative;
    top: -2.2em;
}

.bloc_pa a, .contexte_description a {
    text-decoration: none !important;
    color: #70A0BA !important;
}

/* News */
.pa_news {
    width: 250px; 
    height: 380px;
}

.pa_contenu_news {
    height: 220px;
    overflow: auto;
    width: 240px;
    margin: 0 0 8% 0;
}

.pa_contenu_news span {
    color: #70A0BA;
}

/* Contexte */
.contexte {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background: #333333;
    border-radius: 25px;
    position: relative;
    top: -2.2em;
}
    
.contexte_img {
    position: relative;
    z-index: 2;
    width: 400px;
    height: 200px;
    margin-left: 0px;
    transform: all;
    transition: 1s;
}

.contexte:hover .contexte_img {
    margin-top: -200px;
    transform: all;
    transition: 1s;
}
    
.contexte_description {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 140px;
    color: #F3F3F3;
    padding: 25px;
    font-size: 11px;
    overflow: auto;
    text-align: justify;
}

/* Fideles */
.pa_fideles {
    text-align: center;
}

.infobulle_fideles {
    display: inline-block;
}

.infobulle_fideles img {
    border-radius: 50px;
    transform: all;
    transition: 1s;
}

.infobulle_fideles img:hover {
    transform: rotate(360deg);
    transition: 1s;
}

.infobulle_fideles > div {
    position: absolute;
    margin-top: -20px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.3) rotate(-45deg);
    transition: all 0.3s linear;
}

.infobulle_fideles:hover > div {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(0deg);
}

.contenu_infobulle_fideles {
    background: #000;
    border-radius: 5px;
    box-shadow: 0 0 5px #212121;
    color: #fff;
    margin: auto;
    padding: 10px;
    text-align: center;
    width: 200px;
}

.contenu_infobulle_fideles h3 {
    margin: 0;
    text-transform: uppercase;
}

.fleche {
    width: 0;
    margin-left: 70px;
    border: 5px solid transparent;
    border-bottom: 10px solid #000000;
}

/* Predefinis */
.pa_predef {
    width: 45%;
}

.infobulle {
    float: left;
}

.infobulle img {
    width: 100px;
    border-radius: 50px;
}

.infobulle > div {
    position: absolute;
    margin-top: -100px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.3) rotate(-45deg);
    transition: all 0.3s linear;
}

.infobulle:hover > div {
    opacity: 1;
    visibility: visible;
    transform: scale(1) rotate(0deg);
}

.contenu_bulle {
    background: #000;
    border-radius: 50px;
    color: #fff;
    margin: auto;
    padding: 5px;
    text-align: center;
    width: 91px;
    height: 91px;
}

.contenu_bulle h3 {
    margin: 35% 0 0 0;
}

/* Liens utiles */
.pa_liens_utiles {
    width: 45%;
}

.pa_liens_utiles .bloc_pa {
    height: 200px;
}

/* Staff */
.staff_pa {
    padding: 15px;
    width: 720px;
    text-align: center;
}

.staff_pa .infobulle {
    display: inline-block;
    float: none;
}

/* Partenaires */
.partenaires_pa {
    width: 500px; 
    height: 150px;
    text-align: center;
}

.partenaires_pa img, .topsite_pa img {
    opacity: .5;
    transform: all;
    transition: 1s;
}

.partenaires_pa img:hover, .topsite_pa img:hover {
    opacity: 1;
    transform: all;
    transition: 1s;
}

/* Top sites */
.topsite_pa {
    width: 500px; 
    height: 80px;
    text-align: center;
}

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

HTML

<div class="fond_pa">
	     <script type="text/javascript">
            //
            </script>     
	<div class="paonglets">
		                      <span class="paonglet_0 paonglet" id="paonglet_informations" onclick="javascript:change_paonglet('informations');">Informations</span> <span class="paonglet_0 paonglet" id="paonglet_contact" onclick="javascript:change_paonglet('contact');">Contact & Liens pratiques</span> <span class="paonglet_0 paonglet" id="paonglet_liens" onclick="javascript:change_paonglet('liens');">Liens externes</span>     
	</div><br />     
	<div class="contenu_paonglets">
		                                           
		<div class="contenu_paonglet" id="contenu_paonglet_informations">
			                                            
			<div class="pa_colonne">
				                                          
				<h2>
					                      Nouveautés                      
				</h2>
				                                           
				<div class="bloc_pa pa_news">
					                                     
					<div class="pa_contenu_news">
						                      <span>✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span>✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span>✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span>✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a><br /><br /><span>✂</span> Nouveauté : ceci est un texte complètement inutile, oui oui u.u Et si tu es maso, tu peux consulter la suite. <a href="#">www</a>                    
					</div><iframe frameborder="0" style="width: 240px;" src="//www.youtube.com/embed/C-W40iW2MRs" allowfullscreen=""></iframe>                     
				</div>
				                                            
			</div>
			                                   
			<div class="pa_colonne">
				                                           
				<h2>
					                      Contexte                      
				</h2>
				                                                  
				<div class="contexte">
					                                           
					<div class="contexte_img">
						                      <img src="http://i57.servimg.com/u/f57/18/47/68/10/2610.png" />                     
					</div>
					                                           
					<div class="contexte_description">
						                      Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. Altera templo insulam et insignis viribus claram viribus Salamis supremos et ipso committat armamentis tamque claram crebra ad indigens externi instructam ut abundat omnibusque onerariam continenti templo rerum a tanta municipia autem discretam insignis portuosam municipia continenti duae inter ut Cyprus omnium omnium Salamis a indigens urbes portuosam et claram tanta nullius ad rerum discretam fundamento Veneris claram rerum mari itidem Cyprus Cyprus Salamis urbes Paphus Cyprus continenti et Cyprus templo altera et municipia altera externi carbasos claram altera aedificet templo eadem Cyprus tamque itidem delubris a tamque et Paphus procul Paphus Paphus nullius Veneris armamentis adminiculi continenti tanta carbasos. <a href="#">La suite</a>                     
					</div>
					                                            
				</div>
				                                           
				<h2>
					                      Nos fidèles                      
				</h2>
				                                           
				<div class="bloc_pa pa_fideles">
					                                          
					<div class="infobulle_fideles">
						                          <img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" />                           
						<div>
							                                               
							<div class="fleche">
								                               
							</div>
							                                 
							<div class="contenu_infobulle_fideles">
								                                                    
								<h3>
									                  Pseudo                  
								</h3>
								                  Blabla description par ici, youpi !  <a href="#">Lien</a>                  
							</div>
							                                   
						</div>
						                                   
					</div>
					                               
					<div class="infobulle_fideles">
						                          <img src="http://i57.servimg.com/u/f57/18/47/68/10/8910.png" />                           
						<div>
							                                               
							<div class="fleche">
								                               
							</div>
							                                 
							<div class="contenu_infobulle_fideles">
								                                                    
								<h3>
									                  Pseudo                  
								</h3>
								                  Blabla description par ici, youpi !  <a href="#">Lien</a>                  
							</div>
							                                   
						</div>
						                                   
					</div>
					                              
				</div>
				                                            
			</div>
			                         
			<div class="clear">
				                           
			</div>
			                                                           
		</div>
		                                           
		<div class="contenu_paonglet" id="contenu_paonglet_contact">
			                                            
			<div class="pa_colonne pa_predef">
				                             
				<h2>
					                      Prédéfinis                      
				</h2>
				                                                      
				<div class="bloc_pa">
					                           
					<div class="infobulle">
						                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
						<div>
							                                      
							<div class="contenu_bulle">
								                                          
								<h3>
									             Pseudo             
								</h3>
								             <a href="#">Sa fiche</a>             
							</div>
							                         
						</div>
						                         
					</div>
					                       
					<div class="infobulle">
						                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
						<div>
							                                      
							<div class="contenu_bulle">
								                                          
								<h3>
									             Pseudo             
								</h3>
								             <a href="#">Sa fiche</a>             
							</div>
							                         
						</div>
						                         
					</div>
					                       
					<div class="infobulle">
						                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
						<div>
							                                      
							<div class="contenu_bulle">
								                                          
								<h3>
									             Pseudo             
								</h3>
								             <a href="#">Sa fiche</a>             
							</div>
							                         
						</div>
						                         
					</div>
					                       
					<div class="infobulle">
						                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
						<div>
							                                      
							<div class="contenu_bulle">
								                                          
								<h3>
									             Pseudo             
								</h3>
								             <a href="#">Sa fiche</a>             
							</div>
							                         
						</div>
						                         
					</div>
					                       
					<div class="infobulle">
						                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
						<div>
							                                      
							<div class="contenu_bulle">
								                                          
								<h3>
									             Pseudo             
								</h3>
								             <a href="#">Sa fiche</a>             
							</div>
							                         
						</div>
						                         
					</div>
					                       
					<div class="infobulle">
						                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
						<div>
							                                      
							<div class="contenu_bulle">
								                                          
								<h3>
									             Pseudo             
								</h3>
								             <a href="#">Sa fiche</a>             
							</div>
							                         
						</div>
						                         
					</div>
					            
					<div class="clear">
						         
					</div>
					                                
				</div>
				                                            
			</div>
			                     
			<div class="pa_colonne pa_liens_utiles">
				                                      
				<h2>
					                      Liens pratiques                      
				</h2>
				                                            
				<div class="bloc_pa">
					                     <a href="#">
                                             Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <a href="#">Lien </a> <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>
				                         
			</div>
			                 
			<div class="clear">
				                           
			</div>
			                                          
			<h2>
				                      Staff                      
			</h2>
			                                             
			<div class="bloc_pa staff_pa">
				                                            
				<div class="infobulle">
					                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
					<div>
						                                      
						<div class="contenu_bulle">
							                                          
							<h3>
								             Pseudo             
							</h3>
							           Rang  <a href="#">MP</a>             
						</div>
						                         
					</div>
					                         
				</div>
				                     
				<div class="infobulle">
					                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
					<div>
						                                      
						<div class="contenu_bulle">
							                                          
							<h3>
								             Pseudo             
							</h3>
							           Rang  <a href="#">MP</a>             
						</div>
						                         
					</div>
					                         
				</div>
				                     
				<div class="infobulle">
					                     <img src="http://img11.hostingpics.net/pics/686120esaaaaa3.jpg" />                      
					<div>
						                                      
						<div class="contenu_bulle">
							                                          
							<h3>
								             Pseudo             
							</h3>
							           Rang  <a href="#">MP</a>             
						</div>
						                         
					</div>
					                         
				</div>
				                           
				<div class="clear">
					       
				</div>
				                        
			</div>
			                                            
		</div>
		                                     
		<div class="contenu_paonglet" id="contenu_paonglet_liens">
			                                            
			<h2>
				                      Partenaires                      
			</h2>
			                   
			<div class="bloc_pa partenaires_pa">
				                                            <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a>                                                   
			</div>
			                    
			<h2>
				                      Tops-sites                      
			</h2>
			                    
			<div class="bloc_pa topsite_pa">
				                                                    <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a> <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a>                               
			</div>
			                      <a href="http://ls-halloween.fr" style="color: #FCE7AE !important; position: relative; float: right;">© Halloween</a>                  
		</div>
		                                   <script type="text/javascript">
            //
            </script><link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css" />   
	</div>
</div>

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

#pageaccueilaonglets #pageaccueil #forumactif #codage #libreservice

Halloween