N°4 PA simple en hover et bords arrondis

PA à bords arrondis

Cette jolie page d'accueil au design arrondi plaira sûrement à beaucoup d'entre-vous. Toutes les informations apparaissent au survol des images à l'aide de votre souris. N'hésitez pas à cliquer sur les images en miniatures pour les agrandir et voir l'aperçu de cette page d'accueil organisé sur quatre niveaux.

Laxy.

codage by Laxy Dunbar

VISUEL DE LA PA :

N°4 PA simple en hover et bords arrondis Codage10

N°4 PA simple en hover et bords arrondis Codage11

CODE HTML :

Code:: <div class="fond_PA">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montez" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Mouse+Memoirs" />
<div class="titre">
Bienvenu {USERNAME} à Berlin !
</div><br />
<table>

<tbody>

<tr>

<td>

<div class="sous_titre_PA">
Contexte
</div>

<div class="cadre-contexte">

<div class="lettrine">
I
</div>
ci le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte.<br /> <a style="color: #68B8B6;" href="URL ICI">Lire la suite !</a>
</div>

</td>

<td>

<div class="sous_titre_PA">
Le staff
</div>

<div class="cadre-staff">

<center>

<div class="staff">
<span>Libre<br /><a target="_blank" href="URL ICI">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />
</div>

<div class="staff">
<span>Libre<br /><a target="_blank" href="#">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />
</div>

<div class="staff">
<span>Libre<br /><a target="_blank" href="#">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />
</div>

</center>
<br />
<center>

<div class="staff">
<span>Libre<br /><a href="#" target="_blank">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />
</div>

<div class="staff">
<span>Libre<br /><a href="#" target="_blank">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />
</div>

<div class="staff">
<span>Libre<br /><a href="#" target="_blank">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />
</div>

</center>

</div>

</td>

</tr>

</tbody>

</table>

<table>

<tbody>

<tr>

<td>

<div class="sous_titre_PA">
Nos top-partenaires
</div>

<div class="cadre-partenaire">
<a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a>
</div>

</td>

</tr>

</tbody>

</table>

<table>

<tbody>

<tr>

<td>

<div class="sous_titre_PA">
Les petits plus
</div>

<div class="cadre-points">
<a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a><a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a><br /><a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a><a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a>
</div>

</td>

<td>

<div class="sous_titre_PA">
Les Nouveautés
</div>

<div class="cadre-news">
<a style="color: #68B8B6;">00/00/00 </a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 </a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 </a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 </a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 </a> Aucune nouvelle
</div>

</td>

<td>

<div class="sous_titre_PA">
Prédéfénis
</div>

<div class="cadre-predef">
<a target="_blank" href="URL ICI"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="URL ICI"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="URL ICI"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><br /><a target="_blank" href="#"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="#"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="#"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a>
</div>

</td>

</tr>

</tbody>

</table>

<table>

<tbody>

<tr>

<td>

<div class="sous_titre_PA">
Navigation rapide
</div>

<div class="cadre-liens-rapides">
Welcome to Berlin {USERNAME}, n'hésite pas à prendre connaissance de l'<a style="color: #68B8B6;" href="URL ICI">histoire</a> de Stay With Me ainsi que de son <a style="color: #68B8B6;" href="URL ICI">règlement</a>. Les <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f6-les-annexes">annexes</a> te seront également d'une aide précieuse; avant toute inscription tu pourras vérifier le <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f12-les-bottins">bottin</a> ainsi que les <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f13-les-predefinis-post-vacants">prédéfinis & PVs</a>. Quand à nos invités et partenaires, ils trouveront leur bonheur dans le <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f16-le-livre-d-or">livre d'or</a>. ENJOY !
</div>

</td>

</tr>

</tbody>

</table>

<div style="font-size:8px; letter-spacing:3px; text-align:center; color : #000000">
codage par <a href="http://lecerclesecret.forumactif.org/" class="postlink" target="_blank" rel="nofollow">Laxy</a>
</div><br /><br />
</div>

CODE CSS :

Code:: /*PA BY LAXY*/
.fond_PA {
width: 600px;
background-color: #68B8B6;
border-radius: 20%;
}
.titre {
font-family: 'Montez', cursive;
font-size: 50px;
text-align: center !important;
position: relative;
top: 0.6em;
color: #FAF3DF;
}
.sous_titre_PA {
position: relative;
top: 0,5em;
z-index: 1;
font-family: 'Montez', cursive;
font-size: 25px;
color: #FAF3DF;
text-shadow: 1px 1px 2px white;
text-align: center;
}
.cadre-contexte {
width: 250px; height: 160px;
background-color: #FAF3DF;
border-radius: 5px;
border : 1px solid #68B8B6;
padding: 5px;
text-align: justify;
font-size: 13px;
overflow: auto;
}
.lettrine:first-letter {
font-size: 300%;
float: left;
font-family: 'Montez', cursive;
color: #000000;
}
.cadre-staff {
width: 250px; height: 160px;
background-color: #FAF3DF;
border-radius: 5px;
border : 1px solid #68B8B6;
padding: 5px;
}
.staff {
display: inline-block;
margin: auto;
width: 65px; height: 65px;
border-radius: 20px 20px;
overflow: hidden;
}
.staff span {
display: block;
width: 65px; height: 30px;
background-color: #68B8B6;
padding: 5px;
text-align: center;
font-size: 13px;
}
.staff img {
width: 65px; height: 65px;
margin-top: -40px;
transition: all 1s ease-in;
}
.staff:hover img {
margin-top: 0px;
transition: all 1s ease-out;
}
.cadre-partenaire {
float : center;
width: 520px; height: 35px;
background-color: #FAF3DF;
border-radius: 5px;
border : 1px solid #68B8B6;
padding: 5px;
}
.cadre-points {
margin-top: 10px;
width: 150px; height: 100px;
background-color: #FAF3DF;
border-radius: 5px;
border : 1px solid #68B8B6;
padding: 5px;
text-align: center;
}
.cadre-points img {
width: 45px; height: 45px;
transition: all 0.5s ease-in;
border-radius: 50px 50px;
margin: 1px;
}
.cadre-points img:hover {
border-radius: 5px;
}
.cadre-news {
float: right;
margin-left: 5px;
width: 180px; height: 105px;
background-color: #FAF3DF;
border-radius: 5px;
border : 1px solid #68B8B6;
padding: 2px;
text-align: left;
font-size: 13px;
overflow: auto;
}
.cadre-predef {
margin-top: 10px;
width: 150px; height: 100px;
background-color: #FAF3DF;
border-radius: 5px;
border : 1px solid #68B8B6;
padding: 5px;
text-align: center;
}
.cadre-predef img {
width: 40px; height: 40px;
transition: all 0.5s ease-in;
border-radius: 50px 50px;
margin: 1px;
}
.cadre-predef img:hover {
border-radius: 5px;
}
.cadre-liens-rapides {
float : center;
width: 520px; height: auto;
background-color: #FAF3DF;
border-radius: 5px;
border : 1px solid #68B8B6;
padding: 5px;
text-align : justify;
font-size : 10px;
}
/*FIN PA BY LAXY*/