Le deal à ne pas rater :
Pack de 10 BD à 49€ – Le meilleur de DC COMICS
49 €
Voir le deal

Arya
Arya

Page d'accueil n°6 Empty Page d'accueil n°6

Lun 5 Avr 2021 - 12:15
Helloww

Laissez-moi vous partager pour cette anniversaire une page d'accueil :3

La largeur est de 750px.
Les couleurs, polices et images sont modifiables, n'hésitez pas à me contacter en cas de difficulté :3


Installation



Le principe est simple, vous pouvez tout rentrer dans le Modules > Pages HTML et ensuite vous servir de l'iframe à afficher dans la page d'accueil. Comme une fiche de partenariat.

Code:
<iframe scrolling="no" frameborder="0" marginheight="0" style="width: 800px; height: 300px;" src="LE LIEN DE VOTRE PA"></iframe>

Code



Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>fORUM PA</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  
<link href="https://fonts.gstatic.com" rel="preconnect" /><link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Amarante&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gupter&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" />
<style type="text/css">
a, a:link, a:hover {
text-decoration: none!important;
  color: #730701!important;}
  
  /*SCROLLBAR*/
::-webkit-scrollbar { /*taille dans les messages ou fiches */
height: 2px!important;
width: 4px!important;
background-color:#d6d5cc!important; /* couleur de fond */
}

html > ::-webkit-scrollbar {
width: 4px!important; /* largeur de la barre du forum */
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,#9c9b92,#c5c4b5);!important; /* couleur de la barre qui se déplace */
border: 50px!important;
}

::-webkit-scrollbar-track-piece {
background-color:#d6d5cc!important; /* couleur de fond */
}
  
.blocpa{
background-color:#cbcac1;
height: 290px;
width: 750px;
margin: auto;
overflow: hidden;
  font-size: 11px;
    font-family: verdana;}
  
.blocbienvenue{
background-color:#AFA79B;
height: 25px;
color: #dad6ca;
text-align: center;
font-family: 'Playfair Display', serif;
line-height: 25px;
font-size: 15px;
text-transform: uppercase;}
  
.ligne1PA{
margin: auto;
display: flex;
justify-content: space-around;}

.ligneinterne{
width: 490px;
padding: 5px;
display: flex;
justify-content: space-around;
flex-direction: column;
  position: relative;
left: -5px;}

.lienspa{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
width: 490px;
height: 20px;
line-height:20px;
color: #730701!important;
text-align: center;
text-transform: uppercase!important;
font-size: 12px!important;
text-decoration:none!important;
font-family: 'Gupter', serif;}
  
.ligneinterne1{
width: 492px;
padding-top: 5px;
display: flex;
justify-content: space-between;}
  
.contexte {
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
font-family:Verdana;
color: #84846c;
width: 240px;
height: 133px;
text-align: justify;
padding: 5px;
overflow: auto;
}

.titre {
color: white;
background: linear-gradient(90deg,#9c9b92,#c5c4b5);
font-family: 'Gupter', sans-serif!important;
padding: 1px;}

.event{
box-sizing:border-box;
height: 145px;
}

.eventimg {
display:inline-block;
overflow:hidden;
width: 205px;
height: 135px!important;
border: 5px solid #9C9B92;
object-fit:cover;
}

.eventimg div{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color:#E8E7DE;
box-sizing:border-box;
height:150px!important;
position:relative;
top:0;transition:.5s;
width:205px;  
font-family: verdana, sans-serif;
overflow: auto;
color:#84846c;
text-align: left;}

.eventimg:hover div{
top:-138px;
transition:.5s;
padding: 1px!important;
}
  
  .onglets_staff{padding-top:10px;}
  
  .onglets_staff img{
width:52px; height: 52px;text-align: center!important;object-fit:cover;
}

.contenu_ongletstaff {
background-color:#E8E7DE;
border: 1px solid #e6e6e2;
width:218px;
font-family: 'Gupter', serif;
overflow: hidden;
font-size: 11px;
color:grey;
  margin: auto;
text-align: center;
display: none;
  height: 50px;
}

  
.pseudo{color:#730701!important; font-family: 'Playfair Display', serif!important; font-size: 15px!important;}
  
  .fonction{color:#3a3939;font-family: 'Playfair Display', serif!important; font-size: 15px!important;}
  
.postesvacants{
text-align:center;padding-top:15px;}
  
.postesvacants img{
width: 35px;
height: 35px;
border: 2px solid #9C9B92;
  object-fit:cover;
}

  .col3ligne1 {
    width: 220px;padding-top: 5px;text-align: center;
}
  .ligne2PA{
  padding: 5px;
display: flex;
justify-content: space-around;}

  .part1{width: 250px;
  height: 70px;text-align: center;}
  
  .part1 a{font-size: 9px;
  text-transform: uppercase;}
  
  .infos{
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
font-size : 11px;  
font-family: verdana;
color: #84846c;
width: 460px;
height: 60px;
text-align: justify;
padding: 5px;
overflow: auto; line-height: 11px;
      position: relative;
    left: 3px;}
  .blocpa select {
width: 200px;
height: 23px;
background-color: #E8E7DE;
border: 1px solid #e6e6e2;
color: #84846c;
 
}
  
.quote-fiche-presinfos {
    color: #730701;
    display: inline;
    font-family: Lato, serif;
    font-size: 10px;
    font-weight: 500;
    margin-top: -10px;
    text-transform: uppercase;
}  
</style>
</head>
    <body>
<div class="blocpa"><div class="blocbienvenue">Bienvenue sur Forum</div>
<div class="ligne1PA">
<div class="ligneinterne">
<div class="lienspa">
<a href="xx" target="_blank">Règlement</a> | <a href="xx" target="_blank">Bottin</a> | <a href="xx" target="_blank">Groupes</a> | <a href="x" target="_blank">Invités et Partenariats</a> | <a href="xx" target="_blank">Jeux</a>                                                                                                                                                                                                                                                                                            
</div>
<div class="ligneinterne1">
<div class="contexte">
                                                                                                                                                                                                                                                                                              <span class="titre">CONTEXTE</span> écrire ici le contexte.                                                                                                                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
 <div class="event">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
 <div class="eventimg">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   <img src="https://zupimages.net/up/21/04/vzbp.png" style="width:205px; height: 135px" />                                        
 <div>
                                     <span class="titre">07/01/2021</span> Naissance de l'idée.
                          <br />
                          <span class="titre">00/00/2021</span> Ouverture du Forum.                                                                                                                  
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
 </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
 </div>
  </div>
</div>
  <div class="col3ligne1">
                                                                                                                                      
 <div class="systeme_ongletsstaff">
                                                                                                                                                                                                    
 <div class="contenu_ongletsstaff">
                                                
 <div id="contenu_onglet_staff1" class="contenu_ongletstaff">
                         <span class="pseudo">Le Corbeau -</span> <span class="fonction">Fondateur</span> <br />DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                        
 </div>
                                                                                            
 <div id="contenu_onglet_staff2" class="contenu_ongletstaff">
                        <span class="pseudo">Aelis Crawford -</span> <span class="fonction">Fondatrice</span> <br />DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                        
 </div>
                                                                                                    
 <div id="contenu_onglet_staff3" class="contenu_ongletstaff">
                         <span class="pseudo">Katherina Browns -</span> <span class="fonction">Fondatrice</span> <br /> DISPONIBLE<br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                          
 </div>
                                                                                                    
 <div id="contenu_onglet_staff4" class="contenu_ongletstaff">
                         <span class="pseudo"> Karl Godwinson -</span> <span class="fonction">Fondateur</span> <br /> DISPONIBLE <br /><a href="xx" target="_blank">profil</a> - <a href="xx" target="_blank">message</a>                                                        
 </div>
  
                                  <div class="onglets_staff">
         <span onclick="javascript:change_onglet('staff1');" id="onglet_staff1" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin410.png" /></span> <span onclick="javascript:change_onglet('staff2');" id="onglet_staff2" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin111.png" /></span> <span onclick="javascript:change_onglet('staff3');" id="onglet_staff3" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin210.png" /></span> <span onclick="javascript:change_onglet('staff4');" id="onglet_staff4" class="onglet_0 onglet"><img src="https://i.servimg.com/u/f89/20/20/82/41/admin310.png" /></span>                                                    
 </div>
 </div>
                                                  
 </div>
                                                                                                                                    
 <div class="postesvacants">
                       <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> <a target="_blank" href="xx"><img src="https://i.servimg.com/u/f89/20/20/82/41/predef12.png" /></a> </div>
                                                                                                                                    
 </div>
</div><div class="ligne2PA">
  <div class="part1">
    <select onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
TOP PARTENAIRES
</option>
<option value="http://lien_forum" target="_blank">
Nom Forum
</option>
<option value="http://lien_forum" target="_blank">
Nom Forum
</option>
</select>      
    <div>
      <a href="xxx" target="_blank">Nos partenaires</a> <span class="quote-fiche-presinfos">|</span> <a href="xx" target="_blank">Demandes</a>
    </div>
    
  </div>
  <div class="infos">
                                                                                                                                                                                                                                          <span class="titre">INFOS PRATIQUES</span> Il n'y a pas de minimum de ligne ☾ Votre Avatar doit être de                                
                               Il n'y a pas de minimum de ligne ☾ Votre Avatar doit être de                                
 <div class="quote-fiche-presinfos">
                               <strong>200 x 320</strong>                              
 </div>
                                ☾ Celui-ci n'est réservé qu'après votre fiche terminée ☾ Vous avez                                
 <div class="quote-fiche-presinfos">
                                <strong>3 JOURS</strong>                                
 </div>
                                 pour poster votre fiche et                                
 <div class="quote-fiche-presinfos">
                               <strong>7 JOURS</strong>                              
 </div>
                                pour la finaliser ☾ Le forum est administré par XXXX ☾ Le design est de XX et le code de PA par Arya                                                                                                                                                                                                                                            
 </div>
</div>
</div></body>
  <script type="text/javascript">
//<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
</script><script type="text/javascript">
        //<!--
                var anc_onglet = 'staff1';
                change_onglet(anc_onglet);
        //-->
        </script></html>
Revenir en haut
Sujets similaires

Partenaires footer

Masqué RPG-Chevalier Altered Tokyo Les mythes d'YsarillRealm EnchantedAbstract Logo WyvArtem