Sieben le 17 Déc 2021 à 11h31
Et bonjour ! Voici un code un peu vieux, qui fut ma toute première PA~

• Merci de créditer Sieben
• Les couleurs, typos etc. sont bien entendu modifiables
• Si vous avez besoin d'aide pour la personnalisation du code, n'hésitez pas à me MP

A savoir :
- Le passage de la souris sur les images entre le contexte et les liens utiles révèle une zone de texte pour les intrigues et les nouveautés.
- Le passage de la souris sur les images des PVs affiche leurs infos.

- Elle s'adapte à toutes les largeurs de forum (au-dessus de 800px, en dessous c'est pas beau), il faut juste modifier la première ligne du CSS pour indiquer la largeur du forum.
- La disposition actuelle des éléments est travaillée pour un forum de 800px de large, au-delà il faudra juste modifier la largeur (width) de certains éléments (indiqués dans le CSS) si vous ne voulez pas avoir de gros vides entre les blocs. Rien de bien compliqué, elle est systématiquement indiquée en % ça se fait facilement :)
- Concernant les liens utiles : Si vous avez une phrase un peu trop longue qui colle les blocs entre eux (contexte & images), je vous conseille de réduire la "width" dans .PAcontexte et/ou dans .PAintriguenews pour rétablir l'espace que vous voulez :)

Petit tip : Si vous préférez que les colonnes de la zone supérieure soient alignées avec celles de la zone inférieure, il vous suffit de changer #PAblochaut{ justify-content : space-around;} par #PAblochaut{ justify-content : space-between;}

HTML

                        <link href="https://fonts.googleapis.com/css?family=Changa|Montserrat&display=swap" rel="stylesheet">

<script>
function PAonglets1() {
document.getElementById("PApredefinfos").innerHTML = document.getElementById("PApredef1").innerHTML;
}

function PAonglets2() {
document.getElementById("PApredefinfos").innerHTML = document.getElementById("PApredef2").innerHTML;
}

function PAonglets3() {
document.getElementById("PApredefinfos").innerHTML = document.getElementById("PApredef3").innerHTML;
}

function PAonglets4() {
document.getElementById("PApredefinfos").innerHTML = document.getElementById("PApredef4").innerHTML;
}
</script>


<div class="PAcontour">

<!-- CITATION DEBUT -->
<label>
« Citation toute chouette. »
</label>


<!-- PREMIERE PARTIE -->

<div id="PAblochaut">

<!-- CONTEXTE -->
<div class="PAcontexte">
<p>
<span>Phrase qui déchire</span>
<br /><br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis nemo eum harum reiciendis fugiat nam tempora iure unde totam animi cum deserunt ducimus, ab, delectus, placeat quidem incidunt quam? Omnis.
<br /><br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis nemo eum harum reiciendis fugiat nam tempora iure unde totam animi cum deserunt ducimus, ab, delectus, placeat quidem incidunt quam? Omnis.
<br /><br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis nemo eum harum reiciendis fugiat nam tempora iure unde totam animi cum deserunt ducimus, ab, delectus, placeat quidem incidunt quam? Omnis.
<a href="LIENDUCONTEXTE">la suite</a>
</p>
</div>

<div class="PAintriguenews">
<!-- INTRIGUE -->
<div>
<p>
Ici c'est pour les intrigues
<br />
Histoire de montrer aux gens comme ton forum est cool
</p>
<img src="TONIMAGEICI" class ="PAun"/>
</div>

<!-- NEWS -->
<div>
<p>
▬ xx/xx/xx : News 6
<br /><br />
▬ xx/xx/xx : News 5
<br /><br />
▬ xx/xx/xx : News 4
<br /><br />
▬ xx/xx/xx : News 3
</p>
<img src="TONIMAGEICI" class="PAdeux"/>
</div>
</div>

<!-- LIENS UTILES -->
<ul>
<li><a href="..." target="_blank">Règlement</a></li>
<li><a href="..." target="_blank">Contexte</a></li>
<li><a href="..." target="_blank">Annexes</a></li>
<li><a href="..." target="_blank">Groupes</a></li>
<li><a href="..." target="_blank">Prédéfinis</a></li>
<li><a href="..." target="_blank">Invités</a></li>
</ul>

</div>


<!-- DEUXIEME PARTIE -->

<div id="PAblocbas">

<!-- PARTENAIRES -->
<div class="PApartenaires">
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
<a href="..." target="_blank"><img src="TONIMGICI" /></a>
</div>


<!-- IMAGES DES PREDEFINIS -->
<div class="PApredefs">
<div class="PAimgpredefs">
<img src="IMGPREDEF1" onmouseover="PAonglets1()"/>
<img src="IMGPREDEF2" onmouseover="PAonglets2()"/>
<img src="IMGPREDEF3" onmouseover="PAonglets3()"/>
<img src="IMGPREDEF4" onmouseover="PAonglets4()"/>
</div>

<div id="PApredefinfos">
<p>
Passe ton curseur sur les visages pour les découvrir !
</p>
</div>
</div>


<!-- DESCRIPTION DES PREDEFINIS -->
<div id="PApredef1">
<p>
<span>
Prénom Nom
</span>
<br>
<span>
- Ft Avatar -
</span>
<br><br>
<span>
Info 1
<br>
Info 2
</span>
<br>
<a href="...">Découvre-la !</a>
</p>
</div>

<div id="PApredef2">
<p>
<span>
Prénom Nom
</span>
<br>
<span>
- Ft Avatar -
</span>
<br><br>
<span>
Info 1
<br>
Info 2
</span>
<br>
<a href="...">Découvre-le !</a>
</p>
</div>

<div id="PApredef3">
<p>
<span>
Prénom Nom
</span>
<br>
<span>
- Ft Avatar -
</span>
<br><br>
<span>
Info 1
<br>
Info 2
</span>
<br>
<a href="...">Découvre-la !</a>
</p>
</div>

<div id="PApredef4">
<p>
<span>
Prénom Nom
</span>
<br>
<span>
- Ft Avatar -
</span>
<br><br>
<span>
Info 1
<br>
Info 2
</span>
<br>
<a href="...">Découvre-le !</a>
</p>
</div>


<div class="PAstaffts">
<!-- STAFF -->
<div class="PAstaff">
<div>
<img src="IMGSTAFF1" />
<p>Staff 1</p>
<a href="...">MP</a>
</div>

<div>
<img src="IMGSTAFF2" />
<p>Staff 2</p>
<a href="...">MP</a>
</div>

<div>
<img src="IMGSTAFF3" />
<p>Staff 3</p>
<a href="...">MP</a>
</div>
</div>

<!-- TOP SITES -->
<div class="PAtopsites">
<a href="..." target="_blank">1</a>
<a href="..." target="_blank">2</a>
<a href="..." target="_blank">3</a>
<a href="..." target="_blank">4</a>
<a href="..." target="_blank">5</a>
</div>
</div>

</div>
</div>

CSS

                            /*------------ PAGE D'ACCUEIL PAR SIEBEN SUR EPICODE -----------*/

/* CONTOUR GENERAL */

.PAcontour{
width : 800px; /* TAILLE DE TON FORUM */
background-color : #272D59; /* couleur de fond de la PA */
display : flex;
flex-direction : column;
line-height : 1.2;
font-family : 'Montserrat', sans-serif; /* typo générale */
font-size : 11px; /* taille générale de la typo */
}

.PAcontour a{ /* retire la couleur des liens */
text-decoration : none;
color : inherit;
}

/* CITATION */

.PAcontour label{
background-color : #101224; /* couleur de fond */
color : rgb(207, 193, 193); /* couleur du texte */
font-size : 18px; /* taille du texte */
font-family : 'Changa', sans-serif; /* typo de la citation */
padding : 17px;
text-align : justify;
}

/* SCROLLBAR (pour chrome) */
.PAcontexte::-webkit-scrollbar, .PAintriguenews div::-webkit-scrollbar{
display : none; /* cache la scrollbar */
}
.PAcontexte, .PAintriguenews div{ /* (pour firefox) */
scrollbar-width: none;
}


/* LIGNE SUPERIEURE */

#PAblochaut{
display : flex;
justify-content : space-around;
margin : 10px 0px;
height : 280px;
}


/* CONTEXTE */

.PAcontexte{
width : 50%; /* largeur du contexte */
background-color : #E3E6F5; /* couleur de fond */
font-size : 13px; /* taille du contexte */
color : black; /* couleur du texte */
text-align : justify;
overflow : hidden;
}

.PAcontexte p span:first-of-type{
padding-left : 15px;
font-weight : bold;
}

.PAcontexte p a{
display : block;
text-align : right;
font-size : 1.1em;
}

.PAcontexte p a:hover{
color: #97a3d6; /* couleur du lien au survol */
}

intro, .PAcontexte p a{
font-variant : small-caps;
letter-spacing : 0.1em;
}

.PAcontexte p{
padding : 0px 15px;
}

.PAcontexte:hover{
overflow-y : auto;
}


/* ZONE INTRIGUE/NEWS */

.PAintriguenews{
width : 28%; /* largeur de la zone intrigue/news */
display : flex;
flex-direction : column;
justify-content : space-between;
text-align : justify;
}

.PAintriguenews div{
background-color : #E3E6F5; /* couleur de fond */
color : black; /* couleur des textes */
position : relative;
overflow : hidden;
height : 49%;
}

.PAintriguenews p{
margin : 5px;
display : none;
}

.PAintriguenews div:hover p{
display : block;
}

.PAun, .PAdeux{ /* redimensionnement auto des imgs */
position : absolute;
top : 0;
width : 100%;
height : 100%;
-webkit-transition : all 1.25s;
-moz-transition : all 1.25s;
-o-transition : all 1.25s;
transition : all 1.25s;
transition-timing-function: cubic-bezier(.68,-0.55,.27,1.55);
}

.PAintriguenews div:hover img{
margin-top: -100%;
}

.PAintriguenews div:hover{
overflow-y : auto;
}


/* CONTOUR DES LIENS UTILES */

#PAblochaut ul{
background-color : #101224; /* fond du contour des liens */
list-style-type : none;
margin : 0;
padding : 0;
display : flex;
flex-direction : column;
justify-content : center;
text-align : center;
}

/* LIENS UTILES */

#PAblochaut ul li{
background-color : #E3E6F5; /* fond des liens */
color : #272D59; /* couleur des liens */
text-transform : uppercase;
font-weight : bold;
margin : 10px;
padding : 5px 10px;
-webkit-transition : all 1.25s;
-moz-transition : all 1.25s;
-o-transition : all 1.25s;
transition : all 1.25s;
transition-timing-function: cubic-bezier(.68,-0.55,.27,1.55);
}

#PAblochaut ul li:hover{
background : #97A3D6; /* fond des liens au survol */
color : #272D59; /* couleur des liens au survol */
letter-spacing: 0.1em;
}


/* LIGNE INFERIEURE */

#PAblocbas{
display : flex;
justify-content : space-between;
height : 170px;
}


/* PARTENAIRES */

.PApartenaires{
background-color : #101224; /* couleur du fond */
width : 21%; /* largeur des partenaires */
display : flex;
flex-flow : wrap;
justify-content : space-around;
align-items : center;
}

.PApartenaires img{ /* redimensionnement auto */
width : 50px;
height : 50px;
}


/* PREDEFINIS */

.PApredefs{
width : 50%; /* largeur des prédefs (img+texte) */
display : flex;
justify-content : space-between;
}

/* IMAGES PREDEFS */

.PAimgpredefs{
width : 38%; /* largeur des images */
display : flex;
flex-direction : column;
justify-content : space-between;
}

.PAimgpredefs img{
height : 23%; /* hauteur des images */
}

/* DESCRIPTION PREDEFS AVANT SURVOL */

#PApredefinfos{
color : black; /* couleur texte */
background-color : #E3E6F5; /* couleur fond zone texte */
font-size : 13px; /* taille texte */
width : 60%; /* largeur de la zone texte */
overflow : hidden;
}

#PApredefinfos p{
padding : 5px 20px;
text-align : center;
}

#PApredef1, #PApredef2, #PApredef3, #PApredef4{ /* cache les infos des predefs */
display : none;
}

/* DESCRIPTION PREDEFS AU SURVOL */

#PApredefinfos p span:first-of-type{ /* PRENOM/NOM */
font-size : 18px;
font-weight : bold;
}

#PApredefinfos p span{ /* FEAT */
font-size : 11px;
}

#PApredefinfos p span:last-of-type{ /* INFOS */
color : rgb(207, 193, 193);
background-color : #101224;
display : block;
margin : auto;
font-size : 16px;
padding : 5px;
}

/* STAFF ET TOP SITES */

/* STAFF */

.PAstaffts{
background-color : #97A3D6; /* fond staff/top site */
width : 22.7%; /* largeur staff/TS */
padding : 1px 5px;
}

.PAstaff div{
color : black; /* couleur du texte */
height : 49px;
display : flex;
justify-content : space-between;
align-items : center;
}

.PAstaff p{
color : black; /* couleur du texte */
font-size : 16px; /* taille nom staff */
font-variant : small-caps;
}

.PAstaff img{
height : 38px;
width : 46%;
align-self : flex-start;
}

.PAstaff img:first-child{
padding-top: 2px;
}

.PAstaff a{
border : 2px solid black; /* contour MP */
background-color : #101224; /* fond MP */
color : rgb(207, 193, 193); /* couleur MP */
padding-right : 5px;
padding-left : 5px;
}

/* TOP SITES */

.PAtopsites{
text-align : center;
white-space : nowrap;
}

.PAtopsites a{
border : 2px solid black; /* contour top sites */
background-color : #101224; /* fond top sites */
color : rgb(207, 193, 193); /* couleur chiffres */
padding : 5px 10px;
margin-right : 5px;
font-weight : bold;
}

.PAtopsites a:last-child{
margin : 0;
}

/*------------ FIN PAGE D'ACCUEIL -----------*/

Commentaires

Personne n'a commenté ce code pour le moment.

Vous devez être inscrit et connecté pour pouvoir poster un commentaire.