HTML
<body>
<link href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=UnifrakturMaguntia&display=swap" rel="stylesheet">
<div id="PAcontour">
<!-- Message d'entête -->
<h1> Bienvenue ! </h1>
<div id="PAflex">
<div id="PAgauche">
<!-- Zone staff -->
<h2>Votre staff</h2>
<div id="PAstaff">
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span>Admin</span>
<span><a href="/" target="_blank">Profil</a> • <a href="/" target="_blank">MP</a></span>
</div>
</div>
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span>Admin</span>
<span><a href="/" target="_blank">Profil</a> • <a href="/" target="_blank">MP</a></span>
</div>
</div>
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span>Admin</span>
<span><a href="/" target="_blank">Profil</a> • <a href="/" target="_blank">MP</a></span>
<span>Autre(s) compte(s) :</span>
<span>Compte 1</span>
<span>Compte 2</span>
</div>
</div>
</div>
<!-- Zone actualités -->
<h2>Nos Actualités</h2>
<div id="PAdates">
<p>
<span>•</span> xx/xx/xx : Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nihil
voluptatem ea quos provident nulla ratione, mollitia laboriosam distinctio, animi, adipisci
laudantium! Ex harum fugiat atque est deserunt, similique expedita!
<br /><br />
<span>•</span> xx/xx/xx : Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nihil
voluptatem ea quos provident nulla ratione, mollitia laboriosam distinctio, animi, adipisci
laudantium! Ex harum fugiat atque est deserunt, similique expedita!
<br /><br />
<span>•</span> xx/xx/xx : Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nihil
voluptatem ea quos provident nulla ratione, mollitia laboriosam distinctio, animi, adipisci
laudantium! Ex harum fugiat atque est deserunt, similique expedita!
<br /><br />
<span>•</span> xx/xx/xx : Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nihil
voluptatem ea quos provident nulla ratione, mollitia laboriosam distinctio, animi, adipisci
laudantium! Ex harum fugiat atque est deserunt, similique expedita!
</p>
</div>
</div>
<div id="PAcentre">
<!-- Titre contexte -->
<h3>Once upon a time...</h3>
<div id="PAcontexte">
<p>
<!-- Contexte -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, hic saepe commodi est facilis
minima totam cumque corrupti reprehenderit non eligendi, dolorum natus vel assumenda. Iusto
maxime reiciendis provident inventore?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ullam vero exercitationem natus a velit nesciunt ab perferendis vitae quo nostrum ut labore qui
eligendi dolorum, molestiae fugit nam obcaecati quidem?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Itaque, rerum! Molestiae soluta quae quam officiis illum dicta autem
reiciendis totam, magnam amet ipsum, corrupti sequi, iure pariatur beatae earum vitae. <a
href="/" target="_blank">La suite</a>
</p>
</div>
<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.15752-9/67838352_2375677829371247_3098599336745893888_n.jpg?_nc_cat=105&_nc_oc=AQkYQSPhWRL27lmpJbhBr9EXXIKEjkx8_cPfI9CfLYHK0kjtuiaTorYx5HS_gr74ARw&_nc_ht=scontent-cdg2-1.xx&oh=f49104bf2cd85e6cd0fbd1f01f3344b1&oe=5DD3474A"
alt="">
<!-- Titre intrigue -->
<h3>How about now?</h3>
<div id="PAevent">
<p>
<!-- Intrigue -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, hic saepe commodi est facilis
minima totam cumque corrupti reprehenderit non eligendi, dolorum natus vel assumenda. Iusto
maxime reiciendis provident inventore?Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ullam vero exercitationem natus a velit nesciunt ab perferendis vitae quo nostrum ut labore qui
eligendi dolorum, molestiae fugit nam obcaecati quidem?Lorem ipsum dolor sit amet consectetur
adipisicing elit. Itaque, rerum! Molestiae soluta quae quam officiis illum dicta autem
reiciendis totam, magnam amet ipsum, corrupti sequi, iure pariatur beatae earum vitae. <a
href="/" target="_blank">La suite</a>
</p>
</div>
</div>
<div id="PAdroite">
<!-- Prédéfinis -->
<h2>On attend</h2>
<div id="PAscenar">
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span><a href="/" target="_blank">•••</a></span>
</div>
</div>
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span><a href="/" target="_blank">•••</a></span>
</div>
</div>
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span><a href="/" target="_blank">•••</a></span>
</div>
</div>
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span><a href="/" target="_blank">•••</a></span>
</div>
</div>
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span><a href="/" target="_blank">•••</a></span>
</div>
</div>
<div class="PAsurvol">
<img src="http://placehold.it/100x100/" alt="">
<div>
<span>Prénom Nom</span>
<span><a href="/" target="_blank">•••</a></span>
</div>
</div>
</div>
<h2>Top Sites</h2>
<div id="PAtopsites">
<!-- Top-sites -->
<a href="/" target="_blank"><img src="http://placehold.it/45x45/" alt=""></a>
<a href="/" target="_blank"><img src="http://placehold.it/45x45/" alt=""></a>
<a href="/" target="_blank"><img src="http://placehold.it/45x45/" alt=""></a>
<a href="/" target="_blank"><img src="http://placehold.it/45x45/" alt=""></a>
</div>
<a href="/">Et viens nous le dire !</a>
</div>
</div>
</div>
</body>
CSS
/************************ PA PAR SIEBEN ************************/
/* Contour global */
#PAcontour {
width: 800px; /* Largeur du forum */
color: darkgrey;
font-family: Verdana;
font-size: 11px;
line-height: 14px;
padding: 5px;
text-align: justify;
text-shadow: 0 0 4px #000;
}
/* Titres */
#PAcontour h1, #PAcontour h2, #PAcontour h3 {
text-align: center;
color: #F0F0F0; /* Couleur des titres */
font-family: UnifrakturMaguntia, cursive; /* Typo */
font-size: 30px; /* Taille */
text-shadow: 0 0 4px #FFF;
}
#PAcontour h1:hover, #PAcontour h2:hover, #PAcontour h3:hover {
color: #6E0F0E; /* Couleur au survol */
}
#PAcontour h1, #PAcontour h2 {
/* Image de fond des titres*/
background-image: url("https://media.discordapp.net/attachments/401674750730043395/601801900437930029/down.jpg");
height: 16px;
}
#PAcontour h1:hover, #PAcontour h2:hover { /* Couleur des bordures au survol */
border-left: 2px #6E0F0E solid;
border-right: 2px #6E0F0E solid;
}
#PAcontour h1 {
font-size: 45px;
}
#PAcontour h3 {
margin: 0;
font-size: 24px;
}
/* Contour des blocs */
#PAflex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#PAgauche, #PAcentre, #PAdroite {
display: flex;
flex-direction: column;
justify-content: space-around;
}
#PAgauche, #PAdroite {
width: 27%;
}
/* Bloc gauche */
#PAgauche {
width: 27%;
}
/* Bloc staff */
#PAstaff {
display: flex;
flex-flow: wrap;
justify-content: space-evenly;
height: 150px;
align-content: space-around;
}
.PAsurvol {
position: relative;
}
.PAsurvol div {
display: none;
position: absolute;
z-index: 1;
width: max-content;
bottom: -35px;
right: -35px;
}
/* Infobulles admins & prédéfs */
.PAsurvol div span {
display: block;
text-align: center;
color: #f0f0f0; /* Couleur du texte */
background: #1B1B1F; /* Couleur du fond */
font-size: 10px; /* Taille du texte */
font-style: italic;
padding: 4px 10px;
}
.PAsurvol div span:first-child, .PAsurvol div span:nth-child(4) {
font-family: 'Great Vibes', cursive;
font-size: 17px;
color: #fff;
}
.PAsurvol div span:nth-child(3) {
color: #3A3F32;
font-size: 14px;
}
.PAsurvol div span:nth-child(4) {
margin-top: 3px;
}
.PAsurvol div span a {
color: #f0f0f0; /* Couleur des liens */
font-size: 10px;
}
.PAsurvol img {
width: 70px;
border-radius: 100px;
}
.PAsurvol:hover div {
display: initial;
}
/* Bloc dates */
#PAdates p {
overflow: hidden;
max-height: 126px;
margin: 10px;
}
#PAdates p:hover {
overflow: auto;
}
#PAdates p span {
color: #3A3F32; /* Couleur des news */
font-size: 14px;
}
/* Bloc central */
#PAcentre {
width: 44%;
}
/* Bloc contexte & events */
#PAcontexte, #PAevent {
overflow: hidden;
max-height: 120px;
padding: 0px 10px;
}
#PAcontexte:hover, #PAevent:hover {
overflow: auto;
}
#PAcontexte p, #PAevent p {
margin: 0;
}
/* Image centrale */
#PAcentre img {
padding: 0px 10px;
height: 70px;
transition: all 0.8s;
opacity: 0.6;
}
#PAcentre img:hover {
transform: scale(1.06);
filter: blur(1.1px) brightness(80%);
max-width: 94%;
}
/* Bloc scénars*/
#PAscenar {
display: flex;
flex-flow: wrap;
justify-content: space-evenly;
height: 150px;
align-content: space-between;
}
#PAscenar img {
border-radius: 100px;
width: 66px;
}
/* Bloc top sites */
#PAtopsites {
display: flex;
justify-content: space-around;
}
#PAtopsites img {
width: 45px;
}
#PAdroite a {
text-align: center;
}
/************************ FIN PA ************************/
Commentaires
Personne n'a commenté ce code pour le moment.
Vous devez être inscrit et connecté pour pouvoir poster un commentaire.
• 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 fond correspond à celui du forum sur lequel elle est installée. (Ici, les effets d'ombre sur fond blanc c'pas très heureux j'en conviens.)
- Au passage de la souris sur l'image des admins, une infobulle s'affiche.