Welcome

Halloween Page d'accueil

Mutatis

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

PHPBB2

Optimisé Le bloc image du centre (267*255px) affiche le contexte et les nouveautés en hover. Les "X" correspondent aux topsites. L'image "New 1" (267*138px) est un diaporama. Un qui est en ligne est également disponible.
Réalisé pour le forum Mutatis Mutandis.

Retour

Codage page d'accueil Mutatis Halloween Forumactif

CSS

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

::-webkit-scrollbar {
        height: 4px;
        width: 4px;
}
::-webkit-scrollbar-thumb {
        background: #667583;
        height: 4px!important;
        position: absolute;
        width: 4px;
}
::-webkit-scrollbar-track {
    	background: #b9bbbd;
}

/************************************************* PAGE ACCUEIL *************************************************/
.page_accueil {
        background: url('https://i.imgur.com/vu8JwjT.jpg') no-repeat bottom;
        color: #b9bbbd;
        font-family: Georgia, sans-serif;
        font-size: 12px;
        margin: auto;    
  	padding: 0 0 1%;
        width: 800px;
}

.pa_content {
        display: flex;
        flex-wrap: wrap;
        padding: 8% 0 0;
        width: 100%;
        justify-content: center;
}

.pa_blocs {
    	width: 26%;
}

/* TITRES */
.page_accueil h2 {
        background: url('https://i.imgur.com/JSlbVXm.jpg') no-repeat;
        height: 107px;
        overflow: hidden;
        font-family: 'UnifrakturMaguntia', cursive;
        font-size: 60px;
        color: #b9bbbd;
        text-align: center;
        border-bottom: 7px solid;
        font-weight: normal;
        padding: 3% 0 0;
        margin: 0;
        box-sizing: border-box;
}

.page_accueil h3 {
        font-family: Roboto, sans-serif;
        font-size: 10px;
        color: #5b6b7a;
        font-weight: bold;
        text-transform: uppercase;
        text-align: right;
        margin: 0 0 2%;
}

.contexte_content h3 {
        text-align: center;
        margin: 5% 0;
        display: block;
}

.contexte_content h3::after {
        display: block;
        width: 80%;
        border-bottom: 1px solid #8ba2b7;
        content: "";
        height: 1px;
        margin: 5% auto 0;
}

h3.pa_titre_partenaires {
        text-align: left;
        margin: 13% 0 2%;
}

/* STAFF */
.pa_blocs.staff {
        background: rgba(0,0,0,.8);
        padding: 1%;
}

.pa_staff {
        align-items: center;
        display: flex;
        justify-content: space-between;
        text-align: right;
        margin: 9% 0 0;
}

.pa_staff:nth-child(2n+1) {
        text-align: left;
        flex-direction: row-reverse;
}

.pa_staff img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        padding: 2%;
        border: 1px solid #b9bbbd;
        border-radius: 100px;
}

.pa_staff div h4 {
        color: #8ba2b7;
        font-size: 18px;
        font-style: italic;
        font-weight: normal;
        margin: 0;
}

.pa_staff div h5 {
        color: #5b6b7a;
        font-family: Roboto, sans-serif;
        margin: 1% 0;
}

.pa_staff div a {
        display: inline-block;
        background: #b9bbbd;
        color: #fff !important;
        width: 60px;
        text-align: center;
        text-transform: uppercase;
        font-family: Roboto, sans-serif;
        font-size: 9px;
        letter-spacing: 1px;
}

/* CONTEXTE */
.pa_blocs:nth-child(2) {
        width: 33.5%;
        margin: 0 2%;
}

.pa_contexte {
        width: 267px;
        height: 255px;
        overflow: hidden;
        position: relative;
}

.pa_contexte:hover .contexte_content {
    	top: 0;
}

.contexte_content {
        position: absolute;
        top: -255px;
        transition: .5s all;
        width: 267px;
        height: 255px;
        overflow: auto;
        background: rgba(0,0,0,.8);
        padding: 8% 10%;
        font-size: 11px;
        line-height: 1.5;
        box-sizing: border-box;
}

.header_contexte img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        padding: 2%;
        border: 1px solid #5b6b7a;
        border-radius: 100px;
}

.header_contexte {
        text-align: center;
        margin: 0 0 2%;
}

.contexte_content p {
        font-family: Georgia, sans-serif;
        text-align: justify;
        font-size: 11px;
        line-height: 1.5;
}

.contexte_content span {
        font-family: Roboto, sans-serif;
        font-size: 10px;
        text-transform: uppercase;
        color: #8ba2b7;
        font-weight: bold;
}

/* TOPS */
.pa_tops {
        font-family: 'UnifrakturMaguntia', cursive;
        text-align: center;
        font-size: 30px;
        margin: 2% 0;
}

.pa_tops a {
  	color: #fff;
}

.pa_tops a:nth-child(2n+1) {
    	color: #2b2930;
}

/* SLIDER */
.slideshow, .slide {
        width: 267px;
        height: 138px;
}

.slideshow img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
  	width: 267px;
  	height: 138px;
}

.slideshow a {
        position: absolute;
        top: 55%;
        z-index: 2;
        font-family: 'UnifrakturMaguntia', cursive;
        font-size: 25px;
        color: #5e8289;
        left: 10%;
}

.slideshow {
        margin: 0;
        overflow: hidden;
        background: rgba(0,0,0,0.3);
}
  
.slide {
        margin: auto;
        overflow: auto;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
  	position: relative;
}

/* SCENARIOS */
.pa_predefinis {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
}

.pa_predef::after {
        border: 1px solid #8ba2b7;
        border-radius: 100px;
        content: "";
        height: 60px;
        position: absolute;
        width: 60px;
        z-index: 1;
        top: 0;
        left: 0;
}

.pa_predef {
        margin: 6% 2%;
        position: relative;
        width: 60px;
}

.pa_predef img {
        width: 50px;
        height: 50px;
        position: relative;
        z-index: 2;
        margin: 10% 0 0 10%;
}

/* PARTENAIRES */
.pa_partenaires img {
        height: 31px;
        margin: 5% 3% 0;
        object-fit: cover;
        opacity: .5;
        transition: .5s all;
        width: 88px;
}

.pa_partenaires img:hover {
    	opacity: 1;
}

/* LIENS RAPIDES */
.pa_liens {
    	text-align: center;
}

.pa_liens a {
        color: #b9bbbd;
        font-family: 'UnifrakturMaguntia', cursive;
        font-size: 25px;
        font-weight: bold;
  	transition: .5s all;
        margin: 3% 2%;
        display: inline-block;
}

.pa_liens a:hover {
        transform: rotate(-10deg);
        color: #8ba2b7;
}

a.credits_hallow {
        text-align: right;
        display: block;
        margin: 0 2% 2%;
        color: #446278;
}

HTML

<div class="page_accueil">
	                            
	<h2>
		                    Mutatis Mutandis                 
	</h2>
	                                 
	<div class="pa_content">
		                                
		<div class="pa_blocs staff">
			                                    
			<h3>
				                            Staff                         
			</h3>
			                                                 
			<div class="pa_staff">
				                            <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                                             
				<div>
					                                            
					<h4>
						                                    Pseudo joueur                                 
					</h4>
					                                            
					<h5>
						            Rang - Double compte            
					</h5>
					                                <a href="#">Profil</a>                    <a href="#">Contact</a>                            
				</div>
				                                    
			</div>
			                                                 
			<div class="pa_staff">
				                            <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                                             
				<div>
					                                            
					<h4>
						                                    Pseudo joueur                                 
					</h4>
					                                            
					<h5>
						            Rang - Double compte            
					</h5>
					                                <a href="#">Profil</a>                    <a href="#">Contact</a>                            
				</div>
				                                    
			</div>
			                                                 
			<div class="pa_staff">
				                            <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                                             
				<div>
					                                            
					<h4>
						                                    Pseudo joueur                                 
					</h4>
					                                            
					<h5>
						            Rang - Double compte            
					</h5>
					                                <a href="#">Profil</a>                    <a href="#">Contact</a>                            
				</div>
				                                    
			</div>
			                                                 
			<div class="pa_staff">
				                            <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                                             
				<div>
					                                            
					<h4>
						                                    Pseudo joueur                                 
					</h4>
					                                            
					<h5>
						            Rang - Double compte            
					</h5>
					                                <a href="#">Profil</a>                    <a href="#">Contact</a>                            
				</div>
				                                    
			</div>
			                                                 
			<div class="pa_staff">
				                            <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                                             
				<div>
					                                            
					<h4>
						                                    Pseudo joueur                                 
					</h4>
					                                            
					<h5>
						            Rang - Double compte            
					</h5>
					                                <a href="#">Profil</a>                    <a href="#">Contact</a>                            
				</div>
				                                    
			</div>
			                                
		</div>
		                                         
		<div class="pa_blocs">
			                                    
			<div class="pa_contexte">
				                            <img class="img_contexte" alt="" src="https://i.imgur.com/ZRonv4C.jpg" />                            
				<div class="contexte_content">
					                                            
					<div class="header_contexte">
						                                    <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                        <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                        <img alt="" src="https://i.imgur.com/vu8JwjT.jpg" />                                
					</div>
					                                                                         
					<h3>
						                                        Contexte                                     
					</h3>
					                                                                         
					<p>
						                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet sapien eu nisi hendrerit sagittis. Maecenas vitae est hendrerit, lacinia arcu eget, bibendum enim. Pellentesque sollicitudin, nisi eu blandit iaculis, elit nunc sodales purus, tempor elementum nunc augue ac odio. Cras accumsan fringilla quam nec mollis.<br /> Duis fringilla dui nulla, et tincidunt sem maximus eget. Proin iaculis, ex at elementum mollis, enim sapien malesuada orci, molestie feugiat nisl purus quis est. Vivamus gravida faucibus velit, tempor luctus odio. Nam sed metus sed augue tempor sagittis.                                    
					</p>
					                                                             <span>                            XX/XX ouverture                         </span>                        Contenu blabla                        <br /> <span>                            XX/XX ouverture                         </span>                        Contenu blabla                        <br /> <span>                            XX/XX ouverture                         </span>                        Contenu blabla                                 
				</div>
				                                        
			</div>
			                                                 
			<div class="pa_tops">
				                            <a target="_blank" href="#">                    X                 </a>                                 <a target="_blank" href="#">                    X                 </a>                                 <a target="_blank" href="#">                    X                 </a>                        
			</div>
			                                                 
			                         
			<div id="slideshow" class="slideshow">
				                                                               
				<div id="slideshow-container">
					                                                                         
					<div class="slide">
						                                                                          <a target="_blank" href="#">News #1</a>                <img src="https://i.imgur.com/vu8JwjT.jpg" alt="news1" />                                       
					</div>
					                                                                             
					<div class="slide">
						                                                                          <a target="_blank" href="#">News #2</a>                <img src="https://i.imgur.com/vu8JwjT.jpg" alt="news2" />                                             
					</div>
					                                                                                 
				</div>
				                                                    
			</div>
			                                
		</div>
		                                         
		<div class="pa_blocs">
			                                    
			<h3>
				                            Scénarios                         
			</h3>
			               
			<div class="pa_predefinis">
				                                                 
				<div class="pa_predef">
					       <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>                
				</div>
				             
				<div class="pa_predef">
					         <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>           
				</div>
				             
				<div class="pa_predef">
					            <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>                   
				</div>
				             
				<div class="pa_predef">
					                             <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>                    
				</div>
				             
				<div class="pa_predef">
					                             <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>                    
				</div>
				             
				<div class="pa_predef">
					                             <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>           
				</div>
				             
				<div class="pa_predef">
					                             <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>                    
				</div>
				             
				<div class="pa_predef">
					                             <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>                    
				</div>
				                     
				<div class="pa_predef">
					       <a href="#">                    <img alt="" class="img_predef" src="https://i.imgur.com/vu8JwjT.jpg" />                    </a>                    
				</div>
				               
			</div>
			                                                 
			<h3 class="pa_titre_partenaires">
				     Partenaires     
			</h3>
			         
			<div class="pa_partenaires">
				                            <a target="_blank" href="#">                    <img alt="" src="http://ls-halloween.fr/img/homepage/bouton-halloween.png" />                </a>                                 <a target="_blank" href="#">                    <img alt="" src="http://ls-halloween.fr/img/homepage/bouton-halloween.png" />                </a>                                 <a target="_blank" href="#">                    <img alt="" src="http://ls-halloween.fr/img/homepage/bouton-halloween.png" />                </a>                                 <a target="_blank" href="#">                    <img alt="" src="http://ls-halloween.fr/img/homepage/bouton-halloween.png" />                </a>                                 <a target="_blank" href="#">                    <img alt="" src="http://ls-halloween.fr/img/homepage/bouton-halloween.png" />                </a>                                 <a target="_blank" href="#">                    <img alt="" src="http://ls-halloween.fr/img/homepage/bouton-halloween.png" />                </a>                                     
			</div>
			                                
		</div>
		                            
	</div>
	                                 
	<div class="pa_liens">
		                    <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><a href="http://ls-halloween.fr/" target="_blank" class="credits_hallow">Halloween</a>
</div>

Ajout des polices

Dans le template Overall_header, coller ceci avant "T_HEAD_STYLESHEET" :

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

#mutatis #pageaccueil #forumactif #codage #libreservice

Halloween