P.A Survival Wonderland #2

Admin Messages : 23 Date d'inscription : 11/03/2013 Age : 24

HTML :

Code:: <div id="fond_pa">
<div class="contour_pa">
<h1>Bienvenue, {USERNAME}</h1>
<div id="bienvenue_pa">
Je ne sais depuis combien de temps je suis arrivé dans cet endroit. Je ne me souviens que de l'entrée d'un parc d'attraction, pas si loin de ma ville, puis après, plus rien si ce n'est la peur et la fuite. On me traque... Des choses, des monstres, des êtres tirés un autre monde fantasmés par des écrivains de science fiction ne cessent de me tomber dessus. Zombie, Loup-Garou, Spectre, et j'en passe. Tout ici semble irréel.
Je n'ai rencontré nul autre humain ici, si ce n'est des êtres à demi-fou, hurlant au diable ou attaquant tout ce qui passe peut être dans un dernier réflexe de survie. Et s'ils n'étaient pas fous, ils sombraient lentement vers la mort... sans rien ni personne pour les aider. Même moi je ne peux rien pour un corps se vidant de son sang après l'attaque d'un de ces monstres.
Ici je ne puis rien faire d'autre que m'enfuir, me battre et espérer. Oui, je ne peux rien faire... Je suis pris au piège.
<br /><br /><div align="right"><span style="font-size: 9px; line-height: 10px">Contexte crée par Reby McGarden et Ikazuchi no Fusanoshin.
Contexte écrit par Éphémère sur S.o.S</span>
<img src="http://i.imgur.com/vBreO.png" border="0" alt="" /></div>
</div>
<h1>Staff</h1>
<div id="staff_pa">
<div class="infobulles">
<img src="http://i82.servimg.com/u/f82/15/66/39/88/alypa10.png" alt="pseudo" />
<div>Aly<br />
Fonda'<br />
<a href="http://survival-wonderland.votreforumgratuit.com/u1">Profil</a> <a href="http://survival-wonderland.votreforumgratuit.com/privmsg?mode=post&u=1">MP</a>
</div>
</div>
<div class="infobulles">
<img src="http://i82.servimg.com/u/f82/15/66/39/88/bolpa10.png" alt="pseudo" />
<div>Bol<br />
Co-Fonda'<br />
<a href="http://survival-wonderland.votreforumgratuit.com/u2">Profil</a> <a href="http://survival-wonderland.votreforumgratuit.com/privmsg?mode=post&u=2">MP</a>
</div>
</div>
<div class="infobulles">
<img src="http://i82.servimg.com/u/f82/15/66/39/88/ryupa10.png" alt="pseudo" />
<div>Pot / Ryu<br />
Admin'<br />
<a href="http://survival-wonderland.votreforumgratuit.com/u3">Profil</a> <a href="http://survival-wonderland.votreforumgratuit.com/privmsg?mode=post&u=3">MP</a>
</div>
</div>
<div class="infobulles">
<img src="http://i82.servimg.com/u/f82/15/66/39/88/sidpa10.png" alt="pseudo" />
<div>Sid<br />
Modo'<br />
<a href="http://survival-wonderland.votreforumgratuit.com/u7">Profil</a> <a href="http://survival-wonderland.votreforumgratuit.com/privmsg?mode=post&u=7">MP</a>
</div>
</div>
<div class="infobulles">
<img src="http://i82.servimg.com/u/f82/15/66/39/88/ayatop10.png" alt="pseudo" />
<div>Ayato<br />
Modo'<br />
<a href="http://survival-wonderland.votreforumgratuit.com/u17">Profil</a> <a href="http://survival-wonderland.votreforumgratuit.com/privmsg?mode=post&u=17">MP</a>
</div>
</div>
<div class="infobulles">
<img src="http://image.noelshack.com/fichiers/2012/23/1338860376-infobulle3.png" alt="pseudo" />
<div>Pseudo<br />
Rang<br />
<a href="#">Profil</a> <a href="#">MP</a>
</div>
</div>
<div class="infobulles">
<img src="http://image.noelshack.com/fichiers/2012/23/1338860377-infobulle4.png" alt="pseudo" />
<div>Pseudo<br />
Rang<br />
<a href="#">Profil</a> <a href="#">MP</a>
</div>
</div>
<div class="infobulles">
<img src="http://image.noelshack.com/fichiers/2012/23/1338861199-infobulle5.png" alt="pseudo" />
<div>Pseudo<br />
Rang<br />
<a href="#">Profil</a> <a href="#">MP</a>
</div>
</div>
</div>
</div>
<div class="contour_pa">
<h1>News</h1>
<div id="news_pa">
♣ Nouvelle P.A <br />
♣ Nouvelle fiche de présentation <br />
♣ Bientôt un concours <br />
♣ Un event qui se prépare <br />
♣ Mise en page du forum un peu modifiée <br />
♣ New <br />
♣ New <br />
♣ New <br />
♣ New <br />
♣ New
</div>
<div class="contour_petites_cases">
<h1>Partenaires</h1>
<div id="partenaires_pa">
<a href="http://pensionnat-tsuruko.roleplaylife.net/"><img src="http://img11.hostingpics.net/pics/831186Bouton.jpg" alt="Pensionnat Tsuruko" class="transparence_logo" /></a>
<a href="http://www.duralas.com/"><img src="http://i42.servimg.com/u/f42/16/22/51/11/01_bmp10.jpg" alt="Duralas" class="transparence_logo" /></a>
<a href="#"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom du forum" class="transparence_logo" /></a>
<a href="#"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom du forum" class="transparence_logo" /></a>
<a href="#"><img src="http://image.noelshack.com/fichiers/2012/23/1338821105-Logo.png" alt="Nom du forum" class="transparence_logo" /></a>
</div>
</div>
<div class="contour_petites_cases">
<h1>Crédits</h1>
<div id="credits_pa">
Page d'Accueil par -Yuffie-Kisaragi- sur <a href="templactif.forumgratuit.org">Templactif</a>. <br />
Contexte par Reby McGarden & Ikazuchi no Fusanoshin <br />
Règlement par Ikazuchi no Fusanoshin <br />
Design par Zep' de <a href="http://www.the-smp.com/">School Magic Pets</a>
</div>
</div>
</div>
<div class="contour_pa">
<h1>Liens Utiles</h1>
<div id="liens_pa">
<a href="http://survival-wonderland.votreforumgratuit.com/t117-le-contexte">Contexte</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/t120-le-reglement-in-rp">Règlement RPG</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/t119-le-reglement-hors-rp">Règlement hors-RPG</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/t118-le-staff">Staff</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/f4-presentations">Présentations</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/f3-panneau-d-affichage">Panneau d'Affichage</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/f56-publicite">Publicité</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/f47-partenariat">Partenariat</a><br />
<a href="http://survival-wonderland.votreforumgratuit.com/f14-boite-a-lettres">Boîte à Lettres</a>
</div>
</div>
</div>

CSS :

Code:: /*PAGE D'ACCUEIL*/

#fond_pa {
margin : auto;
width : 750px;
height : 360px;
padding : 15px;
background : #676166;
border-width : 1px 4px 1px 4px;
border-color : #808080;
border-style : solid;
}

#fond_pa h1 {
text-align : center;
margin : 0 auto;
font-size : 20px;
color : #555555;
text-shadow : 1px 1px 0 rgba(255,255,255,0.7);
text-transform : uppercase;
font-family : Calibri;
}

.contour_pa {
display : inline-block;
vertical-align : top;
}

#bienvenue_pa, #news_pa {
width : 298px;
height : 142px;
padding : 5px;
border-bottom : 2px dotted black;
border-top : 2px dotted black;
overflow : auto;
text-align : justify;
color: black;
}

#staff_pa {
width : 298px;
height : 142px;
padding : 5px;
border-bottom : 2px dotted black;
border-top : 2px dotted black;
overflow : hidden;
}

div.infobulles{
opacity : 0.5;
-moz-transition : 2s;
-webkit-transition : 2s;
-o-transition : 2s;
transition : 2s;
position : relative;
display : inline-block;
}

div.infobulles img {
width : 70px;
}

div.infobulles:hover{
opacity : 1
}

div.infobulles div {
position : absolute;
display : none;
}

div.infobulles:hover div {
display : inline-block;
left : 0;
top : 0;
width : 58px;
height : 58px;
border : 1px solid #000;
background : rgba(255,255,255,0.7);
color : black;
text-align : left;
padding : 5px;
line-height : 15px;
}

.contour_petites_cases {
display : inline-block;
vertical-align : top;
}

#partenaires_pa, #credits_pa {
width : 142px;
height : 142px;
padding : 5px;
border-top : 2px dotted black;
border-bottom : 2px dotted black;
overflow : auto;
text-align : justify;
color: black;
}

#credits_pa a {
text-decoration : none;
color : gray;
text-shadow : 1px 1px 0 rgba(255,255,255,0.3);
-moz-transition : 0.5s;
-webkit-transition : 0.5s;
-o-transition : 0.5s;
transition : 0.5s;
}

#credits_pa a:hover {
color : white;
text-shadow : 1px 1px 0 rgba(0,0,0,0.3);
}

.transparence_logo {
opacity : 0.5;
-moz-transition : 2s;
-webkit-transition : 2s;
-o-transition : 2s;
transition : 2s;
}

.transparence_logo:hover {
opacity : 1;
}

#liens_pa {
width : 116px;
padding : 5px;
}

#liens_pa a {
display : block;
border-top : 2px dotted black;
border-bottom : 2px dotted black;
text-align : center;
text-decoration : none;
color : grey;
text-shadow : 1px 1px 0 rgba(255,255,255,0.3);
-moz-transition : 0.5s;
-webkit-transition : 0.5s;
-o-transition : 0.5s;
transition : 0.5s;
margin-bottom : -3.5px;
}

#liens_pa a:hover {
border-top : 2px dotted white;
border-bottom : 2px dotted white;
color : white;
text-shadow : 1px 1px 0 rgba(0,0,0,0.3);
}

#liens_pa a:hover:before, #liens_pa a:hover:after {
content : " ♦ "
}

img {
border : none
}

» P.A Survival Wonderland #1