Welcome

Halloween Page d'accueil

PA Or

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Page d'accueil Or effet hover

PHPBB2

Optimisé Les informations du staff s'affichent au survol, tout comme le contexte (au survol de l'image en haut à gauche). Les partenaires défilent.

Retour

Codage page d'accueil Or et hover Halloween Forumactif

CSS

/****************************************************** PAGE ACCUEIL ******************************************************/
.page_accueil {
        width: 850px;
        background: #e7bea0;
        border-top: 50px solid #bd8d46;
        border-radius: 90px;
        padding: 5% 0;
        color: #000;
        margin: auto;
}

.clear {
  	clear: both;
}

/* BLOCS */
.page_accueil .gauche, .page_accueil .milieu, .page_accueil .droite {
        float: left;
        width: 30%;
}

.page_accueil .gauche {
    	margin: 0 0 0 2%;
}

.page_accueil .droite {
    	margin: 0 2% 0 0;
}

.page_accueil .milieu {
    	margin: 0 3%;
}

/* CONTEXTE */
.bloc_contexte {
        width: 250px;
        height: 170px;
        margin: auto;
        overflow: hidden;
}

img.image_contexte {
    	transition: .5s all;
}

.bloc_contexte:hover .image_contexte {
        margin-top: -170px;
        transition: .5s all;
}

.contenu_contexte {
        width: 250px;
        height: 170px;
        box-sizing: border-box;
        padding: 5%;
        text-align: justify;
        background: #eed3be;
        overflow: auto;
}

/* MESSAGE BIENVENUE ET NOUVEAUTES */
.page_accueil .milieu, .page_accueil .droite {
        height: 170px;
        box-sizing: border-box;
        padding: 2%;
        text-align: justify;
        background: #eed3be;
  	line-height: 1.5;
        overflow: auto;
}

.droite span {
        color: #bd8d46;
        font-weight: bold;
}

/* STAFF */
/* Titre */
.page_accueil h2 {
        color: #bd8d46;
        font-family: 'Lobster', sans-serif;
        font-size: 28px;
        font-weight: normal;
        position: relative;
}

.pa_staff {
        background: #eed3be;
        margin: -4.5% auto 2%;
        width: 96%;
        padding: 3% 0 0 0;
        text-align: center;
}

/* Systeme hover */
.bloc_staff {
        width: 160px;
        height: 62px;
        overflow: hidden;
        display: inline-block;
        margin: 1%;
}

img.staff_img {
    	transition: .5s all;
}

.bloc_staff:hover .staff_img {
        margin-top: -62px;
        transition: .5s all;
}

.staff_contenu {
        background: #e7bea0;
        width: 160px;
        height: 62px;
        box-sizing: border-box;
}

/* Pseudo */
.staff_contenu h3 {
        margin: 0;
        font-family: 'Lobster', sans-serif;
        font-size: 18px;
        font-weight: normal;
        padding: 3% 0 0;
}

/* Rang */
.staff_contenu h4 {
        color: #bd8d46;
        font-family: Times New Roman;
        font-style: italic;
        letter-spacing: 2px;
        text-transform: lowercase;
        font-size: 14px;
        margin: 0;
}

/* PARTENAIRES */
.pa_partenaires {
        background: #eed3be;
        margin: 2% auto;
        padding: 2%;
        text-align: center;
        width: 96%;
        box-sizing: border-box;
}

HTML

<div class="page_accueil">
	     
	<div class="gauche">
		     
		<div class="bloc_contexte">
			   <img src="https://i.imgur.com/7XhRfQL.png" alt="" class="image_contexte" />   
			<div class="contenu_contexte">
				   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel convallis velit. Integer sem velit, semper ut venenatis sit amet, ultrices vitae neque. Curabitur semper est eget tortor dapibus feugiat. Sed urna dui, pretium nec ex ac, egestas fermentum diam. Sed nibh lorem, blandit ut interdum nec, sollicitudin ac arcu. Nulla sit amet risus luctus, venenatis erat elementum, ornare eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere, magna vel aliquam porttitor, dui nibh bibendum arcu, ac euismod felis est ut tellus. Integer placerat quam erat, vel vulputate nulla vulputate sit amet. Fusce orci justo, auctor ac tempus a, varius sed augue. Sed in ligula neque. Aenean ac cursus lacus, nec facilisis est. Cras imperdiet pellentesque iaculis. Donec eu libero purus. Sed eget ante eget dolor elementum aliquam. Quisque tempor diam velit, vitae consequat ante iaculis ut. Maecenas fermentum, lacus at porttitor dictum, felis metus dapibus velit, nec varius quam nulla ac turpis. Ut blandit purus sit amet eros auctor ultricies. Cras tempor est vitae ipsum molestie, a gravida ex pharetra. Pellentesque faucibus arcu quis risus vulputate, in vulputate diam venenatis. Nulla eget efficitur magna, non tincidunt felis. Nam sagittis odio sed elit condimentum, vitae suscipit est vestibulum. Phasellus in neque neque.   
			</div>
			     
		</div>
		     
	</div>
	     
	<div class="milieu">
		   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et felis bibendum sem cursus aliquet quis vel nisi. Praesent eget imperdiet arcu. Donec accumsan vehicula dui, viverra vehicula sem vulputate eu. Duis et libero luctus, mollis justo at, accumsan orci. Cras quis odio mollis, vulputate massa sit amet, consectetur sapien. Cras mollis quam id nisi eleifend, quis fringilla mi dictum. Duis pellentesque ultricies justo, sed fringilla eros scelerisque nec. Sed interdum sed arcu cursus pharetra. Integer nec orci risus. Donec ac odio egestas, hendrerit neque ultrices, hendrerit risus. Duis vestibulum blandit ligula, non viverra ipsum venenatis vel. Sed nec varius neque. Mauris lorem erat, scelerisque vel lacus nec, accumsan vestibulum arcu. Aliquam pellentesque hendrerit massa. Aliquam cursus ornare pulvinar. Aliquam eu dignissim nisl. Integer rhoncus cursus tortor, at ultrices metus interdum id. Aliquam convallis bibendum ultricies. Phasellus at egestas sem, vitae facilisis nulla.    
	</div>
	     
	<div class="droite">
		   <span>00/00/00</span> Je suis une animation<br /><span>00/00/00</span> Je suis une animation<br /><span>00/00/00</span> Je suis une animation<br /><span>00/00/00</span> Je suis une animation   
	</div>
	     
	<div class="clear">
		     
	</div>
	    
	<h2>
		   L'équipe   
	</h2>
	   
	<div class="pa_staff">
		       
		<div class="bloc_staff">
			   <img src="https://i.imgur.com/JhwWVeD.png" alt="" class="staff_img" />   
			<div class="staff_contenu">
				     
				<h3>
					   Pseudo   
				</h3>
				     
				<h4>
					   Rang   
				</h4><a href="#">MP</a>   
			</div>
		</div>
		       
		<div class="bloc_staff">
			   <img src="https://i.imgur.com/JhwWVeD.png" alt="" class="staff_img" />   
			<div class="staff_contenu">
				     
				<h3>
					   Pseudo   
				</h3>
				     
				<h4>
					   Rang   
				</h4><a href="#">MP</a>   
			</div>
		</div>
		       
		<div class="bloc_staff">
			   <img src="https://i.imgur.com/JhwWVeD.png" alt="" class="staff_img" />   
			<div class="staff_contenu">
				     
				<h3>
					   Pseudo   
				</h3>
				     
				<h4>
					   Rang   
				</h4><a href="#">MP</a>   
			</div>
		</div>
		       
		<div class="bloc_staff">
			   <img src="https://i.imgur.com/JhwWVeD.png" alt="" class="staff_img" />   
			<div class="staff_contenu">
				     
				<h3>
					   Pseudo   
				</h3>
				     
				<h4>
					   Rang   
				</h4><a href="#">MP</a>   
			</div>
		</div>
		       
		<div class="bloc_staff">
			   <img src="https://i.imgur.com/JhwWVeD.png" alt="" class="staff_img" />   
			<div class="staff_contenu">
				     
				<h3>
					   Pseudo   
				</h3>
				     
				<h4>
					   Rang   
				</h4><a href="#">MP</a>   
			</div>
		</div>
		       
		<div class="bloc_staff">
			   <img src="https://i.imgur.com/JhwWVeD.png" alt="" class="staff_img" />   
			<div class="staff_contenu">
				     
				<h3>
					   Pseudo   
				</h3>
				     
				<h4>
					   Rang   
				</h4><a href="#">MP</a>   
			</div>
		</div>
		       
		<div class="bloc_staff">
			   <img src="https://i.imgur.com/JhwWVeD.png" alt="" class="staff_img" />   
			<div class="staff_contenu">
				     
				<h3>
					   Pseudo   
				</h3>
				     
				<h4>
					   Rang   
				</h4><a href="#">MP</a>   
			</div>
			     
		</div>
	</div>
	     
	<div class="pa_partenaires">
		     
		<marquee direction="left">
			   <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a> <a href="#" target="_blank"><img src="https://i.imgur.com/4PPi9fu.gif" alt="" /></a>   
		</marquee>
		     
	</div>
	       
</div>

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

#orhover #pageaccueil #forumactif #codage #libreservice

Halloween