Forum graphique et codage Libre Service + Forum test
 
AccueilCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion

Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 LS Page D'Accueil N°3

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Queen of Suburbia

avatar
I am
Messages : 221
Date d'inscription : 25/11/2015
Age : 26


Le joueur et le RPG
Style de RPG: City / Réel
Noms des personnages:
Noms des RPGs:

MessageSujet: LS Page D'Accueil N°3    Dim 14 Mai - 18:19

Et voici enfin la dernière page d'accueil, je suis désolée de la déposer seulement maintenant, je penser l'avoir fait. C'est à peu près la même que vous pouvez retrouver sur la page d'accueil de ce forum. N'hésitez pas à me dire si vous rencontrez un quelconque problème, cela est valable pour tous les codes.



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*/



Pumbill
codage par LaxBilly
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lecerclesecret.forumactif.org
 
LS Page D'Accueil N°3
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Chargement lent de la page d'accueil ...
» THE page d'accueil...
» accueil bug
» Sonorisation de la page d'accueil!
» NOUVEAUTÉS ☞ SAISON CINQ.

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
The Secret Circle :: Le LS du cercle :: Libre-Service Codage :: Page d'accueil-
Poster un nouveau sujet   Répondre au sujetSauter vers: