Welcome

Halloween Page d'accueil

Colorée

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

PHPBB2

Optimisé Les informations du staff s'affichent au survol

Retour

Codage page d'accueil colorée Halloween Forumactif

CSS

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

a, a:hover {
    text-decoration: none !important;
}

.fond_pa {
    background: #F9F4F2;
    padding: 4% 0;
}

.contenu_pa {
    background: #EFEFEF;
    border: 3px solid #ED8E69;
    padding: 20px;
    text-align: justify;
    width: 750px;
}

/* Titres */
.contenu_pa h2 {
    color: #DE511B;
    font-family: Rochester, cursive;
    font-size: 40px;
    position: relative;
    text-align: center;
    top: -1.4em;
    margin: 0;
}

.contenu_pa h3 {
    background: #B5DCEA;
    color: #F9F4F2;
    font-family: 'Amatic SC', cursive;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
}

/* Mise en forme colonnes */
.pa_colonne_gauche {
    float: left;
    width: 40%;
    margin: 0 2%;
}

.pa_colonne_droite {
    float: left;
    width: 50%;
    margin: 0 2%;
}

.clear {
    clear: both;
}

/* Blocs */
.pa_bloc {
    background: #E4F7B9;
    color: #55404D;
    text-align: justify;
    margin: 2% 0;
}

.pa_bloc:hover {
    border-left: 2px solid #ED8E69;
    border-right: 2px solid #ED8E69;
}

/* Navigation */
.pa_navigation {
    width: 250px; 
    height: 80px; 
    overflow: auto; 
    padding: 20px;
}

.pa_navigation a {
    display: block;
    text-align: center;
    color: #ED8E69 !important;
    font-family: 'Julius Sans One', sans-serif;
    font-size: 15px;
    font-weight: bold;
}

.pa_navigation a:hover {
    font-style: italic;
    color: #4B675B !important;
    font-family: 'Finger Paint', cursive;
}

.pa_navigation span {
    color: #C43636; 
    font-size: 15px;
    font-weight: bold;
}

/* Contexte */
.pa_contexte {
    height: 100px;
    overflow: auto;
    padding: 2%;
    width: 96%;
}

/* Staff */
.pa_staff {
    width: 250px; 
    padding-left: 7px; 
    padding-right: 7px; 
    padding-bottom: 7px;
}

.staff {
    width: 275px;
    height: 50px;
    overflow: hidden;
}

.staff_img {
    position: relative;
    z-index: 2;
    width: 275px;
    height: 50px;
    transform: all;
    transition: 1s;
}

.staff:hover .staff_img {
    margin-top: -100px;
    transform: all;
    transition: 1s;
}

.staff_description {
    position: relative;
    z-index: 1;
    width: 275px;
    height: 50px;
    margin-top: 50px;
    font-size: 11px;
    color: #8c8c8c;
    padding: 2px;
    overflow: auto;
    background: #F3FCE0;
    text-align: center;
}

.staff_description h4, .staff_description .rang {
    font-family: Oswald, sans-serif;
    font-size: 16px;
    margin: 0;
    display: inline;
    font-weight: normal;
}

.staff_description h4 {
      color: #74A550;
}

.staff_description .rang {
    color: #e49b14;
}

.staff_description .statut {
    font-family: 'Amatic SC',cursive; 
    font-size: 18px; 
    text-align: center; 
    color: #5EAED0; 
    font-weight: bold;
}

.staff_description .symbole {
    color: #C43636; 
    font-size: 15px; 
    font-weight: bold;
}

.staff_description a {
    font-family: 'Amatic SC',cursive; 
    font-size: 18px; 
    font-weight: bold; 
    color: #D67365 !important;
}

/* Informations */
.pa_informations {
    height: 105px;
    overflow: auto;
    padding: 2%;
    width: 96%;
}

/* News */
.pa_news {
    width: 94%;
    margin-left: 2%;
}

.pa_contenu_news {
    height: 100px;
    overflow: auto;
    padding: 2%;
    width: 96%;
}

/* Top sites */
.pa_tops {
    height: 40px;
    overflow: auto;
    padding: 20px;
    width: 250px;
    text-align: center;
}

/* Partenaires */
.pa_partenaires {
    height: 62px;
    overflow: auto;
    padding: 2%;
    width: 96%;
    text-align: center;
}

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

HTML

<div class="fond_pa">
	                               
	<div class="contenu_pa">
		                                         
		<h2>
			                        Bienvenue sur le forum                     
		</h2>
		                                         
		<div class="pa_colonne_gauche">
			                   
			<div class="pa_bloc">
				                                                                             
				<h3>
					                                          Navigation                    
				</h3>
				                                                                             
				<div class="pa_navigation">
					                                          <a href="#"><span>♆</span> Navigation</a> <a href="#"><span>♆</span> Navigation</a> <a href="#"><span>♆</span> Navigation</a> <a href="#"><span>♆</span> Navigation</a>                                      
				</div>
				                                                                  
			</div>
			                                                                    
		</div>
		                   
		<div class="pa_colonne_droite">
			                                                                       
			<div class="pa_bloc">
				                                                                             
				<h3>
					         Contexte         
				</h3>
				                                                                                         
				<div class="pa_contexte">
					                                          Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis.                                       
				</div>
				                                                                     
			</div>
			                                                                    
		</div>
		                  
		<div class="clear">
			       
		</div>
		         
		<div class="pa_colonne_gauche">
			                                                                                                                         
			<div class="pa_bloc">
				                                                                                   
				<h3>
					          Staff         
				</h3>
				                                                                                   
				<div class="pa_staff">
					                                                                                     
					<div class="staff">
						                                                                                               
						<div class="staff_img">
							                                                   <img src="http://i39.servimg.com/u/f39/18/40/69/79/52185210.png" />                                               
						</div>
						                                                                                               
						<div class="staff_description">
							                                                                                                     
							<h4>
								          Pseudo Monmien         
							</h4>
							          | <span class="rang"> Rang </span><br /> <span class="statut"> Présent </span> <span class="symbole">♆</span> <a href="#">Profil</a>                                                                                                                
						</div>
						                                                                                            
					</div><br />                                            
					<div class="staff">
						                                                                                               
						<div class="staff_img">
							                                                   <img src="http://i39.servimg.com/u/f39/18/40/69/79/52185210.png" />                                               
						</div>
						                                                                                               
						<div class="staff_description">
							                                                                                                     
							<h4>
								          Pseudo Monmien         
							</h4>
							          | <span class="rang"> Rang </span><br /> <span class="statut"> Présent </span> <span class="symbole">♆</span> <a href="#">Profil</a>                                                                                           
						</div>
						                                                                                            
					</div>
					                                                                                      
				</div>
				                                                                                
			</div>
			                                                                                                                         
		</div>
		                   
		<div class="pa_colonne_droite">
			                              
			<div class="pa_bloc">
				                                                                             
				<h3>
					         Informations         
				</h3>
				                                                                             
				<div class="pa_informations">
					                                          Mortalem incertus idem omnes incertus futuris saluti futuris quaedam de modum ac civitatibus agitare mortalem agentes industria futuris de in quaedam civitatibus sunt in nequo exarsit civitatibus casu incertus de in conducentia omnes ac idem ac suae industria suae ultra itinera remoti casu suae modum de agitare civitatibus omnes nequo agentes nequo ac per modum agitare de ultra sunt nequo agitare itinera omnes ac industria Constantius incertus incertus milites perviis conducentia conducentia conaretur de ultra industria modum saluti omnes agentes omnes conaretur modum perviis casu casu incertus Constantius de modum idem de omnes Constantius cognito per ultra incertus Constantius civitatibus.                                       
				</div>
				                                                                     
			</div>
			                                                                    
		</div>
		               
		<div class="clear">
			               
		</div>
		                                      
		<div class="pa_bloc pa_news">
			                                                     
			<h3>
				         Nouveautés         
			</h3>
			                                                     
			<div class="pa_contenu_news">
				                              Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis.                           
			</div>
			                                            
		</div>
		                   
		<div class="pa_colonne_gauche">
			                                                                       
			<div class="pa_bloc">
				                                                                             
				<h3>
					         Top Sites         
				</h3>
				                                                                             
				<div class="pa_tops">
					                                                                                                             <a target="_blank" href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a> <a target="_blank" href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a> <a target="_blank" href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a> <a target="_blank" href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a>                                                                                                      
				</div>
				                                    
			</div>
			                                                                    
		</div>
		                   
		<div class="pa_colonne_droite">
			                                                                       
			<div class="pa_bloc">
				                                                                             
				<h3>
					         Partenaires         
				</h3>
				                                                                             
				<div class="pa_partenaires">
					                                          <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a> <a target="_blank" href="#"><img src="https://i.imgur.com/1Rw5eoH.jpg" /></a>                                
				</div>
				                                                                  
			</div>
			                                                                    
		</div>
		                   
		<div class="clear">
			                   
		</div>
		                   
	</div>
</div>
 <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rochester" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Julius+Sans+One|Finger+Paint|Amatic+SC|Oswald" />

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

#pageaccueilcoloree #pageaccueil #forumactif #codage #libreservice

Halloween