N°5 PA Design élégant organisé en 3 colonnes

PA au design élégant

Une page d'accueil toute neuve, au design simple mais élégant, organisé en trois colonnes avec les informations qui apparaissent au survol des images. Le cadre du partenariat est utilisé avec des logos de la taille de 88*31 et une scrollbar apparaîtra si nécessaire automatiquement. Cliquez sur les images en miniatures pour agrandir son aperçu.

Laxy.

codage by Laxy Dunbar

Visuel de la PA :

N°5 PA Design élégant organisé en 3 colonnes Pa11010

N°5 PA Design élégant organisé en 3 colonnes Pa21010

N°5 PA Design élégant organisé en 3 colonnes Pa31010

N°5 PA Design élégant organisé en 3 colonnes Pa41010

N°5 PA Design élégant organisé en 3 colonnes Pa51010

CODE HTML :

Code:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Macondo+Swash+Caps&display=swap" />
<div class="page_accueil">

<h2>
Bienvenue {USERNAME} !
</h2>

<div class="pa_colonne_gauche">

<div class="pa_liens">
<a href="#">Bottin des avatars</a><a href="#">Le Décret</a><a href="#">Les Annexes</a><a href="#">Le Bestiaire</a><a href="#">Les groupes</a><a href="#">Les invités</a><a href="#">Nos partenaires</a>
</div>

<h5>
Nos stars
</h5>

<div class="bloc_membres">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="membres_img" />
<div class="membres_contenu">

<h3>
Membre du mois
</h3>
<a href="#">Pseudo</a>
</div>

</div>

<div class="bloc_membres">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="membres_img" />
<div class="membres_contenu">

<h3>
Membre du mois
</h3>
<a href="#">Pseudo</a>
</div>

</div>
<span style="font-size: 10px;">Forum ouvert le 23/01/2019, optimisé pour google chrome. Basé sur l'univers de Teen Wolf. Notre forum est référencé sur<br /><a href="http://cophirende-academie.forumactif.com/" target="_blank"><img class="CophirendeAcademie" src="https://zupimages.net/up/18/39/4666.png" /></a></span>
</div>

<div class="pa_colonne_milieu">

<h5>
Beacon Hills Story
</h5>

<div class="bloc_contexte">
Dylan Sprayberry est un acteur et un musicien américain, né le 7 juillet 1998 à Houston. Il vit à Los Angeles. Il est surtout connu pour son rôle de Liam Dunbar dans la série télévisée Teen Wolf de 2014 à 2017, et pour son rôle dans le film Man of Steel où il a interprété Clark Kent adolescent. <a style="color: #000000;" href="#">En lire plus ?</a>
</div>

<h5>
Staff
</h5>

<div class="bloc_staff">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="staff_img" />
<div class="staff_contenu">

<h3>
<a href="#">Pseudo</a>
</h3>

<h4>
Rang • <span style="color: #00ff00;">Présent</span>
</h4>
DC • TC
</div>

</div>

<div class="bloc_staff">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="staff_img" />
<div class="staff_contenu">

<h3>
<a href="#">Pseudo</a>
</h3>

<h4>
Rang • <span style="color: #ff66ff;">Absent</span>
</h4>
DC • TC
</div>

</div>

<div class="bloc_staff">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="staff_img" />
<div class="staff_contenu">

<h3>
<a href="#">Pseudo</a>
</h3>

<h4>
Rang • <span style="color: #00ff00;">Présent</span>
</h4>
DC • TC
</div>

</div>

<div class="bloc_staff">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="staff_img" />
<div class="staff_contenu">

<h3>
<a href="#">Pseudo</a>
</h3>

<h4>
Rang • <span style="color: #ff66ff;">Absent</span>
</h4>
DC • TC
</div>

</div>

<h5>
Top-Sites
</h5>

<div class="topsite_pa">
<a target="_blank" href="http://www.root-top.com/topsite/fallingangels/in.php?ID=272"><img src="https://i.servimg.com/u/f62/20/06/11/86/logoto10.png" class="img_topsite" /></a> <a target="_blank" href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=5962"><img src="https://i.servimg.com/u/f62/20/06/11/86/logoto11.png" class="img_topsite" /></a> <a target="_blank" href="http://www.root-top.com/topsite/obsession27/in.php?ID=25571"><img src="https://i.servimg.com/u/f62/20/06/11/86/logoto12.png" class="img_topsite" /></a> <a target="_blank" href="http://www.root-top.com/topsite/melu/in.php?ID=4576"><img src="https://i.servimg.com/u/f62/20/06/11/86/logoto13.png" class="img_topsite" /></a>
</div>

</div>

<div class="pa_colonne_droite">

<h5>
Nos scénariis
</h5>

<div class="bloc_predefinis">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="predefinis_img" />
<div class="predefinis_contenu">

<h3>
Nom Prénom
</h3>
<a href="#">Libre</a>
</div>

</div>

<div class="bloc_predefinis">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="predefinis_img" />
<div class="predefinis_contenu">

<h3>
Nom Prénom
</h3>
<a href="#">Réservé</a>
</div>

</div>

<div class="bloc_predefinis">
<img class="predefinis_img" alt="" src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" />
<div class="predefinis_contenu">

<h3>
Nom Prénom
</h3>
<a href="#">Libre</a>
</div>

</div>

<div class="bloc_predefinis">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="predefinis_img" />
<div class="predefinis_contenu">

<h3>
Nom Prénom
</h3>
<a href="#">Libre</a>
</div>

</div>

<div class="bloc_predefinis">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="predefinis_img" />
<div class="predefinis_contenu">

<h3>
Nom Prénom
</h3>
<a href="#">Libre</a>
</div>

</div>

<div class="bloc_predefinis">
<img src="https://66.media.tumblr.com/1cd8cf380907dbbc778ec6f9b49b4159/tumblr_inline_pkcz6g9Gzg1rmgnb5_540.gif" alt="" class="predefinis_img" />
<div class="predefinis_contenu">

<h3>
Nom Prénom
</h3>
<a href="#">Libre</a>
</div>

</div>
<br />Envie d'incarner un loup, un chasseur, un simple habitant ?<br /><a href="http://bestiality.forumactif.com/f16-choose-his-her-crush" style="color: #000000;">Ramène donc ta petite pomme ici !</a>
<h5>
Nos amis
</h5>

<div class="pa_partenaires_contenu">
<a target="_blank" href="http://bestiality.forumactif.com/"><img src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" class="Bestiality" /></a> <a href="http://bestiality.forumactif.com/" target="_blank"><img class="Bestiality" src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" /></a> <a href="http://bestiality.forumactif.com/" target="_blank"><img class="Bestiality" src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" /></a> <a href="http://bestiality.forumactif.com/" target="_blank"><img class="Bestiality" src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" /></a> <a href="http://bestiality.forumactif.com/" target="_blank"><img class="Bestiality" src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" /></a> <a href="http://bestiality.forumactif.com/" target="_blank"><img class="Bestiality" src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" /></a> <a target="_blank" href="http://bestiality.forumactif.com/"><img src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" class="Bestiality" /></a> <a target="_blank" href="http://bestiality.forumactif.com/"><img src="https://i.servimg.com/u/f62/20/06/11/86/logopa10.jpg" class="Bestiality" /></a>
</div>
<br /><a href="http://bestiality.forumactif.com/f14-o-ask-to-become-a-star-guest" style="color: #000000;">Envie de devenir notre ami ?</a>
</div>
</div>

CODE CSS :

Code:: /******************Page d'accueil****************/
.page_accueil {
background: url('https://i.servimg.com/u/f62/20/06/11/86/minilo10.jpg');
border-radius: 22px 22px 22px 22px;
padding: 2% 3%;
width: 800px;
height: 455px;
font-family: 'Macondo Swash Caps', cursive;
color: #000000;
font-size: 12px;
}
.pa_colonne_gauche, .pa_colonne_milieu, .pa_colonne_droite {
float: left;
}

.pa_colonne_gauche {
width: 230px;
margin: 0 2%;
}
.pa_colonne_milieu {
width: 300px;
margin: 0 2%;
}
.pa_colonne_droite {
width: 200px;
margin: none;
}
/* TITRES */
.page_accueil h2 {
text-align: center;
font-size: 24px;
font-family: 'Macondo Swash Caps', cursive;
text-transform: uppercase;
color: #000000;
letter-spacing: 5px;
margin: 0 0 2%;
}
.page_accueil h5 {
text-align: center;
font-size: 14px;
font-family: 'Macondo Swash Caps', cursive;
text-transform: uppercase;
color: #000000;
letter-spacing: 5px;
margin: 0 0 2%;
}
/* LIENS UTILES */
.pa_liens {
margin: 10% 0;
}

.pa_liens a {
display: block;
background: #000000;
color: #ffffff;
text-transform: uppercase;
margin: 3% 0;
padding: 2% 0;
transition: .5s all;
}

.pa_liens a:hover {
background: grey;
}

/****CONTEXTE*****/
.bloc_contexte {
width: 250px;
height: 120px;
overflow: auto;
background: grey;
color: #ffffff;
font-size: 12px;
padding: 10px;
text-align: justify;
font-family: cursive;
border: 2px solid #000000;
}

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

img.staff_img {
width: 120px;
height: 62px;
transition: .5s all;
}

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

.staff_contenu {
background: grey;
width: 120px;
height: 62px;
box-sizing: border-box;
}

/* Pseudo */
.staff_contenu h3 {
margin: 0;
font-family: 'Macondo Swash Caps', cursive;
font-size: 18px;
font-weight: normal;
padding: 3% 0 0;
}

/* Rang */
.staff_contenu h4 {
color: #ffffff;
font-family: 'Macondo Swash Caps', cursive;
font-style: italic;
letter-spacing: 2px;
text-transform: none;
font-size: 14px;
margin: 0;
}

/*******MEMBRES DU MOIS********/
.bloc_membres {
width: 100px;
height: 62px;
overflow: hidden;
display: inline-block;
margin: 1%;
}

img.membres_img {
width: 100px;
height: 62px;
transition: .5s all;
}

.bloc_membres:hover .membres_img {
margin-top: -62px;
transition: .5s all;
}

.membres_contenu {
background: grey;
width: 100px;
height: 62px;
box-sizing: border-box;
font-size: 14px;
}

/* Pseudo */
.membres_contenu h3 {
margin: 0;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
padding: 3% 0 0;
}

/*TOP SITE*/
.topsite_pa {
width: 200px;
height: 50px;
}
.img_topsite {
width: 40px;
height: 40px;
}
/*Partenaires*/
.pa_partenaires_contenu {
width: 180px;
height: 140px;
overflow: auto;
}
/*******scénarios********/
.bloc_predefinis {
width: 50px;
height: 50px;
overflow: hidden;
display: inline-block;
margin: 1%;
}

img.predefinis_img {
width: 50px;
height: 50px;
transition: .5s all;
}

.bloc_predefinis:hover .predefinis_img {
margin-top: -50px;
transition: .5s all;
}

.predefinis_contenu {
background: grey;
width: 50px;
height: 50px;
box-sizing: border-box;
}

/* Pseudo */
.predefinis_contenu h3 {
margin: 0;
font-family: 'Lobster', sans-serif;
font-size: 11px;
font-weight: normal;
padding: 3% 0 0;
}
/******************Fin Page d'accueil**************/