Code mystic orléan

Messages : 118 Date d'inscription : 05/02/2011 Age : 29

Code:: /************************************ PAGE ACCUEIL **************************************/

/******************infobulle*****************/

a.infobulle {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 5px; /* on positionne notre infobulle */
left: 15px;

background: #D6C7C1; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted #29132C;
}

Code:: /* PAGE D'ACCUEIL*/

.imagespa {margin:1px;
  opacity:0.5;
  width:50px; height:50px;
  border: 1px #504c49 solid;
  padding: 2px;}

.imagespa:hover {margin:1px;
  opacity:0.8;
  width:50px; height:50px;
  border: 1px #756F6C solid;
  padding: 2px;}

.pabigtitle {
  color: #756F6C ;
   font-family: 'Berkshire Swash', cursive;
   font-size: 30px;
   font-style: normal;
   font-weight: bold;
   padding-bottom: 3px;
   padding-top: 3px;
   text-align: center;
   text-transform: lowercase;}
a.palink {font-size:18px;
  font-family:BenchNine;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none !important; }
a.palink img {display:none;}
a.palink:hover{color:#EEE4E5;}

.pacattit {
  font-family:times;
  text-transform:uppercase;
  font-size:8px;
  display:block;
  letter-spacing:2px;
  text-align: right;
  font-size:25px;
  text-transform: lowercase;
  margin-top: -11px;

}
.pacross {font-size:16px;
  font-family:BenchNine;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none !important;
color: black;}

#scene3D{
   width:70px;
   height:112px;
   margin: 2px auto;
   -webkit-perspective:500px;
   -moz-perspective:500px;
   -ms-perspective:500px;
   -o-perspective:500px;
   perspective:500px;

}
#flip div{
   position:absolute;
   width:70px;
   height:112px;
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -ms-backface-visibility:hidden;
   -o-backface-visibility:hidden;
   backface-visibility:hidden;
}

#flip div:first-child{
   background: #F9EBCF;
   border : 1px solid #c9bda5
   -webkit-transform: rotateX(180deg);
   -moz-transform: rotateX(180deg);
   -ms-transform: rotateX(180deg);
   -o-transform: rotateX(180deg);
   transform: rotateX(180deg);
}
#flip div:first-child p{
   color:#000000;
   font-style:italic;

   text-align:center;
}
#flip{
   width:70px;
   height:112px;
   -webkit-transform: rotateX(0deg);
   -webkit-transition: all 1s ease;
   -webkit-transform-style: preserve-3d;
   -moz-transform: rotateX(0deg);
   -moz-transition: all 1s ease;
   -moz-transform-style: preserve-3d;
   -ms-transform: rotateX(0deg);
   -ms-transition: all 1s ease;
   -ms-transform-style: preserve-3d;
   -o-transform: rotateX(0deg);
   -o-transition: all 1s ease;
   -o-transform-style: preserve-3d;
   transform: rotateX(0deg);
   transition: all 1s ease;
   transform-style: preserve-3d;

}
#scene3D:hover #flip{
   -webkit-transform: rotateX(180deg);
   -moz-transform: rotateX(180deg);
   -ms-transform: rotateX(180deg);
   -o-transform: rotateX(180deg);
   transform: rotateX(180deg);
}
#ascene3D{
   width:70px;
   height:112px;
   margin: 2px auto;
   -webkit-perspective:500px;
   -moz-perspective:500px;
   -ms-perspective:500px;
   -o-perspective:500px;
   perspective:500px;

}
#aflip div{
   position:absolute;
   width:70px;
   height:112px;
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -ms-backface-visibility:hidden;
   -o-backface-visibility:hidden;
   backface-visibility:hidden;
}

#aflip div:first-child{
   background:#F6FEFE;
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
}
#aflip div:first-child p{
   color:#000;
   font-style:italic;
   text-align:center;
}
#aflip{
   width:70px;
   -webkit-transform: rotateY(0deg);
   -webkit-transition: all 1s ease;
   -webkit-transform-style: preserve-3d;
   -moz-transform: rotateY(0deg);
   -moz-transition: all 1s ease;
   -moz-transform-style: preserve-3d;
   -ms-transform: rotateY(0deg);
   -ms-transition: all 1s ease;
   -ms-transform-style: preserve-3d;
   -o-transform: rotateY(0deg);
   -o-transition: all 1s ease;
   -o-transform-style: preserve-3d;
   transform: rotateX(0deg);
   transition: all 1s ease;
   transform-style: preserve-3d;

}
#ascene3D:hover #aflip{
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

Code:: <center>
<span class="pabigtitle">Bienvenue à Mystic Falls</span><br />
<div style=" background-color : #756f6c ; padding: 2px; width: 450px;">
   <a class="palink" href="http://mystic-orleans.forumactif.org/t6-reglement">Règles</a> <span class="pacross">✝</span> <a class="palink" href="http://mystic-orleans.forumactif.org/t12-contexte">Contexte</a> <span class="pacross">✝</span> <a class="palink" href="http://mystic-orleans.forumactif.org/f21-trouve-ton-personnage">Scénarios</a> <span class="pacross">✝</span> <a class="palink" href="http://mystic-orleans.forumactif.org/t11-bottin-des-avatars">Avatars</a> <span class="pacross">✝</span> <a class="palink" href="http://mystic-orleans.forumactif.org/f43-partenariat">Partenaires</a> <span class="pacross">✝</span> <a class="palink" href="">Invités</a>
</div>
</center><br /><br /><td="width="5px;"> </td="width="5px;">
<table style="width: 750px;">

<tbody>

   <tr>

      <td valign="top" style="width:350px; height: 250px; overflow:auto; padding: 5px;">

         <p>
            <span style="color: #870404 ; border-bottom: 2px dotted #870404; text-align: center !important;" class="pacattit"> Contexte </span>
         </p>

         <div align="justify">
            Mystic Falls, cette ville a l'apparence si paisible. Mais cette petite ville cache beaucoup de secrets que seule certaine personne connaisse. Elena et Damon ont passé tous leurs étés ensemble, les deux tourtereaux vivent un amour passionné et ont du mal à se séparer. Malheureusement, les deux jeunes gens sont obligé de se quitter, la belle brune part à l'université de Whitmore avec Caroline et normalement Bonnie va les rejoindre. Sauf que la sorcière à donner sa vie pour sauver Jeremy et elle n'est pas encore prête à leur dire qu'elle ne fait plus partie de ce monde. Toutes les choses ne vont pas tourner rond à Mystic Falls comme à l'université. Katherine et Elena ont fait exactement le même rêve et croit que Stefan est en danger, il demande donc l'aide à Damon pour le retrouver. Effectivement, le petit frère Salvatore est retenu prisonnier par une sorcière qui lui a grillé le cerveau, il ne se souvient plus de personnes et Elena va essayer de l'aider à se souvenir de son passé. Katherine est devenue humaine et est recherchée par Silas le double de Stefan, mais nous ne savons pas encore pourquoi. Au sein de Mystic Fall, les choses sérieuses ne font que commencer ! <a href="http://mystic-orleans.forumactif.org/t12-contexte" style="color:#870404">suite ?</a>
         </div>

      </td>

      <td style="width:5px;">

      </td>

      <td valign="top" style="width:385px; height: 250px; overflow:auto; padding: 5px; text-align: center;">

         <p>
            <span style="color: #8c0250 ; text-align: center !important;" class="pacattit">Notre petite équipe</span> N'hésite pas à nous harceler, on adore ça !
         </p>

         <center>

            <table>

               <tbody>

                  <tr>

                     <td>

                        <div id="ascene3D">

                           <div id="aflip">

                              <div>

                                 <p>
                                    <strong>DAMON SALVATORE</strong><br />ADMIN<br />DC : / <br />
                                 </p>

                              </div>

                              <div style="">
                                 <img src="http://image.noelshack.com/fichiers/2014/10/1394389701-002.png" style="width: 70px;" />
                              </div>

                           </div>

                        </div>

                     </td>

                     <td>

                        <div id="ascene3D">

                           <div id="aflip">

                              <div>

                                 <p>
                                    <strong> SARA BETH STEVENS</strong><br />ADMIN<br />DC : Ella K. O'Neel
                                 </p>

                              </div>

                              <div>
                                 <img src="http://img15.hostingpics.net/pics/522938AVA9.png" style="width: 70px;" />
                              </div>

                           </div>

                        </div>

                     </td>

                     <td>

                        <div id="ascene3D">

                           <div id="aflip">

                              <div>

                                 <p>
                                    <strong> JONAH M. O'NEEL</strong><br />ADMIN<br />DC : /
                                 </p>

                              </div>

                              <div>
                                 <img src="http://image.noelshack.com/fichiers/2014/15/1397331596-009.png" style="width: 70px;" />
                              </div>

                           </div>

                        </div>

                     </td>

                     <td>

                        <div id="ascene3D">

                           <div id="aflip">

                              <div>

                                 <p>
                                    <strong> ELIJAH MIKAELSON</strong><br />ADMIN<br />DC : /
                                 </p>

                              </div>

                              <div>
                                 <img src="http://image.noelshack.com/fichiers/2014/14/1396382622-008.png" style="width: 70px;" />
                              </div>

                           </div>

                        </div>

                     </td>

                  </tr>

                  <tr>

                  </tr>

               </tbody>

            </table>

         </center>

      </td>

   </tr>

</tbody>
</table>

<table style="width: 750px;">

<tbody>

   <tr>

      <td valign="top" style="width:228px; height: 200px; overflow:auto; padding: 5px;">

         <p>
            <span style="color: #870404 ; font-size: 14px; text-align: center !important;" class="pacattit"> Nous avons besoin d'eux </span>
         </p>

         <center>
            <a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a> <a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a> <a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a><br /><a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a> <a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a> <a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a><br /><a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a> <a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a> <a href="LIEN DU SCEN"><img src="URL DE L'IMAGE" class="imagespa" alt="Nom du Scénario" /></a>
         </center>

      </td>

      <td valign="top" style="width:228px; height: 200px; padding: 5px;">

         <p>
            <span style="color: #756F6C ; border-bottom: 1px dotted #756F6C; font-size: 14px; text-align: center !important;" class="pacattit">Quoi de neuf ici ? </span>
         </p>

         <center>

            <div style="height: 150px; overflow: auto; text-align: justify; padding: 5px;">
               <strong>xx/xx/xx</strong> — événement<br /><strong>xx/xx/xx</strong> — événement<br /><strong>xx/xx/xx</strong> — événement
            </div>

         </center>

      </td>

      <td valign="top" style="width:228px; height: 200px; overflow:auto; padding: 5px; text-align: center;">

         <p>
            <span style="color: #870404 ; font-size: 14px; text-align: center !important;" class="pacattit"> La vie sociale du forum </span>
         </p>
         Votez toutes les heures pour le forum<br /> <a href="lien du topsite"><img style="opacity:0.6; width:30px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du topsite"><img style="opacity:0.6; width:30px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du topsite"><img style="opacity:0.6; width:30px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <br /><br />nos amis<br /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <br /><a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a> <img src="" style="width:5px;" /> <a href="lien du partenaire"><img style="opacity:0.6; width:25px;" src="http://anniversaire-magique.com/files/2013/04/4122_dents-vampire.png" /> </a><br /><a href="lien">Plus ?</a> <img src="" style="width:5px;" /> <a href="lien">Vous ?</a>
      </td>

   </tr>

</tbody>
</table><br />