Once upon a time

Admin

• • • • • • • • • •

Messages : 5
Date d'inscription : 16/02/2019

CSS

Code:

/********************************************************** PAGE ACCUEIL **********************************************************/
.pa_scenari {
        width: 850px;
        background: #f9e8e1;
        margin: auto;
        padding: 1%;
        box-sizing: border-box;
        color: #84868e;
        font-family: Arial, sans-serif;
        font-size: 12px;
}

.pa_scenari::after {
        clear: both;
        display: block;
        content: "";
}

.pa_droite {
       margin: .4% 0 0;
     width: 30%;
}

.pa_milieu {
       margin: 1.2% .5% 0;
     width: 36%;
}

.pa_gauche {
     width: 33%;
}

.pa_gauche, .pa_milieu, .pa_droite {
        float: left;
}

.pa_scenari a {
     transition: .5s all;
}

/* TITRES */
/* Bienvenue */
.pa_scenari h2 {
        color: #a3939e;
        font-variant: small-caps;
        font-size: 26px;
        border: 0;
        font-family: 'Noto Sans', sans-serif;
        display: inline-block;
}

/* Autres titres */
.pa_scenari h3 {
        color: #f9e7e0;
        text-shadow: 1px 1px #000;
        text-transform: uppercase;
        font-size: 14px;
        border: 0;
     font-family: 'Noto Sans', sans-serif;
        text-align: center;
}

/* LIENS JE CHERCHE FORUM SCENARIO */
.pa_boutons {
       float: right;
     width: 40%;
}

.pa_boutons a {
        background: #676b76;
        color: #fff;
        display: inline-block;
        width: 48%;
        text-align: center;
        margin: 1%;
}

.pa_boutons a:hover {
     background: #a3939e;
}

a.pa_cherche {
        display: block;
        background: #a3939e;
        margin: auto;
        width: 150px;
}

/* STAFF */
.pa_gauche h3 {
        text-align: left;
        margin: 0 0 0 10%;
}

.bloc_staff {
        background: #676b76;
        color: #eae6e5;
        font-size: 14px;
        margin: -5% 0 0;
        padding: 5% 5% 0;
}

/* Systeme onglets */
.paonglet {
        cursor: pointer;
        display: inline-block;
        font-size: 26px;
        margin: 0;
}
               
.paonglet_1 {
     color: #a3939e;
}
         
.contenu_paonglet {
        display: none;
        height: 130px;
}

/* Image staff */
img.img_staff {
        border: 3px solid;
        float: left;
        margin: 0 10% 0 0;
}

/* Titres : Pseudo, rang */
.bloc_staff h4 {
        font-size: 20px;
        font-weight: normal;
}

.bloc_staff h5 {
        font-size: 14px;
        line-height: 1.5;
        font-weight: normal;
}

.bloc_staff h5 span {
        display: block;
        text-transform: uppercase;
}

/* Present absent */
.pa_statut {
        color: #fff;
        padding: 1%;
        display: table;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        margin: 2% 0;
}

.pa_statut.present {
       background: #bacb9d;
}

.pa_statut.absent {
     background: #f8a24f;
}

/* Liens staff */
.contenu_paonglet a {
       color: #fff;
}

.contenu_paonglet a:hover {
       color: #a3939e;
     background: none;
}

/* A LHONNEUR */
.pa_honneur {
        background: #a3939e;
        padding: 2%;
        text-align: center;
        margin: 2% 0 0;
}

.pa_honneur h3 {
        text-align: center;
        margin: 0;
}

.pa_honneur div {
        display: inline-block;
        margin: 0 2% 2%;
}

.pa_honneur span {
        display: block;
        color: #000;
        text-align: left;
}

/* INTRODUCTION */
.pa_introduction {
        background: #faf1ee;
        height: 183px;
        width: 100%;
        padding: 2%;
        box-sizing: border-box;
        overflow: auto;
        text-align: justify;
}

/* DERNIERS AJOUTS */
.pa_news {
        background: #676b76;
        width: 100%;
        height: 133px;
        overflow: auto;
        padding: 2%;
        box-sizing: border-box;
        margin: 1.9% 0 0;
        color: #f9e6df;
}

.pa_news h3 {
        text-align: left;
        margin: 0;
}

.pa_news div {
        margin: 0 5% 4%;
        line-height: 1;
}

.pa_news div a {
        color: #f9e6df;
        font-variant: small-caps;
}

.pa_news div a:hover {
       color: #a3939e;
}

.pa_news div span {
       font-style: italic;
     font-size: 10px;
}

/* PARTENAIRES */
.pa_partenaires {
        background: #a3939e;
        padding: 0 5% 2%;
        box-sizing: border-box;
        text-align: center;
        height: 183px;
}

.pa_partenaires h3 {
       padding: 2% 0 0;
}

/* Bulles */
.pa_infobulle {
       display: inline-block;
     margin: 1%;
}

.pa_infobulle > div {
        margin: 0 0 0 -57px;
        opacity: 0;
        position: absolute;
        transform: scale(0.3) rotate(-45deg);
        transition: all .3s linear;
        visibility: hidden;
}

.pa_infobulle > div::before {
        border: 5px solid transparent;
        border-bottom: 10px solid #f1ded9;
        content: "";
        width: 0;
        top: -10px;
        position: absolute;
        left: 46.5%;
}

.pa_infobulle:hover > div {
        opacity: 1;
        visibility: visible;
        transform: scale(1) rotate(0deg);
}

.pa_contenu_bulle {
        background: #f1ded9;
        padding: 2%;
        text-align: center;
        width: 150px;
}

.pa_contenu_bulle {
        background: #f1ded9;
        padding: 2%;
        text-align: center;
        width: 140px;
        margin-top: 5px;
        font-size: 10px;
}

.pa_contenu_bulle h4 {
       text-transform: uppercase;
}

/* LIENS UTILES */
.liens_rapides a {
        color: #84868e;
        background: #fff;
        display: block;
        text-align: center;
        margin: 2% auto 0;
        padding: .7% 0;
        width: 90%;
}

.liens_rapides a:hover {
     color: #f9e6df;
     background: #a3939e;
}

a.scenari_credits {
        text-align: right;
        display: block;
        font-style: italic;
        text-transform: lowercase;
        letter-spacing: -1px;
        font-size: 10px;
        margin: 0 2% 0 0;
        color: #b3afaf;
}

HTLM

Code:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans" />
<div class="pa_scenari">
                    
   <h2>
                Bienvenue dans la Scénarii'thèque         
   </h2>
                    
   <div class="pa_boutons">
              <a href="#" class="pa_cherche">Je cherche</a> <a target="_blank" href="#">Un forum</a><a target="_blank" href="#">Un scénario</a>         
   </div>
                    
   <div class="pa_gauche">
                       
      <h3>
                   Le staff         
      </h3>
                       
      <div class="bloc_staff">
                   <script type="text/javascript">
               //<!--
                       function change_paonglet(name)
                       {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                       }
               //-->
               </script>                                           
         <div class="contenu_paonglets">
                                               
            <div id="contenu_paonglet_staff1" class="contenu_paonglet">
                         <img class="img_staff" alt="" src="https://i.imgur.com/tnl9PGH.png" />         
               <h4>
                            K.         
               </h4>
                                
               <h5>
                            <span>Fondateur,</span>No-life & Jovial         
               </h5>
                                
               <div class="pa_statut present">
                            Présent         
               </div><a href="#">MP</a> - <a href="#">Profil</a> - <a href="#">Journal</a>         
            </div>
                                                 
            <div id="contenu_paonglet_staff2" class="contenu_paonglet">
                         <img class="img_staff" alt="" src="https://i.imgur.com/tnl9PGH.png" />         
               <h4>
                            K.         
               </h4>
                                
               <h5>
                            <span>Autre</span>No-life & Jovial         
               </h5>
                                
               <div class="pa_statut absent">
                            Absent         
               </div><a href="#">MP</a> - <a href="#">Profil</a> - <a href="#">Journal</a>         
            </div>
                                                 
            <div id="contenu_paonglet_staff3" class="contenu_paonglet">
                         <img class="img_staff" alt="" src="https://i.imgur.com/tnl9PGH.png" />         
               <h4>
                            K.         
               </h4>
                                
               <h5>
                            <span>Fondateur,</span>No-life & Jovial         
               </h5>
                                
               <div class="pa_statut present">
                            Présent         
               </div><a href="#">MP</a> - <a href="#">Profil</a> - <a href="#">Journal</a>         
            </div>
                             
            <div id="contenu_paonglet_staff4" class="contenu_paonglet">
                         <img class="img_staff" alt="" src="https://i.imgur.com/tnl9PGH.png" />         
               <h4>
                            K.         
               </h4>
                                
               <h5>
                            <span>Autre</span>No-life & Jovial         
               </h5>
                                
               <div class="pa_statut absent">
                            Absent         
               </div><a href="#">MP</a> - <a href="#">Profil</a> - <a href="#">Journal</a>         
            </div>
                                                 
            <div id="contenu_paonglet_staff5" class="contenu_paonglet">
                         <img class="img_staff" alt="" src="https://i.imgur.com/tnl9PGH.png" />         
               <h4>
                            K.         
               </h4>
                                
               <h5>
                            <span>Fondateur,</span>No-life & Jovial         
               </h5>
                                
               <div class="pa_statut present">
                            Présent         
               </div><a href="#">MP</a> - <a href="#">Profil</a> - <a href="#">Journal</a>         
            </div>
                                         
         </div>
                                      
         <div class="paonglets">
                                      <span onmouseover="javascript:change_paonglet('staff1');" id="paonglet_staff1" class="paonglet_0 paonglet">                          •                    </span>                                    <span onmouseover="javascript:change_paonglet('staff2');" id="paonglet_staff2" class="paonglet_0 paonglet">                          •                    </span>                                    <span onmouseover="javascript:change_paonglet('staff3');" id="paonglet_staff3" class="paonglet_0 paonglet">                          •                    </span> <span onmouseover="javascript:change_paonglet('staff4');" id="paonglet_staff4" class="paonglet_0 paonglet">                          •                    </span>                                    <span onmouseover="javascript:change_paonglet('staff5');" id="paonglet_staff5" class="paonglet_0 paonglet">                          •                    </span>         
         </div>
                               <script type="text/javascript">
               //<!--
                    var anc_paonglet = 'staff1';
                    change_paonglet(anc_paonglet);
               //-->
               </script>         
      </div>
                       
      <div class="pa_honneur">
                          
         <h3>
                      A l'honneur         
         </h3>
                          
         <div>
                      <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/rQld73r.jpg" /></a><span>Nom du forum</span>         
         </div>
                          
         <div>
                      <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/WtrdOab.jpg" /></a><span>Fiche</span>         
         </div>
                          
         <div>
                      <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/WtrdOab.jpg" /></a><span>Fiche</span>         
         </div>
                          
      </div>
                       
   </div>
                    
   <div class="pa_milieu">
                       
      <div class="pa_introduction">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed lobortis elit. Nullam ac nibh suscipit ligula sollicitudin commodo nec a velit. Vivamus in luctus diam. Nullam sodales porta est, scelerisque luctus eros. Proin quis ante justo. Aliquam scelerisque venenatis purus, ac egestas nisl consectetur in. Nulla at iaculis libero. Vestibulum tincidunt, lectus sed dictum interdum, sem est sagittis odio, a varius nulla justo sed tellus. Cras placerat lorem sapien, et porta neque tempor sed. Suspendisse vitae augue lobortis, tempus mauris ut, luctus justo. Morbi nec ante volutpat mi consectetur malesuada. Donec ac tempus magna. Pellentesque in mauris a dui blandit tempus. Integer quis tempor augue. Cras ut pellentesque mi. Aliquam erat volutpat. Aliquam maximus nisl non mauris tristique molestie. In hac habitasse platea dictumst. Nunc rutrum, turpis sit amet dapibus fringilla, felis velit gravida nunc, quis cursus diam erat quis tellus. Nulla lacus nibh, fringilla at viverra interdum, lacinia ac nisi. Nullam eget bibendum justo. Etiam vehicula commodo nisl vel blandit. Integer eget nulla id nisi porta iaculis sit amet ut nulla. Maecenas aliquet consectetur risus eu fringilla. Mauris mattis accumsan faucibus.         
      </div>
                       
      <div class="pa_news">
                          
         <h3>
                      Derniers ajouts         
         </h3>
                          
         <div>
                      <a href="#">Prénom Nom</a> sur City <span>(28 ans, archiviste marrant)</span>         
         </div>
                          
         <div>
                      <a href="#">Prénom Nom</a> sur City <span>(28 ans, archiviste marrant)</span>         
         </div>
                          
         <div>
                      <a href="#">Prénom Nom</a> sur City <span>(28 ans, archiviste marrant)</span>         
         </div>
                          
         <div>
                      <a href="#">Prénom Nom</a> sur City <span>(28 ans, archiviste marrant)</span>         
         </div>
                          
         <div>
                      Prénom Nom sur City <span>(28 ans, archiviste marrant)</span>         
         </div>
                          
         <div>
                      Prénom Nom sur City <span>(28 ans, archiviste marrant)</span>         
         </div>
                          
      </div>
                       
   </div>
                    
   <div class="pa_droite">
                       
      <div class="pa_partenaires">
                          
         <h3>
                      Partenariats         
         </h3>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <h3>
                      Nos réseaux         
         </h3>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
         <div class="pa_infobulle">
                              <img src="https://i.imgur.com/vOmEsIr.jpg" />                   
            <div>
                                                
               <div class="pa_contenu_bulle">
                                                       
                  <h4>
                               Nom forum         
                  </h4>
                            city - 3 000 mots - 1rp/mois <a target="_blank" href="#"><img alt="" src="https://i.imgur.com/dqq0Qvn.png" /></a>         
               </div>
                                  
            </div>
                               
         </div>
                          
      </div>
                       
      <div class="liens_rapides">
                   <a href="#">Lien utile</a><a href="#">Lien utile</a><a href="#">Lien utile</a><a href="#">Lien utile</a><a href="#">Lien utile</a>         
      </div>
                       
   </div>
</div><a class="scenari_credits" target="_blank" href="http://ls-halloween.fr/">Halloween</a>