Rappel du premier message :
Voici une page d'accueil avec transition pour le staff.
Je précise que l'arrière plan gris correspond à mon forum.
HTML & CSS ~ Voici donc un aperçu : www & au passage de la souris ~ Invision
Et le code :
HTML :
CSS :
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.
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.
