Welcome

Halloween Page d'accueil

Verte & Noire

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil City Verte & Noire

PHPBB2

Optimisé Les informations du staff et le contexte s'affichent au survol

Retour

Codage page d'accueil city verte et noire Halloween Forumactif

CSS

/***************************************** PAGE D'ACCUEIL, HALLOWEEN *****************************************/

.fond_pa {
    background: #252525;
    border-radius: 20%;
    width: 750px;
    padding: 2% 0;
}

.contenu_pa {
    width: 750px;
    background: #0D0D0D;
    border-radius: 30%;
    color: #8c8c8c;
    padding: 2% 0;
}

.contenu_pa a, .contenu_pa a:hover {
    color: #72BB60;
    text-decoration: none !important;
}

/* Mise en forme colonnes */
.pa_colonne, .pa_colonne1 {
    float: left;
}

.pa_colonne1 {
    margin: 0 5.5%;
}

.clear {
    clear: both;
}

/* Mise en forme titres */
.contenu_pa h2 {
    font-family: 'Montez', cursive;
    font-size: 50px;
    text-align: center;
    position: relative;
    top: -0.8em;
    color: #72BB60;
    margin-bottom: 0;
}

.contenu_pa h3 {
    color: #72BB60;
    font-family: 'Mouse Memoirs', sans-serif;
    font-size: 30px;
    margin: -1.5% 0 5% 0;
    text-align: center;
}

/* Contexte */
.contexte {
    background: #252525;
    height: 200px;
    overflow: hidden;
    width: 300px;
    margin-bottom: 5%;
}

.contexte_img {
    position: relative;
    z-index: 2;
    width: 300px;
    height: 200px;
    margin-left: 0px;
    transform: all;
    transition: 1s;
}

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

.contexte_description {
    position: relative;
    z-index: 1;
    width: 270px;
    height: 200px;
    margin-top: -200px;
    text-align: justify;
    font-size: 11px;
    padding: 10px;
    overflow: auto;
}

.lettrine:first-letter {
    font-size: 300%;
    float: left;
    font-family: 'Montez', cursive;
    color: #72BB60;
}

/* Predefinis */

.fond_bloc_prédef {
    width: 270px;
    height: 180px;
    padding: 15px;
    background: #252525;
}

/* Coup de coeur */
.fond_bloc_coupsde {
    width: 500px;
    padding: 15px;
    margin-top: -20px;
    background: #252525;
}

.titrecoupsde {
    font-family: 'Montez', cursive;
    font-size: 50px;
    color: #72BB60;
}

/* Staff */
.fond_bloc_staff {
    background: #252525;
    height: 270px;
    padding: 10px;
    width: 310px;
    margin-bottom: 7%;
}

.infobulle {
    display: inline-block;
}

.infobulle img {
    width: 100px;
    height: 93px;
    object-fit: cover;
}

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

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

.contenu_bulle {
    background: #414141;
    font-size: 11px;
    height: 74px;
    margin: auto;
    padding: 10px;
    text-align: center;
    width: 80px;
}

/* News */
.fond_bloc_news {
    background: #252525;
    height: 100px;
    padding: 15px;
    width: 300px;
    text-align: left;
    margin-bottom: 7%;
}

/* Votes */
.fond_bloc_votes img {
    float: left;
    margin-right: 2%;
}

.fond_bloc_votes {
    background: #252525;
    padding: 15px;
    width: 300px;
    text-align: left;
}

/* Credits */
.bloc_crédits {
    background: #252525;
    transform: rotate(-2deg);
    width: 500px;
    padding: 15px;
    margin: 2%;
}

/***************************************** FIN PAGE D'ACCUEIL, HALLOWEEN *****************************************/

HTML

<div class="fond_pa">
	                   
	<div class="contenu_pa">
		                     
		<h2>
			           Nom forum           
		</h2>
		                   
		<div class="pa_colonne1">
			                     
			<div class="contexte">
				                     
				<div class="contexte_img">
					           <img src="http://25.media.tumblr.com/6d4265b6a129ebc617b2853dc285b740/tumblr_mwapx7oibg1qgfk6po1_r1_500.gif" />          
				</div>
				                     
				<div class="contexte_description">
					                     
					<div class="lettrine">
						           C           
					</div>
					           eci est un contexte. 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. <a href="#">La suite</a>          
				</div>
				                      
			</div>
			                     
			<div class="fond_bloc_prédef">
				                     
				<h3>
					           Prédéfinis           
				</h3>
				              <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a> <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a> <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a> <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a> <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a> <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a> <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a> <a href="#"><img style="width: 60px; border-radius: 100%;" src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" /></a>             
			</div>
			                     
			<div class="titrecoupsde">
				           Nos coups de ♥           
			</div>
			                     
			<div style="width: 270px;" class="fond_bloc_coupsde">
				              <a href="http://ls-halloween.fr"><img src="http://ls-halloween.fr/img/partenaires.jpg" /></a>             
			</div>
			               
		</div>
		                      
		<div class="pa_colonne">
			                     
			<div class="fond_bloc_staff">
				                     
				<h3>
					           Staff           
				</h3>
				                  
				<div class="infobulle">
					       <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" />       
					<div>
						              
						<div class="contenu_bulle">
							                Nom du personnage<br />Rang <br /><a href="#">MP</a> <a href="#">Profil</a>                 
						</div>
						          
					</div>
					     
				</div>
				<div class="infobulle">
					       <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" />       
					<div>
						              
						<div class="contenu_bulle">
							                Nom du personnage<br />Rang <br /><a href="#">MP</a> <a href="#">Profil</a>                 
						</div>
						          
					</div>
					     
				</div>
				<div class="infobulle">
					       <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" />       
					<div>
						              
						<div class="contenu_bulle">
							                Nom du personnage<br />Rang <br /><a href="#">MP</a> <a href="#">Profil</a>                 
						</div>
						          
					</div>
					     
				</div>
				<div class="infobulle">
					       <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" />       
					<div>
						              
						<div class="contenu_bulle">
							                Nom du personnage<br />Rang <br /><a href="#">MP</a> <a href="#">Profil</a>                 
						</div>
						          
					</div>
					     
				</div>
				<div class="infobulle">
					       <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" />       
					<div>
						              
						<div class="contenu_bulle">
							                Nom du personnage<br />Rang <br /><a href="#">MP</a> <a href="#">Profil</a>                 
						</div>
						          
					</div>
					     
				</div>
				                                   
			</div>
			                   
			<div class="fond_bloc_news">
				                     
				<h3>
					           New-York Time           
				</h3>
				           <span style="width: 290px; height: 90px; overflow: auto;"> <span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#">La suite</a> </span>          
			</div>
			                   
			<div class="fond_bloc_votes">
				              <img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" />  Votez pour nous <a href="#">ici</a>.<br />N'hésitez pas à poster pour nos publicités <a href="#">ici</a> et <a href="#">ici</a>.             
			</div>
			                     
		</div>
		             
		<div class="clear">
			             
		</div>
		           <br />          
		<div class="bloc_crédits">
			           Le contexte, l’apparence, les idées sont la propriété du staff de <span style="color: #72BB60;">Forum</span>. Toute reproduction partielle ou totale est interdite.<br />Design par <a href="#">Pseudo</a> ; Codage de la PA par <a href="http://ls-halloween.fr">Halloween</a>          
		</div>
		                   
	</div>
	                 
</div>
  <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montez" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Mouse+Memoirs" />

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

#cityverteetnoire #pageaccueil #forumactif #codage #libreservice

Halloween