Show me the meaning of being lonely
Voici une page d'accueil avec transition pour le staff.
Je précise que l'arrière plan gris correspond à mon forum.
Et le code :
HTML :
- Code:
<div class="PA_fond"><div class="PA_titre02">Show me the meaning of being lonely ~</div><div class="PA_titre01">Contexte</div><div class="PA_contexte">Texte ici
</div><div class="PA_titre01">Staff</div><div class="PA_staff"><div class="PA_staff02"><div class="PA_staff03">Pseudo - Rang - Fonction</div><img src="LIEN DE L'IMAGE" /></div>
</div><div class="PA01"></div>
<br />
<div class="PA_titre01">What else ?</div><div class="PA_liens">Règlement<br />Contexte<br />Autres liens ~
</div><div class="PA_titre01">News</div><div class="PA_news">00/00/00 : Cras volutpat at elit non aliquam.<br />
</div><div class="PA01"></div>
<div class="PA_titre01">Prédéfinis</div><div class="PA_predef"><img src="LIEN DE L'IMAGE" />
</div>
<a href="http://www.never-utopia.com" id="PA_alice">A-Lice | Never-Utopia</a>
</div>
CSS :
- Code:
.PA01 {
clear: both;
}
.PA_fond {
width: 680px;
height: 390px;
padding: 10px;
border-radius: 50px;
border: solid 2px #b07865;
margin: auto;
background: #f6d7cd;
color: #5B214F;
font-size: 12px;
}
.PA_titre01 {
text-indent: 70px;
font-size: 20px;
font-weight: bold;
color: #b73d44;
margin-top: -10px;
}
.PA_contexte {
float: left;
width: 270px;
height: 150px;
overflow: auto;
background: #b07865;
text-align: justify;
padding: 5px;
border-radius: 20px;
margin-right: 20px;
}
.PA_titre02 {
text-align: right;
font-size: 35px;
color: #d4457d;
text-shadow: 1px 1px 0px #b07865;
margin-top: -25px;
margin-left: 270px;
width: 400px;
}
.PA_staff {
width: 350px;
height: 140px;
background: #b07865;
text-align: justify;
padding: 5px;
float: right;
overflow: auto;
}
div.PA_staff02 {
width: 100px;
height: 70px;
overflow: hidden;
display: inline-block;
}
.PA_staff02 img {
width: 100px;
height: 70px;
position: relative;
bottom: 50px;
transition: 2s;
}
.PA_staff02:hover img {
bottom: 140px;
transition: 2s;
}
.PA_staff03 {
padding: 5px;
text-align: center;
}
.PA_liens {
float: left;
width: 270px;
height: 80px;
background: #b07865;
text-align: center;
padding: 5px;
}
.PA_news {
float: right;
width: 350px;
height: 100px;
background: #b07865;
text-align: justify;
padding: 5px;
border-radius: 20px;
}
.PA_predef {
width: 650px;
height: 50px;
padding: 5px;
margin: auto;
overflow: hidden;
}
#PA_alice {
text-decoration: none;
color: white;
font-size: 11px;
text-align: center;
display: block;
}
Remarque : Pour une utilisation optimale, la taille des images pour le staff est de 100px par 70px, pour les prédéfinis elle est de 50px par 50px.
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
