Test Page d'accueil

Admin Messages : 39 Date d'inscription : 30/07/2015

Code:: <link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css" /><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display" />
<center>
   <img src="http://img15.hostingpics.net/pics/246978TitrePA.png" ;="" />
<table>

   <tbody>

      <tr>

         <td>

            <div class="BlocP">

               <div class="Bloc1">

                  <div class="BlocImg">

                  </div>
                     <br />
                  <div align="center">
                        <span style="text-decoration: underline;">CONTEXTE</span>
                  </div>

                  <blockquote>
                        « You once love me... <br />– You once a good man. » <br /><br />« Mes amis, en ces heures sombres, il vous faudra prendre une décision des plus importante. Une décision qui changera le cours de notre existence, mais, avant tout, de votre existence. Ce qu'il vous faudra garder en mémoire, c'est qu'il n'y a ni Mal, ni Bien absolu. En toute obscurité, se cache un peu de lumière, et toute blancheur, aussi immaculée soit-elle, recèle une part d'ombre au fond de sa clarté. Le choix que vous prendrez aujourd'hui ne vous rendra ni bon, ni mauvais. Mais il déterminera la personne que vous avez envie d'être, la personne avec laquelle vous allez vivre le restant de votre existence : vous-même, votre conscience, et votre état d'âme. » <br /><br />
                     <div align="center">
                           <a style="font-size:12px;" href="URLCONTEXTE">More ?</a>
                     </div>

                  </blockquote>

               </div>

               <div class="Bloc2">

                  <div class="Titre5" style=" font-family:'Indie Flower'; font-size: 25px; color: #5C170B; ">
                        Boutons
                  </div>

                  <div class="SsBlocB1">

                     <div style="padding-top:29px;">
                           <a href="URLBOUTON">RÈGLEMENT</a>
                     </div>

                  </div>

                  <div class="SsBlocB2">

                     <div style="padding-top:29px;">
                           <a href="URLBOUTON">CONTEXTE</a>
                     </div>

                  </div>

                  <div class="SsBlocB3">

                     <div style="padding-top:29px;">
                           <a href="URLBOUTON">GROUPES</a>
                     </div>

                  </div>

                  <div class="SsBlocB4">

                     <div style="padding-top:29px;">
                           <a href="URLBOUTON">INTRIGUE</a>
                     </div>

                  </div>

                  <div class="SsBlocB5">

                     <div style="padding-top:29px;">
                           <a href="URLBOUTON">JOURNAL</a>
                     </div>

                  </div>

               </div>

               <div class="Bloc3">

                  <div class="Titre3" style=" font-family:'Indie Flower'; font-size: 25px; color: #5C170B; ">
                        Prédéfinis
                  </div>

                  <div class="SsBlocP1">
                        <a href="URLFICHEPREDEF"><img title="Désiré Lecomte" src="http://img15.hostingpics.net/pics/544811JamieDornanjamiedornan27713562100100.jpg" /> </a>
                  </div>

                  <div class="SsBlocP2">
                        <a href="URLFICHEPREDEF"><img title="Damon Chatterton" src="http://img15.hostingpics.net/pics/958438closecrop1.png" /></a>
                  </div>

                  <div class="SsBlocP3">
                        <a href="URLFICHEPREDEF"> <img title="Alice Davis" src="http://img15.hostingpics.net/pics/402306tumblrnsiwlzEhT31uoxb43o2400.png" /> </a>
                  </div>

                  <div class="SsBlocP4">
                        <a href="URLFICHEPREDEF"><img title="Rose Landers" src="http://img15.hostingpics.net/pics/624825EvaGreeniconsevagreen38669191100100.jpg" /></a>
                  </div>

                  <div class="SsBlocP5">
                        <a href="URLFICHEPREDEF"><img title="Aimée de Montreil" src="http://img15.hostingpics.net/pics/450621BradleyJamesbradleyjames17009861100100.jpg" /></a>
                  </div>

                  <div class="SsBlocP6">
                        <a href="URLFICHEPREDEF"><img title="Dorian de Montreil" src="http://imados.fr/content/6/5/0/576507/kak86b_s100.png" /></a>
                  </div>

                  <div class="SsBlocP7">
                        <a href="URLFICHEPREDEF"><img title="Bartholomew Godric" src="http://img15.hostingpics.net/pics/969678tumblrnqkoq1U4g01tmvgjko9250.png" /></a>
                  </div>

                  <div class="SsBlocP8">
                        <a href="URLFICHEPREDEF"> <img title="Zachariah Montgomery" src="http://img15.hostingpics.net/pics/694220BenBarnesbenbarnes25645851100100.jpg" /> </a>
                  </div>

               </div>

               <div class="Bloc4">

                  <div class="Titre4" style=" font-family:'Indie Flower'; font-size: 25px; color: #5C170B; ">
                        Staff
                  </div>

                  <div class="Ssbloc1">
                        <span style="text-decoration: underline;">Jonathan Around</span><br /><br />-- Fondateur désagréable -- <br /><br /> Détective -- Sarcastique
                  </div>

                  <div class="ImgDis1">
                        <img style="width: 100px; height : 100px;" src="http://img15.hostingpics.net/pics/585581giphy.gif" />
                  </div>

                  <div class="Ssbloc2">
                        <span style="text-decoration: underline;">Benjamin Anderson</span><br /><br />-- Co-Fondateur provocateur -- <br /><br /> Cambrioleur -- Séducteur
                  </div>

                  <div class="ImgDis2">
                        <img style="width: 100px; height : 100px;" src="http://img15.hostingpics.net/pics/396746tumblrinlinemzgy1k2rxE1qbmlq9.gif" />
                  </div>

                  <div class="Ssbloc3">
                        <span style="text-decoration: underline;">Nikolaï Zakharov</span><br /><br />-- Administrateur diabolique -- <br /><br /> Lucifer -- Colérique
                  </div>

                  <div class="ImgDis3">
                        <img style="width: 100px; height : 100px;" src="http://img15.hostingpics.net/pics/167621tumblrm8k7mfAAfA1r1q5ado9r2250ConvertImage.gif" />
                  </div>

                  <div class="Ssbloc4">
                        <span style="text-decoration: underline;">William Baudelaire</span><br /><br />-- Administrateur manipulateur -- <br /><br /> Vénitien -- Illusionniste
                  </div>

                  <div class="ImgDis4">
                        <img style="width: 100px; height : 100px;" src="http://img15.hostingpics.net/pics/827247teeeeeee.gif" />
                  </div>

               </div>

            </div>

         </td>

      </tr>

   </tbody>

</table>

</center>

Code:: /**Page d'accueil**/
a:link {text-decoration:none; color: #5C170B;}
a:visited {text-decoration:none; color: #5C170B;}
a:hover, a:focus, a:active {text-decoration:none;color: white;}
/**Titre**/
.Titre1 {text-decoration: underline;}
.Titre2 {margin-left: 200px;margin-top: -26px;font-weight: bold;}
.Titre3 {margin-left: 120px;margin-top: -20px;font-weight: bold;}
.Titre4 {margin-left: 0px;margin-top: -20px;font-weight: bold;}
.Titre5 {margin-left: 0px;margin-top: -20px;font-weight: bold;}
/**Bloc entier**/
.BlocP {
width: 710px;
height: 710px;
border: solid black 3px;
border-radius: 50px 50px 0px 0px;
background-color: #5E5B5B;}
/**Bloc de contexte**/
.Bloc1 {position:relative; background-color: black; width: 380px; height: 300px; border: solid black 2px; margin-top: 20px; margin-left: 20px;
color:white; text-align: justify;font-size: 10px;overflow: auto;}
/**Image sur le contexte**/
.BlocImg {position: absolute; top: 0; left: 0; width: 380px; height: 300px;background-image: url('http://img15.hostingpics.net/pics/172860IMGCONTXT.png');
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;}
.Bloc1:hover > .BlocImg {left: -380px;}
/**Bloc des boutons**/
.Bloc2 {background-color: #191F1F;width: 200px; height: 450px; border: solid black 2px; margin-top: -280px; margin-left: 460px;
color:black;text-align: center;}
/**Sous Bloc des boutons **/
.SsBlocB1 {transition: all 0.5s linear; color: white; font-size:12px; letter-spacing: 0.5px; background-color: black; margin-left: 35px; width: 125px; height : 70px; border: solid #5C170B 2px;}
.SsBlocB2 {transition: all 0.5s linear; color: white; font-size:12px; letter-spacing: 0.5px; background-color: black; margin-top: 10px; margin-left: 35px; width: 125px; height : 70px; border: solid #5C170B 2px;}
.SsBlocB3 {transition: all 0.5s linear; color: white; font-size:12px; letter-spacing: 0.5px; background-color: black; margin-top: 10px; margin-left: 35px; width: 125px; height : 70px; border: solid #5C170B 2px;}
.SsBlocB4 {transition: all 0.5s linear; color: white; font-size:12px; letter-spacing: 0.5px; background-color: black; margin-top: 10px; margin-left: 35px; width: 125px; height : 70px; border: solid #5C170B 2px;}
.SsBlocB5 {transition: all 0.5s linear; color: white; font-size:12px; letter-spacing: 0.5px; background-color: black; margin-top: 10px; margin-left: 35px; width: 125px; height : 70px; border: solid #5C170B 2px;}
.SsBlocB1:hover {letter-spacing: 2px;}
.SsBlocB2:hover {letter-spacing: 2px;}
.SsBlocB3:hover {letter-spacing: 2px;}
.SsBlocB4:hover {letter-spacing: 2px;}
.SsBlocB5:hover {letter-spacing: 2px;}
/**Bloc des prédéfénis**/
.Bloc3 {background-color: #191F1F; margin-top: -140px; margin-left: 20px; width: 380px; height: 180px; border: solid black 2px;
color:white;}
/**Sous Bloc des prédéfénis **/
.SsBlocP1 img {transition: all 0.5s linear; background-color: white; margin-top: -5px; margin-left: 20px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP2 img {transition: all 0.5s linear; background-color: white; margin-top: 10px; margin-left: 20px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP3 img {transition: all 0.5s linear; background-color: white; margin-top: -158px; margin-left: 110px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP4 img {transition: all 0.5s linear; background-color: white; margin-top: -74px; margin-left: 110px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP5 img {transition: all 0.5s linear; background-color: white; margin-top: -158px; margin-left: 200px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP6 img {transition: all 0.5s linear; background-color: white; margin-top: -74px; margin-left: 200px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP7 img {transition: all 0.5s linear; background-color: white; margin-top: -158px; margin-left: 290px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP8 img {transition: all 0.5s linear; background-color: white; margin-top: -74px; margin-left: 290px; width: 70px; height : 70px; border: solid #5C170B 2px;}
.SsBlocP1 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
.SsBlocP2 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
.SsBlocP3 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
.SsBlocP4 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
.SsBlocP5 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
.SsBlocP6 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
.SsBlocP7 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
.SsBlocP8 img:hover {filter: grayscale(1);-webkit-filter: grayscale(1);-moz-filter: grayscale(1);-o-filter: grayscale(1); -ms-filter: grayscale(1);}
/**Bloc du staff**/
.Bloc4 {background-color:#191F1F;;margin-top: 20px; margin-left: 50px; width: 600px; height: 120px; border: solid black 2px;
color:black;text-align:center;font-family: calibri; font-size: 11px;}
/**Sous bloc du staff**/
.Ssbloc1 {background-color: white; margin-top: -7px; margin-left: 30px; width: 100px; height : 100px; border: solid #5C170B 2px;}
.Ssbloc2 {background-color: white; margin-top: -104px; margin-left: 150px; width: 100px; height : 100px; border: solid #5C170B 2px;}
.Ssbloc3 {background-color: white; margin-top: -104px; margin-left: 340px; width: 100px; height : 100px; border: solid #5C170B 2px;}
.Ssbloc4 {background-color: white; margin-top: -104px; margin-left: 460px; width: 100px; height : 100px; border: solid #5C170B 2px;}
/**Image du premier sous bloc**/
.ImgDis1 {position: absolute; margin-top: -102px; margin-left: 32px; opacity:1;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear; }
.ImgDis1:hover {opacity: 0; overflow: hidden;}
/**Image du second sous bloc**/
.ImgDis2 {position: absolute;margin-top: -102px;margin-left: 152px;opacity:1;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear; }
.ImgDis2:hover {opacity: 0; overflow: hidden;}
/**Image du troisième sous bloc**/
.ImgDis3 {position: absolute; margin-top: -102px; margin-left: 342px; opacity:1;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear; }
.ImgDis3:hover {opacity: 0; overflow: hidden;}
/**Image du quatrième sous bloc**/
.ImgDis4 {position: absolute;margin-top: -102px;margin-left: 462px;opacity:1;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear; }
.ImgDis4:hover {opacity: 0; overflow: hidden;}
/**Fin Page d'accueil**/