<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One" />       
<div class="pa_shoto">
                                                                                                                                                          
   <div class="contenu_barre">
                                                                                                            Il fait beau à Fodlan, nous sommes en été 1236                                                                                                         
   </div>
                                                                                                                                                                                                                              
   <div class="contenu_pa_un">
                                                                                                      <img src="https://www.zupimages.net/up/20/13/1m1n.bmp" /><img src="https://www.zupimages.net/up/20/13/ou43.bmp" />                        <span style="color: #58b8b6;">☾☾☾☾...</span>L’année impériale 1186 marqua à tout jamais l’Histoire de Fódlan par la fin d’une guerre sanglante impulsée par l’Empire contre l’Eglise de Seiros et ses alliés : le Royaume de Faerghus d’un côté et l’Alliance de Leicester d’un autre, cette dernière déchirée par des querelles intestines entre les différentes puissances seigneuriales qui la composait. Pendant presque six longues années, les trois leaders des grandes nations firent valoir leurs idéaux d’un nouvel avenir qu’ils voyaient pour ce continent qu’était le leur. <a href="https://pathofrebirth.forumactif.com/t1-l-histoire-de-fodlan"> suite ici </a>                                                                                                               
   </div>
                                                                                                                                                                                                                                                  
   <div class="contenu_pa_deux">
                                                                                                                                                                                       
      <div class="info_titre">
                                                                                                 ✲ Concernant le forum ✲                                                                                           
      </div>
                                                                                                     
      <div class="petit_info_forum">
                                                                                                   Ⓒ Le forum a été créé en 20xx par (admin et admin).<br />Ⓒ Il est administré par (admin et admin).<br />Ⓒ Toi ! Avant de t'inscrire, pense à cliquer ci-dessous sur les pvs et scénarios des membres ! Ils n'attendent que toi ♆.♆ <br />Ⓒ petite info<br />Ⓒ petite info                                                       
      </div>
                                                                                                             
      <div class="info_titre">
                                                                                                 ✲ Tops amis ✲                                                                                           
      </div><a href=""><img src="https://www.zupimages.net/up/18/24/hsyy.png" /></a><a href=""><img src="https://www.zupimages.net/up/18/24/hsyy.png" /></a>            <a href=""> + de partenaires</a> | <a href=""> Demandes</a>                                                                                                                                                                                                                   
   </div>
                                                                                                                                                                                                                                                
   <div class="contenu_pa_deux">
                                                                                                                                                                                             
      <div class="info_titre">
                                                                                                 ✲ Liens utiles ✲                                                                                           
      </div>
                                                                                                     
      <div class="menu_forum">
                                                                                 <a href="https://pathofrebirth.forumactif.com/t3-reglement-du-forum"> Réglement</a>                                                                       
      </div>
                                                                                                                                                                           
      <div class="menu_forum">
                                                                                 <a href="https://pathofrebirth.forumactif.com/t1-l-histoire-de-fodlan"> Contexte</a>                                                                       
      </div>
                                                                                                                                                       
      <div class="menu_forum">
                                                                                 <a href="https://pathofrebirth.forumactif.com/t9-les-groupes">Les Groupes</a>                                                                       
      </div>
                                                                                                                                                       
      <div class="menu_forum">
                                                                                   <a href="https://pathofrebirth.forumactif.com/t7-les-emblemes"> Les emblèmes</a>                                                                         
      </div>
                                                                                                                                                       
      <div class="menu_forum">
                                                                                   <a href="https://pathofrebirth.forumactif.com/t27-bottins-des-avatars"> Bottin des avatars</a>                                                                         
      </div>
                                                                                                                                                       
      <div class="menu_forum">
                                                                                   <a href="https://pathofrebirth.forumactif.com/t29-bottin-des-metiers-fonctions"> Bottin des métiers</a>                                                                         
      </div>
                                                                                                                                                       
      <div class="menu_forum">
                                                                                   <a href="https://pathofrebirth.forumactif.com/t8-les-classes-jouables"> Bottin des classes</a>                                                                         
      </div>
                                                                                                                                                               
      <div class="menu_forum">
                                                                                   <a href="https://pathofrebirth.forumactif.com/t11-la-boutique"> La boutique</a>                                                                         
      </div>
                                                                                                                                                       
      <div class="menu_forum">
                                                                                   <a href="https://pathofrebirth.forumactif.com/f34-partenariats"> Partenariat</a>                                                                         
      </div>
                                                                                                                                                                                                         
   </div>
                                                                                                                                                                                                                                                                                                                                
   <div class="contenu_pa_trois">
                                                                                                                      <img src="https://i.servimg.com/u/f94/20/13/92/71/iconas10.png" />                                                                                                         
      <div class="p">
                                                                                                                   Nom <br />  Prénom <br />  Groupe <br />  <a href=""> PV </a>                                                                                                         
      </div>
                                                                                                                                                                                                                             
   </div>
                                                                                                                                                                                                                                                
   <div class="contenu_pa_trois">
                                                                                                                                              <img src="https://www.zupimages.net/up/20/07/gnje.png" />                                                                                                         
      <div class="p">
                                                                                                                   Nom <br />  Prénom <br />  Groupe <br /><a href=""> PV </a>                                                                                                         
      </div>
                                                                                                                                                                                                                         
   </div>
                                                                                                                                                                                                                                          
   <div class="contenu_pa_trois">
                                                                                                                                              <img src="https://www.zupimages.net/up/20/07/b26l.bmp" />                                                                                                         
      <div class="p">
                                                                                                                   Nom <br />  Prénom <br />  Groupe <br /> <a href=""> PV </a>                                                                                                           
      </div>
                                                                                                                                                                                                                         
   </div>
                                                                                                                                                                                                                                                
   <div class="contenu_pa_trois">
                                                                                                                                              <img src="https://www.zupimages.net/up/20/07/1pbz.bmp" />                                                                                                         
      <div class="p">
                                                                                                                                                                                                               Nom <br />  Prénom <br />  Groupe <br /> <a href=""> PV </a>                                                                                                                     
      </div>
                                                                                                                                                                                                                         
   </div>
                                                                                                                                                                                                                                          
   <div class="contenu_pa_trois">
                                                                                                                                              <img src="https://www.zupimages.net/up/20/07/yrx1.bmp" />                                                                                                         
      <div class="p">
                                                                                                                                                                                                                 Nom <br />  Prénom <br />  Groupe <br /> <a href=""> PV </a>                                                                                                                     
      </div>
                                                                                                                                                                                                                         
   </div>
                                                                                                                                                                                                                                                
   <div class="contenu_pa_trois">
                                                                                                                                              <img src="https://avatarfiles.alphacoders.com/147/thumb-147517.jpg" />                                                                                                         
      <div class="p">
                                                                                                                                                                                                               Nom <br />  Prénom <br />  Groupe <br /> <a href=""> PV </a>                                                                                                                     
      </div>
                                                                                                                                                                                                                         
   </div>
                                                                                                                                                                                                                                                
   <div class="contenu_pa_quatre">
                                                                                                                                           
      <div class="info_titre">
                                                                                                 ✲ Concernant le rpg ✲                                                                                           
      </div>
                                                                                                                                       
      <div class="crédit_forum">
                                                                                               Ⓒ<em> Codage de la page d’accueil</em> créé par <strong>Folly Beach</strong>, merci de respecter son travail et de ne pas le reproduire. Ⓒ <em>Les gifs + icons</em> ont été créés exclusivement<strong> pour la pa</strong>. ⒸPage d’accueil 2019 by Folly Beach. <br />en libre-service sur  <a href="http://www.epicode-entraide.com/">ⒸEPICODE</a> <br /> THERE'S A<br />AN ORIGINAL FORUM ROLEPLAY                             
      </div>
                                                                                                                       
      <div class="petit_info_forum">
                                                                 ∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />∞ petite info:<span style="color: #58b8b6;">☾☾☾☾...</span><br />                                                       
      </div>
                                                                                                                                                                                                                             
   </div>
                                                                                                                                                                                                                                        
   <div class="contenu_pa_quatre">
                                                        <img src="https://www.zupimages.net/up/20/13/tyvr.bmp" />                                                                       
      <div class="info_titre">
                                                                                                 ✲ INTRIGUE N°1 ✲                                                                                           
      </div>
                                                                           
      <div class="petit_info_forum">
                                     Description de l'intrigue                             
      </div>
                                                                                                                                                                                                                   
   </div>
                                                                                                                                                                                                                                                
   <div class="contenu_pa_adm">
                                                                                                                                                                                       
      <div class="info_titre">
                                                                                                 ✲ L'administration du forum ✲                                                                                           
      </div>
                                                              <img src="https://www.zupimages.net/up/20/13/ajg0.bmp" />                               
      <div class="staff">
                                                                            
         <div class="p">
                                          Gabriel L. Blaiddyd                           
         </div>
                                                            
      </div>
                                                    <img src="https://www.zupimages.net/up/20/13/n9w9.bmp" />                               
      <div class="staff">
                                                                      
         <div class="p">
                                          Judith R. Galatea                           
         </div>
                                                                      
      </div>
                                    <img src="https://www.zupimages.net/up/20/13/h0tq.bmp" />                               
      <div class="staff">
                                                          
         <div class="p">
                                          Erika Von Arundel                           
         </div>
                                                            
      </div>
                                                                                                                                                                                                                       
   </div>
                                      
</div>
 

/***************** pa 2019 de (c) Hanyoyurikinpourepicode ********************/
        .pa_shoto{
        justify-content: space-around; 
        box-shadow: 0 0 2px #666;
        align-self: auto ;
        flex-flow: row wrap;
        flex-wrap: wrap;   
        display: flex;
        width: 753px;
        background:#f2f2f2;
        margin-bottom:30px;
        padding:10px;}

        .contenu_barre{
        width:727px;
        height: 50px;
        font-family: 'Fjalla One', sans-serif;
        font-size:34px;
        text-align:left;
        text-transform:uppercase;
        color:#fff;
        padding: 10px;
        background:#7a7d93;
        margin-bottom:2px;}

        .contenu_pa_adm{
        width: 275px;
        text-align:justify;
        line-height:12px;
        height: 190px;
        padding: 10px;
        background:#fff;
        margin:2px;}


        .contenu_pa_un{
        width: 275px;
        text-align:justify;
        line-height:12px;
        height: 190px;
        padding: 10px;
        background:#fff;
        margin:2px;}

        .contenu_pa_un img{
        filter: contrast(100%); 
        width:129px;
        height:70px;
        margin:1px;
        padding:2px;
        border: 1px solid #f1f1f1;
        -moz-transition:all 0.8s;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;}

        .contenu_pa_un img:hover{
        opacity:0.7;}


        .contenu_pa_deux{
        width: 200px;
        text-align:;
        line-height:12px;
        height: 190px;
        padding: 10px;
        background:#fff;
        margin:2px;}

        .contenu_pa_deux hr{
        border: 1px solid #fff}

        .contenu_pa_deux img{
        margin:2px;
        padding:2px;
        border: 1px solid #59c5bc;
        width:88px;
        height:31px;}

        .info_titre{
        background-color: #f1f1f1;
        color:#4a4e50;
        padding:4px;
        text-align:center;
        margin-bottom:4px;
        display: block; 
        font-family: 'Fjalla One', sans-serif;
        font-size:14px;
        text-transform:uppercase;
        letter-spacing: 1px;}

        .crédit_forum{
        font-size:10px;
        text-align:justify; 
        height:60px;
        background:#f1f1f1;
        color:#111;
        margin:2;
        padding:2px;
        overflow:auto;}

        .petit_info_forum{
        text-align:justify;
        font-size:10px;
        height:90px;
        background:#f1f1f1;
        color:#111;
        margin:2;
        padding:2px;
        overflow:auto;}

        .menu_forum a{
        background:#cce5e3;
        color:#fff;
        font-style:italic;
        margin:1px;
        padding:2px;
        font-size:10px;
        display:block;
        height:14px;
        text-align:center;
        text-transform:uppercase;}

        .menu_forum a:hover{
        margin-left:15px; 
        background:#f1f1f1;
        color:#111;
        -moz-transition:all 0.8s;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;} 

        .contenu_pa_trois{
        font-family: 'Fjalla One', sans-serif;
        font-size:14px;
        overflow:hidden; 
        position: relative;
        width: 100px;
        height: 100px;
        color:#58b8b6;
        padding: 10px;
        text-align:justify;
        font-style:italic;
        text-transform:uppercase;
        line-height:16px;
        background:#fff;
        margin:2px;
        moz-transition: all 1.7s ease-in-out;
        -webkit-transition: all 1.7s ease-in-out;
        transition: all 1.7s ease-in-out; }


        .p{padding-top:10px}

        .contenu_pa_trois img{
        width:100px;
        height:100px;
        margin-left:0px;
        position:absolute;
        moz-transition: all 1.7s ease-in-out;
        -webkit-transition: all 1.7s ease-in-out;
        transition: all 1.7s ease-in-out; }


        .contenu_pa_trois:hover img{
        opacity:0;
        transform: translateX(-110%);
        -webkit-transform: translateX(-110%);
        -moz-transition: translateX(-110%);}

        .contenu_pa_quatre{
        width: 200px;
        text-align:justify;
        line-height:12px; 
        height: 190px;
        padding: 10px;
        background:#fff;
        margin:2px;
        position:relative;
        -moz-transition:all 0.8s;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;
        z-index: 5}

        .contenu_pa_quatre:hover{
        transition: all 0.7s ease-in-out 0s;
        border: 4px solid #cce5e3);
        box-shadow: 200px 0 0 #cce5e3 inset,-200px 0 0 #cce5e3 inset;
        transition: all 1.5s ease 0s;}
         
         
        .contenu_pa_quatre img{
        position:absolute; 
        width:200px;
        height:190px;
        -moz-transition:all 0.8s;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;}

        .contenu_pa_quatre img:hover{
        opacity:0;
        -moz-transition:all 0.8s;
        -webkit-transition: all 0.8s;
        transition: all 0.8s;}

        .staff{
        height:55px;
        width:275px;
        font-family: 'Fjalla One', sans-serif;
        font-size:14px;
        text-align:center;
        color:#4a4e50;
        left:-1px;
        margin:1px;
        opacity: 0;
        position:relative ;
        transition:all 0.9s;
        z-index: 5}
         
        .contenu_pa_adm img{
        position:absolute;
        height:55px;
        width:275px;}

        .staff:hover{
        opacity:1;
        transition: all 0.7s ease-in-out 0s;
        border: 4px solid #fff);
        box-shadow: 200px 0 0 #fff inset,
        -200px 0 0 #fff inset;
        transition: all 1.5s ease 0s;}