Un forum de ressources en codage.
 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Page d'Accueil

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

avatar
Admin
Messages : 30
Date d'inscription : 16/08/2016

Voir le profil de l'utilisateur
MessageSujet + Page d'Accueil + Mer 1 Nov - 14:39


Codes & Explications

- Le fond gris est le fond du forum.
- Les images de fond sont à changer, elles ne vous appartiennent pas.
- Merci de créditer.

HTML : Affichage > Généralités
Code:
                                                                                                           
<div class="imgpa">
                                                                                                                                                                                                                                
 <div class="pahauttitre">
                                                                                                                                                                                 ★ Bienvenue sur [NOM DU FORUM]                                                                                                                                                                                      
 </div>
</div>
<div class="pabloc">
                                                                                                                                                                                                                                                                                                                                                                      
 <table>
                                                                                                                                                                                                                                                                                                                                                            
 <tbody>
                                                                                                                                                                                                                                                                                                                                                            
 <tr>
                                                                                                                                                                                                                                                                                                                                                            
 <td>
                                                                                                                                                                                                                                                                                                        
 <div class="patitre">
                                                                                                                                                    Contexte                                                                                                                                                    
 </div>
                                                                                                                                                                                                                                                                                                                                                                
 <div class="pacontexte">
                                                                                                                                                                                                                                                                                                                                                                      
 <div class="pacontextetexte">
                                                                                                                                                                               Votre contexte.                                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                                                                                                                                                                            
 </td>
                                                                                                                                                                                                                                                                                                                                                            
 <td>
                                                                                                                                                                                                                                                                                                    
 <div class="patitre">
                                                                                                                                                    Staff                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
 <table>
                                                                                                                                                                                                                                                                                                                                                            
 <tbody>
                                                                                                                                                                                                                                                                                                                                                            
 <tr>
                                                                                                                                                                                                                                                                                                                                                            
 <td>
                                                                                                                                                                               <img style="width: 100px; height:85px; margin-top: 0px;" src="https://i.imgur.com/qh4SO39.png" class="pastaff" />                                                                                                                                                                                
 </td>
                                                                                                                                                                                                                                                                                                                                                            
 <td>
                                                                                                                                                                                                                                                                                                                                                              
 <div class="pastaff" style="margin-top: 2px;">
                                                                                                                                                                                                                                                                                                                                                                
 <div class="pastafftexte">
                                                                                                                                                                                 votre texte ici                                                                                                                                                                          
 </div>
                                                                                                                                                                                                                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                                                                                                                              
 </td>
                                                                                                                                                                                                                                                                                                                                                            
 </tr>
                                                                                                                                                                                                                                                                                                                                                            
 </tbody>
                                                                                                                                                                                                                                                                                                                                                            
 </table>
                                                                                                                                                  
 <table>
                                                                                                                                                                                                                                                                                                                                                            
 <tbody>
                                                                                                                                                                                                                                                                                                                                                            
 <tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
 <td>
                                                                                                                                                                                                                                                                                                                                                              
 <div class="pastaff" style="margin-top: 3px;">
                                                                                                                                                                                                                                                                                                                                                                
 <div class="pastafftexte">
                                                                                                                                                                                 texte ici                                                                                                                                                                        
 </div>
                                                                                                                                                                                                                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                                                                                                                              
 </td>
                                                                                                                          
 <td>
                                                                                                                                                                               <img style="width: 100px; height: 85px; margin-top: 3px;" src="https://i.imgur.com/ZsyN9j1.png" class="pastaff" />                                                                                                                                                                                
 </td>
                                                                                                                                                                                                                                                                                                                                                  
 </tr>
                                                                                                                                                                                                                                                                                                                                                            
 </tbody>
                                                                                                                                                                                                                                                                                                                                                            
 </table>
                                                                                                                                                                                                                                                                                                                                                                        
 </td>
                                                                                                                                                                                                                                                                                                                                                            
 </tr>
                                                                                                                                                                                                                                                                                                                                                            
 </tbody>
                                                                                                                                                                                                                                                                                                                                                            
 </table>
                                                                                                                            
 <table>
                                                                                                                                                                                                                                                                                                                                                            
 <tbody>
                                                                                                                                                                                                                                                                                                                                                            
 <tr>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
 <td>
                                                                                                          
 <div class="papredefinis">
                                                    votre texte ici                                            
 </div>
                                                                                                          
 </td>
                                                                                                
 <td>
                                                                                
 <div class="painfo">
                                                                          
 <div class="infotexte">
                                                                                
 <div class="patitre2">
                                        ◄ pré-liens                                        
 </div><br />                                        
 <div class="patitre2">
                                        partenaires ►                                        
 </div>
                                                                                
 </div>
                                                                      
 </div>
                                                                                
 </td>
                                                                                            
 <td>
                                                                                                      
 <div class="parto">
                                                vos partenaires comme vous voulez ici.                                      
 </div>
                                                                                                      
 </td>
                                                                                                          
 </tr>
                                                                                                          
 </tbody>
                                                                                                          
 </table>
                                                                                                                                                                                                                                                                                                          
 <table>
                                                                                                                                                                                                                                                                                                                            
 <tbody>
                                                                                                                                                                                                                                                                                                                            
 <tr>
                                                                                                                                                                                                                                                                                                                            
 <td>
                                                                                                                                                                                                                                                                                                                            
 <div class="pareglement">
                                                                                                                                                                 ▬ <a href="http">le règlement</a> ▼ <a href="http">les groupes</a> ▼ <a href="http">les effectifs</a> ▬                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                    
 <div class="panews">
                                                                                                                                                                Les news ici.                                                                                                                                        
 </div>
                                                                                                                                                                                                                                                                                                                            
 </td>
                                                                                                                                                                                                                                                                                                                            
 <td>
                                                                                                                                                           <img src="IMG" />                                                                                                                                                          
 </td>
                                                                                                                                                                                                                                                                                                                      
 <td>
                                                                                                                                                                                                                                                                                                                            
 <div class="patop">
                                                                                                                                                                                                                                                                                                                                                                                                                  
 <div style="text-align: center;">
                                                                                                              
 vos top sites etc. ici.
                                                                                                                                              
 </div>
                                                                                                                                                                                                                                                                                                                                                                
 </div>
                                                                                                                                                                                                                                                  
 <div class="pacredits">
                                                                                                                                                                ▬ <a href="http">les crédits</a> ▼ <a href="http">les partenariats</a> ▼ <a href="http">les invités</a> ▬                                                                                                                                                                
 </div>                                                                                                                            
 </td>
                                                                                                                                                                                                                                                                                                                            
 </tr>
                                                                                                                                                                                                                                                                                                                            
 </tbody>
                                                                                                                                                                                                                                                                                                                            
 </table>
</div>

CSS > Images & Couleurs > Couleurs > Feuille de style CSS
Code:
/*---------------------------- PAGE D'ACCUEIL --------------------------*/
.pahauttitre{
  text-align: center;
  font-size: 40px;
  font-family: jolly lodger;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px white;
  color: black;
  background-color: white;
  opacity: 0.8;
  width:800px;
  margin: auto;
  border-radius: 150px;
}
.imgpa{
    padding: 10px;
  background-image: url('https://i.imgur.com/PsOTmgI.png');
  width: 100%;
  height: 50px;
  margin: auto;
  margin-top: 10px;
  background-size: 100%;
  margin-left: -11px;
}
.pabloc{
  margin:auto;
  width:800px;
  padding:5px 0 10px;
}
.pacontexte{
  padding: 10px;
  background-image: url('https://i.imgur.com/efav8Cs.png');
  width: 320px;
  height: 200px;
}
.pacontextetexte{
  background-color: white;
  opacity: 0.8;
  padding: 10px;
  color: black;
  height: 180px;
  text-align: justify;
  overflow: hidden;
}
.pacontextetexte:hover{
  overflow: auto;
}
.pastaff{
  padding: 10px;
  background-image: url('https://i.imgur.com/efav8Cs.png');
  width: 250px;
  height: 85px;
  margin-top: -5px;
}
.pastafftexte{
  background-color: white;
  opacity: 0.8;
  padding: 10px;
  color: black;
  height: 65px;
  text-align: justify;
  overflow: hidden;
}
.pastafftexte{
  overflow: auto;
}
.papredefinis{
  padding: 10px;
  background-color: #cb5048;
  width: 260px;
  height: 77px;
  margin-left: 1px;
  margin-bottom: 4px;
  margin-top: 3px;
  color: white;
  text-align: justify;
}
.papredefinis a{color: black;}
.pareglement{
  height:15px;
  padding:5px;
  padding-left:10px;
  font-size:11px;
  text-transform:uppercase;
  text-align: center;
  background:#999797;
  color:white;
  width: 320px;
}
.pacredits{
   height:15px;
  padding:5px;
  padding-right:10px;
  font-size:11px;
  text-transform:uppercase;
  text-align: center;
  background:#999797;
  color:white;
}
.panews{
  width:315px;
  height:55px;
  padding:10px;
  font-size:11px;
  text-align:justify;
  background: #cb5048;
  color:white;
  overflow: auto;
}
.patop{
  width:315px;
  height:55px;
  padding:10px;
  font-size:11px;
  text-align:justify;
  background: #cb5048;
  color:white;
  overflow: hidden;
}
.patitre{
  font-size:20px;
  text-transform:uppercase;
  text-shadow: 1px 1px 2px black;
  font-family:Oswald;
  text-align: center;
  color: white;
}
.parto{width: 285px;background-color: #999797; height: 77px; padding:10px; font-size: 19px;}
.parto img{width:30px;}
.painfo{
  padding: 10px;
  background-image: url('https://i.imgur.com/PsOTmgI.png');
  width: 130px;
  height: 77px;
}
.infotexte{
  background-color: white;
  opacity: 0.8;
  padding: 10px;
  color: black;
  height:57px;
  text-align: justify;
  overflow: hidden;
  width: 110px;
}
.patitre2{
  font-size:17px;
  text-shadow: 0px 1px 1px black;
  text-transform:uppercase;
  font-family:jolly lodger;
  text-align: center;
  color: black;
}
Revenir en haut Aller en bas
 
Page d'Accueil
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
VALAR MORGHULIS :: Codage :: LDD :: Templates-
Sauter vers: