Nous rouvrons le forum pour que vous puissiez continuer à
en profiter. Néanmoins, la réorganisation n'a pas encore été faite.
Merci de votre compréhension et de votre patience ! I love you
Le Deal du moment : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

Poster un nouveau sujetRépondre au sujet

N°3 PA simple et organisé sur 2 niveaux

Sujet: N°3 PA simple et organisé sur 2 niveaux   Dim 11 Aoû - 15:29
Laxy Dunbar
I fell in a hole
Laxy Dunbar
N°3 PA simple et organisé sur 2 niveaux Ed85010ee7245027974fb6ab7a5149b5ed5641c8
Créations : 1121
Mon avatar est : Tyler Lawrence Grey
Crédit de l'avatar : ©LaxyDunbar
Préférence : créer tout un tas de nouveaux avatars
Est arrivé(e) le : 25/11/2015
N°3 PA simple et organisé sur 2 niveaux 15477ed8f84abe98564c79316c9e7d7bdb01d4af

Préférences RPG
Thème préféré: Surnaturel
Personnage(s) joué(s):

PA sur 2 niveaux

Vous désirez une PA sans prise de tête, simple à gérer et d'une simplicité à trouver des éléments ? Cette page d'accueil organisé sur deux étages et en trois colonnes sera l'idéal pour vous. N'hésitez pas à cliquer sur l'image en miniature pour l'agrandir et voir son aperçu. Infos en hover, se cachant derrière les images, passez votre souris dessus pour y dévoiler des informations.

Laxy.

codage by Laxy Dunbar



Visuel de la PA :
N°3 PA simple et organisé sur 2 niveaux Pa1010

Code HTML :
Code:
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine" /><br />
<div style="text-align:center; line-height:4px; font-size:34px;">
              <span style="color:#000000;font-family:Tangerine;letter-spacing : 2px; text-shadow: 2px 0px 2px">Bienvenue sur piqûre de bonheur {USERNAME}</span><br /><br />
</div>
<center>
                                                      
 <table>
                                                      
 <tbody>
                                                      
 <tr>
                                                      
 <td>
                                                      
 <div class="titre">
                            Le staff                            
 </div>
                                                      
 <div class="cadre-staff">
                                                      
 <div class="staff">
                            <span>Aedan Ö.<br /><a href="http://stichinsgluck.forumactif.org/privmsg?mode=post&u=1" target="_blank">Contacter</a></span><img src="http://img.xooimage.com/files74/5/a/d/3032851768_1_5_x8ly71au-2d11730.gif" />                            
 </div>
                                                        
 <div class="staff2">
                            <span>Pseudo<br /><a href="#" target="_blank">Contacter</a></span><img src="http://24.media.tumblr.com/adffa93f301c07fa8ac0c2ef12cbecab/tumblr_mjfnuyGk051rsy904o9_r1_250.gif" />                            
 </div>
                                                      
 </div>
                                                      
 </td>
                                                      
 <td>
                                                      
 <div class="titre">
                            Vidéo                            
 </div>
                                                      
 <div class="cadre-video">
                            <iframe src="http://www.youtube.com/embed/PgImLkWLucM?autohide=0&theme=light&modestbranding=1&rel=0&wmode=transparent&autoplay=0" frameborder="no" style="width: 200px; height: 140px;"> </iframe>                            
 </div>
                                                      
 </td>
                                                      
 <td>
                                                      
 <div class="titre">
                            Les Liens utiles                            
 </div>
                                                      
 <div class="cadre-news">
                            † <a href="http://stichinsgluck.forumactif.org/t1-le-reglement">Charte</a><br /><br />† <a href="http://stichinsgluck.forumactif.org/t5-le-contexte">Contexte</a><br /><br />† <a href="http://stichinsgluck.forumactif.org/f17-devenir-partenaire">Partenariat</a><br /><br />† <a href="http://stichinsgluck.forumactif.org/f16-nos-partenaires">Nos amis</a>                            
 </div>
                                                      
 </td>
                                                      
 </tr>
                                                      
 <tr>
                                                      
 <td>
                                                      
 <div class="titre">
                            Prédéfénis                            
 </div>
                                                      
 <div class="cadre-predef">
                            <a href="http://stichinsgluck.forumactif.org/t24-stomy-olwe-feat-tom-kaulitz-prenom-modifiable#24" target="_blank"> <img src="http://s3.favim.com/orig/44/tom-kaulitz-Favim.com-370844.gif" /></a><a href="http://stichinsgluck.forumactif.org/t46-cassy-dringer-feat-kristen-stewart" target="_blank"> <img src="http://68.media.tumblr.com/tumblr_lzxb6tFbzk1r4kfic.gif" /></a><a href="http://stichinsgluck.forumactif.org/t47-aaron-castle-feat-josh-hutcherson-prenom-nom-modifiable" target="_blank"> <img src="http://68.media.tumblr.com/85d4c39f5cf1d6729f63975c6d0c84dc/tumblr_inline_n1wu29cobw1ro0zrp.gif" /></a><br /><a href="#" target="_blank"> <img src="http://24.media.tumblr.com/92aa3245f17c13b401f486f4e1a3e7c0/tumblr_mjfnuyGk051rsy904o1_250.gif" /></a><a href="#" target="_blank"> <img src="http://24.media.tumblr.com/92aa3245f17c13b401f486f4e1a3e7c0/tumblr_mjfnuyGk051rsy904o1_250.gif" /></a><a href="#" target="_blank"> <img src="http://24.media.tumblr.com/92aa3245f17c13b401f486f4e1a3e7c0/tumblr_mjfnuyGk051rsy904o1_250.gif" /></a>                            
 </div>
                                                      
 </td>
                                                      
 <td>
                                                      
 <div class="titre">
                            Le contexte                            
 </div>
                                                      
 <div class="cadre-contexte">
                            "Chers citoyens, chers parents suite aux récents événements et à un sondage qui fût mis en place auprès de la population, nous vous informons qu'une nouvelle loi a été mise en place et elle prend effet dans l'immédiat. Pour la réforme de l'éducation sont concernés tout enfant âgé entre douze et vingt-ans ans montrant un quelconque signe d'un trouble comportementale lié à la crise d'adolescence ou d'un signe de révolte, de désaccord envers l'autorité même de Dolls City. Seront donc punis et châtiés, tout enfant rentrant dans ces critères, par leurs propres parents, sinon l'autorité elle-même et y seront donc placé dans les différents centres mis à disposition dans toute la commune. Merci à vous chers habitants de Dolls City pour votre courage et votre participation à cette nouvelle réforme !" <a href="http://stichinsgluck.forumactif.org/t5-le-contexte" target="_blank">En lire plus !</a>                            
 </div>
                                                      
 </td>
                                                      
 <td>
                                                      
 <div class="titre">
                            Les Nouveautés                            
 </div>
                                                      
 <div class="cadre-news">
                               XX/XX/XX † Bientôt ouvert<br />XX/XX/XX † Première intrigue : <a href="http://stichinsgluck.forumactif.org/t48-la-moisson-premiere-intrigue">La moisson</a>.<br />XX/XX/XX † Aucune nouvelle                              
 </div>
                                                      
 </td>
                                                      
 </tr>
                                                      
 </tbody>
                                                      
 </table>
</center>

CODE CSS :
Code:
/*PA by Laxy*/
#PA table {
margin:0 auto;
padding-top:5px;
width:800px
}

#PA table td {
padding:5px 10px
}

.titre {
text-align: center;  
font-family:'Tangerine',cursive;
font-size:40px;
line-height:100%;
font-face:bold;
color:#000000;
background-color:none;  
text-shadow:2px 0 0 #FFFFFF
}
.cadre-staff {
  width: 200px; height: 135px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 5px;
}
.staff {
  display: inline-block;
  margin: auto;
  width: 96px; height: 130px;
  border-radius: 20px 20px;
  overflow: hidden;
}
.staff span {
  display: block;
  width: 90px; height: 30px;
  background-color: #1E200B;
  padding: 5px;
  text-align: center;
  font-size: 13px;
}
.staff img, .staff2 img {
  width: 96px; height: 130px;
  margin-top: -40px;
  transition: all 1s ease-in;
}
.staff:hover img, .staff2:hover img{
 margin-top: 0px;
 transition: all 1s ease-out;
}
.staff2 {
  display: inline-block;
  margin: auto;
  width: 96px; height: 130px;
  border-radius: 20px 20px;
  overflow: hidden;
}
.staff2 span {
  display: block;
  width: 90px; height: 30px;
  background-color: #1E200B;
  padding: 5px;
  text-align: center;
  font-size: 13px;
}
.cadre-video {
  width: 200px; height: 140px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 5px;
}
.cadre-news {
  float: right;
  margin-left: 5px;
  width: 200px; height: 135px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 2px;
  text-align: left;
  font-size: 13px;
  overflow: auto;
}
.cadre-contexte {
  width: 200px; height: 135px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 5px;
  text-align: justify;
  font-size: 13px;
  overflow: auto;
}
.cadre-predef {
  margin-top: 10px;
  width: 200px; height: 135px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 5px;
  text-align: center;
}
.cadre-predef img {
  width: 60px; height: 60px;
  transition: all 0.5s ease-in;
  border-radius: 50px 50px;
  margin: 1px;
}
.cadre-predef img:hover {
  border-radius: 5px;
}
.cadre-membre {
  width: 200px; height: 135px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 5px;
}
.membre {
  display: inline-block;
  margin: auto;
  width: 96px; height: 130px;
  border-radius: 20px 20px;
  overflow: hidden;
}
.membre span {
  display: block;
  width: 90px; height: 30px;
  background-color: 1E200B;
  padding: 5px;
  text-align: center;
  font-size: 13px;
}
.membre img, .membre2 img {
  width: 96px; height: 130px;
  margin-top: -40px;
  transition: all 1s ease-in;
}
.membre:hover img, .membre2:hover img{
 margin-top: 0px;
 transition: all 1s ease-out;
}
.membre2 {
  display: inline-block;
  margin: auto;
  width: 96px; height: 130px;
  border-radius: 20px 20px;
  overflow: hidden;
}
.membre2 span {
  display: block;
  width: 90px; height: 30px;
  background-color: #1E200B;
  padding: 5px;
  text-align: center;
  font-size: 13px;
}
.cadre-partenaire {
  float : center;
  width: 200px; height: 135px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 5px;
}
.cadre-partenaire img {
  width: 50px; height: 25px;
  transition: all 0.5s ease-in;
  border-radius: 50px 50px;
  margin: 1px;
}
.cadre-partenaire img:hover {
  border-radius: 0px;
}
.cadre-credit {
  margin-top: 10px;
  width: 200px; height: 135px;
  background-color: #1E200B;
  border-radius: 10px;
  border : 1px solid #000000;
  padding: 5px;
}
.cadre-credit span {
  display: block;
  height: 135px;
  background-color: #1E200B;
  text-align: justify;
  font-size: 13px;
  overflow: auto;
}
/*fin pa by Laxy*/

Poster un nouveau sujetRépondre au sujet
Vous pouvez répondre aux sujets dans ce forum