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

Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 LS Page D'Accueil N°4

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

Queen of Suburbia

avatar
I am
Messages : 228
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°4   Mer 12 Juil - 15:43

Une nouvelle petite page d'accueil a vu le jour ! N'hésitez pas à dire ce que vous en pensez, vous pouvez l'utilisez, mais s'il vous plaît ne retirez pas le crédit. L'image des membres du staff se déplace vers le bas lorsqu'on passe la souris dessus, les images des prédéfinis et des petits plus se transforment en carrés lorsque la souris passe dessus également. Vous pouvez changer la forme du fond en changeant la valeur border-radius: 20% ou en 20px. Toutes les couleurs et images sont modifiables.
Images Page d'accueil:
 

HTML :
Code:
<div class="fond_PA">
         <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montez" /><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Mouse+Memoirs" />          
 <div class="titre">
                                                                                       Bienvenu {USERNAME} à Berlin !                                                                                      
 </div><br />          
 <table>
                                                                                                                                                                              
 <tbody>
                                                                                                                                                                              
 <tr>
                                                                                                                                                                              
 <td>
                                                                  
 <div class="sous_titre_PA">
                                                    Contexte                                                
 </div>
                                                                                                                                                                                                                                                                                
 <div class="cadre-contexte">
                                                                                                                                                          
 <div class="lettrine">
                                                                                       I                                                                                      
 </div>
                                                                                       ci le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte. Ici le contexte.<br />                            <a style="color: #68B8B6;" href="URL ICI">Lire la suite !</a>                                                                                      
 </div>
                                                                                                                                                                              
 </td>
                                                      
 <td>
                                                                                                                        
 <div class="sous_titre_PA">
                                                             Le staff                                                            
 </div>
                                                                                                                        
 <div class="cadre-staff">
                                                              
 <center>
                                                                                                          
 <div class="staff">
                                                             <span>Libre<br /><a target="_blank" href="URL ICI">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />                                                            
 </div>
                                                                                                                          
 <div class="staff">
                                                             <span>Libre<br /><a target="_blank" href="#">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />                                                            
 </div>
                                                  
 <div class="staff">
                                                             <span>Libre<br /><a target="_blank" href="#">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />                                                            
 </div>
                                                      
 </center>
                                  <br />                      
 <center>
                                            
 <div class="staff">
                                                          <span>Libre<br /><a href="#" target="_blank">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />                                                          
 </div>
                                                
 <div class="staff">
                                                          <span>Libre<br /><a href="#" target="_blank">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />                                                          
 </div>
                                            
 <div class="staff">
                                                          <span>Libre<br /><a href="#" target="_blank">Contacter</a></span><img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" />                                                          
 </div>
                                            
 </center>
                                                                                                      
 </div>
                                                                                                                        
 </td>
                                                                
 </tr>
                                      
 </tbody>
                  
 </table>
                  
 <table>
                                      
 <tbody>
                                        
 <tr>
                                        
 <td>
                                        
 <div class="sous_titre_PA">
                                                             Nos top-partenaires                                                            
 </div>
                                        
 <div class="cadre-partenaire">
                                                      <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a> <a href="http://ifeltitallrpg.forumactif.org/" target="_blank"><img class="Ifeltitallrpg" src="https://i11.servimg.com/u/f11/18/95/70/35/minilo10.jpg" /></a>                    
 </div>
                                        
 </td>
                                        
 </tr>
                                                                
 </tbody>
                  
 </table>
                  
 <table>
                                
 <tbody>
                                
 <tr>
                                
 <td>
                                
 <div class="sous_titre_PA">
                                                              Les petits plus                                                            
 </div>
                                                                                                                      
 <div class="cadre-points">
                                                               <a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a><a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a><br /><a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a><a href="#" target="_blank"> <img src="https://png.icons8.com/brandenburg-gate/ios7/1600" /></a>                                                            
 </div>
                                
 </td>
                                                                                                            
 <td>
                                                                                                                  
 <div class="sous_titre_PA">
                                                             Les Nouveautés                                                          
 </div>
                                                                                                                  
 <div class="cadre-news">
                                                               <a style="color: #68B8B6;">00/00/00 ✈</a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 ✈</a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 ✈</a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 ✈</a> Aucune nouvelle<br /><a style="color: #68B8B6;">00/00/00 ✈</a> Aucune nouvelle                                                            
 </div>
                                                                                                                
 </td>
                      
 <td>
                                                                                                            
 <div class="sous_titre_PA">
                                                          Prédéfénis                                                        
 </div>
                                                                                                            
 <div class="cadre-predef">
                                                          <a target="_blank" href="URL ICI"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="URL ICI"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="URL ICI"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><br /><a target="_blank" href="#"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="#"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a><a target="_blank" href="#"> <img src="https://s-media-cache-ak0.pinimg.com/originals/32/3f/a4/323fa44f975a818e19038cf230ab0d3e.gif" /></a>                                                      
 </div>
                                                                                                          
 </td>
                                
 </tr>
                                
 </tbody>
                  
 </table>
  
 <table>
                                      
 <tbody>
                                        
 <tr>
                                        
 <td>
                                        
 <div class="sous_titre_PA">
                                                             Navigation rapide                                                            
 </div>
                                        
 <div class="cadre-liens-rapides">
                                                      Welcome to Berlin {USERNAME}, n'hésite pas à prendre connaissance de l'<a style="color: #68B8B6;" href="URL ICI">histoire</a> de Stay With Me ainsi que de son <a style="color: #68B8B6;" href="URL ICI">règlement</a>. Les <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f6-les-annexes">annexes</a> te seront également d'une aide précieuse; avant toute inscription tu pourras vérifier le <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f12-les-bottins">bottin</a> ainsi que les <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f13-les-predefinis-post-vacants">prédéfinis & PVs</a>. Quand à nos invités et partenaires, ils trouveront leur bonheur dans le <a style="color: #68B8B6;" href="http://ifeltitallrpg.forumactif.org/f16-le-livre-d-or">livre d'or</a>. ENJOY !                    
 </div>
                                        
 </td>
                                        
 </tr>
                                                                
 </tbody>
                  
 </table>
                  
 <div style="font-size:8px; letter-spacing:3px; text-align:center; color : #000000">
           codage par <a href="http://lecerclesecret.forumactif.org/" class="postlink" target="_blank" rel="nofollow">LaxBilly</a>          
 </div><br /><br />
</div>

CSS :
Code:
/*PA BY LAXBILLY*/
.fond_PA {
  width: 600px;
  background-color: #68B8B6;
  border-radius: 20%;
}
.titre {
  font-family: 'Montez', cursive;
  font-size: 50px;
  text-align: center !important;
  position: relative;
  top: 0.6em;
  color: #FAF3DF;
}
.sous_titre_PA {
      position: relative;
      top: 0,5em;
      z-index: 1;
      font-family: 'Montez', cursive;
      font-size: 25px;
      color: #FAF3DF;
      text-shadow: 1px 1px 2px white;
      text-align: center;
    }
.cadre-contexte {
  width: 250px; height: 160px;
  background-color: #FAF3DF;
  border-radius: 5px;
  border : 1px solid #68B8B6;
  padding: 5px;
  text-align: justify;
  font-size: 13px;
  overflow: auto;
}
.lettrine:first-letter {
  font-size: 300%;
  float: left;
  font-family: 'Montez', cursive;
  color: #000000;
}  
.cadre-staff {
  width: 250px; height: 160px;
  background-color: #FAF3DF;
  border-radius: 5px;
  border : 1px solid #68B8B6;
  padding: 5px;
}
.staff {
  display: inline-block;
  margin: auto;
  width: 65px; height: 65px;
  border-radius: 20px 20px;
  overflow: hidden;
}
.staff span {
  display: block;
  width: 65px; height: 30px;
  background-color: #68B8B6;
  padding: 5px;
  text-align: center;
  font-size: 13px;
}
.staff img {
  width: 65px; height: 65px;
  margin-top: -40px;
  transition: all 1s ease-in;
}
.staff:hover img {
 margin-top: 0px;
 transition: all 1s ease-out;
}
.cadre-partenaire {
  float : center;
  width: 520px; height: 35px;
  background-color: #FAF3DF;
  border-radius: 5px;
  border : 1px solid #68B8B6;
  padding: 5px;
}
.cadre-points {
  margin-top: 10px;
  width: 150px; height: 100px;
  background-color: #FAF3DF;
  border-radius: 5px;
  border : 1px solid #68B8B6;
  padding: 5px;
  text-align: center;
}
.cadre-points img {
  width: 45px; height: 45px;
  transition: all 0.5s ease-in;
  border-radius: 50px 50px;
  margin: 1px;
}
.cadre-points img:hover {
  border-radius: 5px;
}
.cadre-news {
  float: right;
  margin-left: 5px;
  width: 180px; height: 105px;
  background-color: #FAF3DF;
  border-radius: 5px;
  border : 1px solid #68B8B6;
  padding: 2px;
  text-align: left;
  font-size: 13px;
  overflow: auto;
}
.cadre-predef {
  margin-top: 10px;
  width: 150px; height: 100px;
  background-color: #FAF3DF;
  border-radius: 5px;
  border : 1px solid #68B8B6;
  padding: 5px;
  text-align: center;
}
.cadre-predef img {
  width: 40px; height: 40px;
  transition: all 0.5s ease-in;
  border-radius: 50px 50px;
  margin: 1px;
}
.cadre-predef img:hover {
  border-radius: 5px;
}
.cadre-liens-rapides {
  float : center;
  width: 520px; height: auto;
  background-color: #FAF3DF;
  border-radius: 5px;
  border : 1px solid #68B8B6;
  padding: 5px;
  text-align : justify;
  font-size : 10px;
}
/*FIN PA BY LAXBILLY*/



Dunbar x Raeken
Let's fight Thiam !

codage par LaxyDunbar
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://lecerclesecret.forumactif.org

Invité

avatar
I am
Chocapiix



MessageSujet: Re: LS Page D'Accueil N°4   Lun 25 Sep - 11:38

Merci Very Happy
Revenir en haut Aller en bas
 
LS Page D'Accueil N°4
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: