feuille de style CSS FEARWOOD

Aller en bas

feuille de style CSS FEARWOOD

Message par Drew le Jeu 10 Jan - 10:43

Code:
/* pour régler la bordure du forum et catégories*/
#wrap {
border-radius: 10px;
{border-color:#EBADD}
}

.forabg {
border-radius: 10px;
}



.postprofile img {
    max-width: 85%;
}

dl.annonce {background-color:#EBEBEA;} /* Modifie la couleur de fond des annonces */
dl.Note {background-color:#EBEBEA;} /* Modifie la couleur de fond des Note */
dl.Annonce globale {background-color:#EBEBEA;} /* Modifie la couleur de fond des annonces globale */

a {
        -moz-transition:color 2s; /* Mozilla Firefox */
        -webkit-transition:color 2s; /* Safari et Google Chrome */
        -o-transition:color 2s; /* Opera */
        transition:color 2s;
    }

a:hover {
        color:#EB010A;
    }

/*cadre du profil des messages*/
.postprofile {
  background: #E1E1E1;  /*fond*/
  padding: 5px 1px 5px 0;  /*marge intérieure*/
  border: 3px solid #DEDEDE;  /*bordure*/
  border-radius: 15px;  /*arrondi*/
  box-shadow: 2px 2px 5px #000;  /*ombre*/
}

.postprofile {text-align: center;}

.postprofile dt img {
    border: 0px solid;
}
.postprofile dt img {
    border: 0px solid #FFFFFF;
}

.postprofile img {
    margin-bottom: 5px;
}

.postdetails.poster-profile img {
  width:200px;
  display:block;
  max-width: 195px;
  padding: 0px;
}





.OLD {
width:800px; height:430px; margin:auto; margin-bottom:50px; line-height:auto;
  background-color:#1919;}
   
 .postprofile img {
    max-width: 85%;
}

dl.annonce {background-color:#EBEBEA;} /* Modifie la couleur de fond des annonces */
dl.Note {background-color:#EBEBEA;} /* Modifie la couleur de fond des Note */
dl.Annonce globale {background-color:#EBEBEA;} /* Modifie la couleur de fond des annonces globale */

a {
        -moz-transition:color 2s; /* Mozilla Firefox */
        -webkit-transition:color 2s; /* Safari et Google Chrome */
        -o-transition:color 2s; /* Opera */
        transition:color 2s;
    }

a:hover {
        color:#EB010A;
    }

/*cadre du profil des messages*/
.postprofile {
  background: #E1E1E1;  /*fond*/
  padding: 5px 1px 5px 0;  /*marge intérieure*/
  border: 3px solid #DEDEDE;  /*bordure*/
  border-radius: 15px;  /*arrondi*/
  box-shadow: 2px 2px 5px #000;  /*ombre*/
}

.postprofile {text-align: center;}

.postprofile dt img {
    border: 1px solid;
}
.postprofile dt img {
    border: 1px solid #FFFFFF;
}

.postprofile img {
    margin-bottom: 5px;
}

.postdetails.poster-profile img {
  width:200px;
  display:block;
  max-width: 195px;
  padding: 1px;
}





/* séparation */





/* codes ci dessous pour modifier le menu navigation */
.navbar ul{  /*supprime la barre de séparation du menu de navigation*/
border-bottom:none;
}
.navbar{  /*modifier la couleur du fond du menu navigation*/
background-color: #EBEBEA;
}
#search-box{  /*supprimer la zone de recherche du menu navigation */
visibility:hidden;
}
#search-box{  /*réduire la hauteur de la zone recherche du menu de navigation */
height:1px;
visibility:hidden;
}



#wrap {
border-radius: 10px;

}

.forabg {
border-radius: 10px;
}
 
  /* codes ci dessous pour modifier la page d'accueil */

.bloc {
  margin:auto;
   }

.membres, .contexte, .liens {
   display: inline-block;
   margin:auto;
     float:left;
   }
 
.membres {
   width: 32%;
     margin-left:2px;
   }
 
.contexte {
   width: 40%;
   background:#EBEADD;
     margin-left:20px;
   }
 
.liens {
   width: 20%;
   background:#EBEADD;
   padding:18px;
     margin-left:15px;
   }
 
.tousstaff { 
   padding:18px; 
   background:#0F1F3D;
     border-radius:10% 0;
   }
 
.staff {
   display:inline-block;
   margin:5px;
   height:70px;
   width:70px;
   line-height:14px;
   border:1px #EBEADD solid;
   background:#EBEADD;
   color:#0F1F3D; 
   text-align:center;
   font-weight:bold;
   border-radius:50%;
   }
 
.staff img{
   position:absolute;
   margin-left:-35px;
   height:70px;
   width:70px;
   border-radius:50%;
   }
 
.staff:hover img{
   transform:scale(0);
   -webkit-transform:scale(0);
      }
 
.staff span{
   display:block;
   padding:5px 0;
   width:100%;
   font-size:11px;
   padding-top:30%
   }
 
.tousstaff h2{
   color:#EBEADD;
   text-align:center;
   font-weight: bold; 
   }

.actu h2{
   color:#EBEADD;
   text-align:center;
   font-weight: bold; 
   }
 
#mdmt{
   color:#0F1F3D;
   text-align:center;
   font-weight: bold; 
   }
 
#ctxt{
   color:#0F1F3D;
   text-align:center;
   font-weight: bold;
   padding:14px;
   }
 
.mdms { 
   padding:18px; 
   background:#EBEADD;
   }

.mdmi{
     margin-left: 42px;
}
 
.actu { 
   padding:18px; 
   background:#0F1F3D;
   }
 
.mdm {
   display:inline-block;
   margin:5px;
   height:70px;
   width:70px;
   line-height:14px;
   border:1px #0F1F3D solid;
   background:#0F1F3D;
   color:#EBEADD;
   text-align:center;
   font-weight:bold;
   border-radius:50%;
   }
 
.mdm img{
   position:absolute;
   margin-left:-35px;
   height:70px;
   width:px;
   border-radius:50%;
   }
 
.mdm:hover img{
   transform:scale(0);
   -webkit-transform:scale(0);
   }
 
.mdm span{
   display:block;
   padding:5px 0;
   width:100%;
   font-size:11px;
   letter-spacing:2px;
   padding-top:30%
   }
 
#myButton {
   background-color:#0F1F3D;
   -moz-border-radius:25px;
   -webkit-border-radius:25px;
   border-radius:25px;
   border:2px solid #0F1F3D;
   display:inline-block;
   cursor:pointer;
   color:#EBEADD;
   font-weight:bold;
   padding:15px 20px;
   text-decoration:none;
   text-shadow:0px 0px 0px #2f6627;
   display:block;
   text-align:center;
   margin:5px;
   }
 
#myButton:hover {
   background-color:#2d4675;
   }
 
#myButton:active {
   position:relative;
   top:1px;
      }
 
.partenaires{
   width:75%;
   margin:auto;
   }
 
.contexte a {
   padding:20px;
   }

.contexte a:hover {
   padding:20px;
     color:#2d4675;
   }

.contexte p {
     padding-left:20px;
     padding-top:8px;
     padding-bottom:6px;
}
 
marquee{
   margin-top:15px;
   }

.actu li {
     color:#EBEADD;
}

.actu a {
     color:#EBEADD;
}

.dterm{
  margin-left:20px;
  margin-top:24px;
}

.icon{
  border-bottom: 2px solid #ADADAD;
}
avatar
Drew
♠ PandaAdmin

Messages : 603
Localisation : ʕ •ᴥ•ʔ

Voir le profil de l'utilisateur http://deep-ink.forums-actifs.com

Revenir en haut Aller en bas

Re: feuille de style CSS FEARWOOD

Message par Drew le Jeu 10 Jan - 10:44

Code:
<div class="bloc">
                                                                                
   <div class="membres">
                                                                                   
      <div class="tousstaff">
                                                                                      
         <h2>
                                                  Le Staff                                     
         </h2>
                                                                                      
         <div class="staff">
                                                    <img src="https://www.zupimages.net/up/17/30/zsgo.bmp" alt="Emily" /> <span>Emily Admin</span>                               
         </div>
                                                                                      
         <div class="staff">
                                                    <img src="https://www.zupimages.net/up/17/30/nf3i.bmp" alt="Derek" /> <span>Derek Admin</span>                               
         </div>
                                                                                      
         <div class="staff">
                                                    <img src="https://i.skyrock.net/6163/77956163/pics/photo_77956163_1.png" alt="Lia" /> <span>Lia <br />          Admin</span>                               
         </div>
                                                                                      
         <div class="staff">
                                                    <img src="https://www.zupimages.net/up/17/30/wb50.bmp" alt="Ayane" /> <span>Ayane Admin</span>                               
         </div>
                                                                                      
         <div class="staff">
                                                    <img src="https://www.zupimages.net/up/17/30/380y.bmp" alt="Nihale" /> <span>Nihale Admin</span>                               
         </div>
                                                                                      
         <div class="staff">
                                                    <img src="https://www.zupimages.net/up/17/30/erdz.bmp" alt="Nina" /> <span>Nina Graphiste</span>                                       
         </div>
                                                                                      
         <div class="staff">
                                                    <img src="https://www.zupimages.net/up/17/30/loaf.bmp" alt="SamO" /> <span>Sam O. Graphiste</span>                                       
         </div>
                                                                                      
         <div class="staff">
                                                    <img src="https://www.zupimages.net/up/17/30/xmlg.bmp" alt="SamT" /> <span>Sam T. Animateur</span>                                       
         </div>
                                                                                      
      </div>
                                                                                   
      <div class="mdms">
                                                    
         <div class="mdmi">
                                                                                       
            <div class="mdm">
                                                       <img src="https://www.zupimages.net/up/17/45/l0ro.jpg" alt="Mdm" /> <span>Aurore</span>                                       
            </div>
                                                                                         
            <div class="mdm">
                                                       <img src="https://www.zupimages.net/up/17/45/g8um.jpg" alt="Mdm" /> <span>Sam O.</span>                                       
            </div>
                                                         
         </div>
                                                                                    
         <h2 id="mdmt">
                                                  Membres du mois                                     
         </h2>
                                                                                      
      </div>
                                                                                   
   </div>
                                                                                
   <div class="contexte">
                                                                                   
      <h2 id="ctxt">
                                               Contexte                                     
      </h2>
                                                                                   
      <p>
                                               Nous sommes en Virginie, dans la petite ville de Fearwood. Depuis longtemps, cet endroit est réputé comme calme et tranquille, on dit que c'est une petite ville où il ne se passe presque rien. Seulement, elle cache bien ses secrets. En effet, sous cet aspect serein, se cache une ville où vivent des créatures surnaturelles depuis la nuit des temps. Bien qu'il y ait des vampires, des loups garous et des sorciers un peu partout, ici la population d'êtres surnaturels est presque plus élevée que celle des humains !                                     
      </p>
                                              <a href="http://fearwood--rpg.forumactif.org/t9-contexte-du-rpg">Lire la suite ?</a> <br /> <br />                                       
      <div class="actu">
                                                                                      
         <h2>
                                                  Actualités                                     
         </h2>
                                                                                      
         <ul>
                                                                                         
            <li>
                                                     <strong>BONNE ANNÉE 2019 A TOUS !!</strong>                                   
            </li>
            
            <li>
                <strong>Recensement d'hiver <<a href="http://fearwood--rpg.forumactif.org/t755-recensement-de-fin-d-annee-2018">ICI</a>> (jusqu'au 13 janvier)</strong>
            </li>
                                                                 
         </ul>
                                                            
      </div>
                                                         
   </div>
                                                      
   <div class="liens">
                                  <br /> <a href="http://fearwood--rpg.forumactif.org/t621-le-contexte-du-rpg" id="myButton">Contexte</a> <a href="http://fearwood--rpg.forumactif.org/t620-le-reglement-du-forum" id="myButton">Règlement</a> <a href="http://fearwood--rpg.forumactif.org/t10-informations-sur-les-especes" id="myButton">Informations sur les espèces</a> <a href="http://fearwood--rpg.forumactif.org/f28-les-postes-vacants" id="myButton">Postes vacants</a> <a href="http://fearwood--rpg.forumactif.org/f16-questions-et-idees" id="myButton">Questions</a> <a href="http://fearwood--rpg.forumactif.org/f84-evenements-intrigue" id="myButton">L'intrigue</a> <a href="http://fearwood--rpg.forumactif.org/f46-partenariats" id="myButton">Partenariats</a>                                       
   </div>
                                                                                
</div>
         
<div class="partenaires">
                                                                                
   <marquee>
                                              <a href="http://beaconhillsrpg.forumpro.fr/"><img src="https://www.zupimages.net/up/15/27/4l7k.png" /></a> <a href="http://cafe-sucre.forums-actifs.net/"><img src="https://i.servimg.com/u/f39/14/90/55/59/logo_010.jpg" /></a> <a href="http://wicked-is-good.forumactif.org/"><img src="https://nsa38.casimages.com/img/2016/07/14/160714095146990004.png" /></a> <a href="http://kill-or-be-killed.forumactif.org/"><img src="https://i.servimg.com/u/f68/18/92/23/79/bouton11.png" /></a><a href="http://teenwolf-rpg.forumactif.org/"><img src="https://i.servimg.com/u/f19/14/34/47/24/bouton11.gif" /></a> <a href="http://aideen.forumactif.com/"><img src="https://redcdn.net/hpimg15/pics/22214710035.jpg" /></a>  <a target="_blank" href=""><img src="http://image.noelshack.com/fichiers/2018/12/6/1521853812-boutonsca2.png" /></a>                                   
   </marquee>
                                                                                
</div>
avatar
Drew
♠ PandaAdmin

Messages : 603
Localisation : ʕ •ᴥ•ʔ

Voir le profil de l'utilisateur http://deep-ink.forums-actifs.com

Revenir en haut Aller en bas

Re: feuille de style CSS FEARWOOD

Message par Drew le Jeu 10 Jan - 11:45

Code:
/* pour régler la bordure du forum et catégories*/
#wrap {
border-radius: 10px;
{border-color:#EBADD}
}

.forabg {
border-radius: 10px;
}



.postprofile img {
    max-width: 85%;
}

dl.annonce {background-color:#282630;} /* Modifie la couleur de fond des annonces */
dl.Note {background-color:#282630;} /* Modifie la couleur de fond des Note */
dl.Annonce globale {background-color:#282630;} /* Modifie la couleur de fond des annonces globale */
a {
        -moz-transition:color 2s; /* Mozilla Firefox */
        -webkit-transition:color 2s; /* Safari et Google Chrome */
        -o-transition:color 2s; /* Opera */
        transition:color 2s;
    }

a:hover {
        color:#EB010A;
    }

/*cadre du profil des messages*/
.postprofile {
  background: ##282630;  /*fond*/
  padding: 5px 1px 5px 0;  /*marge intérieure*/
  border: 3px solid #DEDEDE;  /*bordure*/
  border-radius: 15px;  /*arrondi*/
  box-shadow: 2px 2px 5px #000;  /*ombre*/
}

.postprofile {text-align: center;}

.postprofile dt img {
    border: 0px solid;
}
.postprofile dt img {
    border: 0px solid #FFFFFF;
}

.postprofile img {
    margin-bottom: 5px;
}

.postdetails.poster-profile img {
  width:200px;
  display:block;
  max-width: 195px;
  padding: 0px;
}





.OLD {
width:800px; height:430px; margin:auto; margin-bottom:50px; line-height:auto;
  background-color:#1919;}
   
 .postprofile img {
    max-width: 85%;
}

dl.annonce {background-color:#EBEBEA;} /* Modifie la couleur de fond des annonces */
dl.Note {background-color:#EBEBEA;} /* Modifie la couleur de fond des Note */
dl.Annonce globale {background-color:#EBEBEA;} /* Modifie la couleur de fond des annonces globale */

a {
        -moz-transition:color 2s; /* Mozilla Firefox */
        -webkit-transition:color 2s; /* Safari et Google Chrome */
        -o-transition:color 2s; /* Opera */
        transition:color 2s;
    }

a:hover {
        color:#EB010A;
    }

/*cadre du profil des messages*/
.postprofile {
  background: #E1E1E1;  /*fond*/
  padding: 5px 1px 5px 0;  /*marge intérieure*/
  border: 3px solid #DEDEDE;  /*bordure*/
  border-radius: 15px;  /*arrondi*/
  box-shadow: 2px 2px 5px #000;  /*ombre*/
}

.postprofile {text-align: center;}

.postprofile dt img {
    border: 1px solid;
}
.postprofile dt img {
    border: 1px solid #FFFFFF;
}

.postprofile img {
    margin-bottom: 5px;
}

.postdetails.poster-profile img {
  width:200px;
  display:block;
  max-width: 195px;
  padding: 1px;
}





/* séparation */





/* codes ci dessous pour modifier le menu navigation */
.navbar ul{  /*supprime la barre de séparation du menu de navigation*/
border-bottom:none;
}
.navbar{  /*modifier la couleur du fond du menu navigation*/
background-color: #EBEBEA;
}
#search-box{  /*supprimer la zone de recherche du menu navigation */
visibility:hidden;
}
#search-box{  /*réduire la hauteur de la zone recherche du menu de navigation */
height:1px;
visibility:hidden;
}



#wrap {
border-radius: 10px;

}

.forabg {
border-radius: 10px;
}
 
  /* codes ci dessous pour modifier la page d'accueil */

.bloc {
  margin:auto;
   }

.membres, .contexte, .liens {
   display: inline-block;
   margin:auto;
     float:left;
   }
 
.membres {
   width: 32%;
     margin-left:2px;
   }
 
.contexte {
   width: 40%;
   background:#282630;
     margin-left:20px;
   }
 
.liens {
   width: 20%;
   background:##282630;
   padding:18px;
     margin-left:15px;
   }
 
.tousstaff { 
   padding:18px; 
   background:#0F1F3D;
     border-radius:10% 0;
   }
 
.staff {
   display:inline-block;
   margin:5px;
   height:70px;
   width:70px;
   line-height:14px;
   border:1px #282630 solid;
   background:#282630;
   color:#0F1F3D; 
   text-align:center;
   font-weight:bold;
   border-radius:50%;
   }
 
.staff img{
   position:absolute;
   margin-left:-35px;
   height:70px;
   width:70px;
   border-radius:50%;
   }
 
.staff:hover img{
   transform:scale(0);
   -webkit-transform:scale(0);
      }
 
.staff span{
   display:block;
   padding:5px 0;
   width:100%;
   font-size:11px;
   padding-top:30%;
   }
 
.tousstaff h2{
   color:#282630;
   text-align:center;
   font-weight: bold; 
   }

.actu h2{
   color:#282630;
   text-align:center;
   font-weight: bold; 
   }
 
#mdmt{
   color:#0F1F3D;
   text-align:center;
   font-weight: bold; 
   }
 
#ctxt{
   color:#0F1F3D;
   text-align:center;
   font-weight: bold;
   padding:14px;
   }
 
.mdms { 
   padding:18px; 
   background:#282630;
   }

.mdmi{
     margin-left: 42px;
}
 
.actu { 
   padding:18px; 
   background:#0F1F3D;
   }
 
.mdm {
   display:inline-block;
   margin:5px;
   height:70px;
   width:70px;
   line-height:14px;
   border:1px #0F1F3D solid;
   background:#0F1F3D;
   color:#282630;
   text-align:center;
   font-weight:bold;
   border-radius:50%;
   }
 
.mdm img{
   position:absolute;
   margin-left:-35px;
   height:70px;
   width:px;
   border-radius:50%;
   }
 
.mdm:hover img{
   transform:scale(0);
   -webkit-transform:scale(0);
   }
 
.mdm span{
   display:block;
   padding:5px 0;
   width:100%;
   font-size:11px;
   letter-spacing:2px;
   padding-top:30%
   }
 
#myButton {
   background-color:#0F1F3D;
   -moz-border-radius:25px;
   -webkit-border-radius:25px;
   border-radius:25px;
   border:2px solid #0F1F3D;
   display:inline-block;
   cursor:pointer;
   color:#282630;
   font-weight:bold;
   padding:15px 20px;
   text-decoration:none;
   text-shadow:0px 0px 0px #2f6627;
   display:block;
   text-align:center;
   margin:5px;
   }
 
#myButton:hover {
   background-color:#2d4675;
   }
 
#myButton:active {
   position:relative;
   top:1px;
      }
 
.partenaires{
   width:75%;
   margin:auto;
   }
 
.contexte a {
   padding:20px;
   }

.contexte a:hover {
   padding:20px;
     color:#2d4675;
   }

.contexte p {
     padding-left:20px;
     padding-top:8px;
     padding-bottom:6px;
}
 
marquee{
   margin-top:15px;
   }

.actu li {
     color:#282630;
}

.actu a {
     color:#282630;
}

.dterm{
  margin-left:20px;
  margin-top:24px;
}

.icon{
  border-bottom: 2px solid #ADADAD;
}
avatar
Drew
♠ PandaAdmin

Messages : 603
Localisation : ʕ •ᴥ•ʔ

Voir le profil de l'utilisateur http://deep-ink.forums-actifs.com

Revenir en haut Aller en bas

PA

Message par Drew le Jeu 10 Jan - 23:51

Code:
<div class="bloc">
                                                                                  
   <div class="membres">
                                                                                     
      <div class="tousstaff">
                                                                                        
         <h2>
                                                    Le Staff                                       
         </h2>
                                                                                        
         <div class="staff">
                                                    <img alt="Emily" src="https://www.zupimages.net/up/17/30/zsgo.bmp" /> <span>Emily Admin</span>                                 
         </div>
                                                                                        
         <div class="staff">
                                                    <img alt="Derek" src="https://www.zupimages.net/up/17/30/nf3i.bmp" /> <span>Derek Admin</span>                                 
         </div>
                                                                                        
         <div class="staff">
                                                    <img alt="Lia" src="https://i.skyrock.net/6163/77956163/pics/photo_77956163_1.png" /> <span>Lia <br />          Admin</span>                                 
         </div>
                                                                                        
         <div class="staff">
                                                    <img alt="Ayane" src="https://www.zupimages.net/up/17/30/wb50.bmp" /> <span>Ayane Admin</span>                                 
         </div>
                                                                                        
         <div class="staff">
                                                    <img alt="Nihale" src="https://www.zupimages.net/up/17/30/380y.bmp" /> <span>Nihale Admin</span>                                 
         </div>
                                                                                        
         <div class="staff">
                                                    <img alt="Nina" src="https://www.zupimages.net/up/17/30/erdz.bmp" /> <span>Nina Graphiste</span>                                       
         </div>
                                                                                        
         <div class="staff">
                                                    <img alt="SamO" src="https://www.zupimages.net/up/17/30/loaf.bmp" /> <span>Sam O. Graphiste</span>                                       
         </div>
                                                                                        
         <div class="staff">
                                                    <img alt="SamT" src="https://www.zupimages.net/up/17/30/xmlg.bmp" /> <span>Sam T. Animateur</span>                                       
         </div>
                                                                                        
      </div>
                                                                                     
      <div class="mdms">
                                                      
         <div class="mdmi">
                                                                                         
            <div class="mdm">
                                                       <img alt="Mdm" src="https://www.zupimages.net/up/17/45/l0ro.jpg" /> <span>Aurore</span>                                       
            </div>
                                                                                           
            <div class="mdm">
                                                       <img alt="Mdm" src="https://www.zupimages.net/up/17/45/g8um.jpg" /> <span>Sam O.</span>                                       
            </div>
                                                           
         </div>
                                                                                      
         <h2 id="mdmt">
                                                    Membres du mois                                       
         </h2>
                                                                                        
      </div>
                                                                                     
   </div>
                                                                                  
   <div class="contexte">
                                                                                     
      <h2 id="ctxt">
                                                 Contexte                                       
      </h2>
                                                                                     
      <p>
                                                 Nous sommes en Virginie, dans la petite ville de Fearwood. Depuis longtemps, cet endroit est réputé comme calme et tranquille, on dit que c'est une petite ville où il ne se passe presque rien. Seulement, elle cache bien ses secrets. En effet, sous cet aspect serein, se cache une ville où vivent des créatures surnaturelles depuis la nuit des temps. Bien qu'il y ait des vampires, des loups garous et des sorciers un peu partout, ici la population d'êtres surnaturels est presque plus élevée que celle des humains !                                       
      </p>
                                                <a href="http://fearwood--rpg.forumactif.org/t9-contexte-du-rpg">Lire la suite ?</a> <br /> <br />                                       
      <div class="actu">
                                                                                        
         <h2>
                                                    Actualités                                       
         </h2>
                                                                                        
         <ul>
                                                                                           
            <li>
                                                     <strong>BONNE ANNÉE 2019 A TOUS !!</strong>                                     
            </li>
             
            <li>
                 <strong>Recensement d'hiver <<a href="http://fearwood--rpg.forumactif.org/t755-recensement-de-fin-d-annee-2018">ICI</a>> (jusqu'au 13 janvier)</strong>  EXCUSER POUR LE DÉGATS MONUMENTALE CAUSÉ AU THÈME, J'ARRANGERAI LE TOUT LE PLUS RAPIDEMENT POSSIBLE, MERCI
            </li>
                                                                   
         </ul>
                                                              
      </div>
                                                           
   </div>
                                                        
   <div class="liens">
                                  <br /> <a id="myButton" href="http://fearwood--rpg.forumactif.org/t621-le-contexte-du-rpg">Contexte</a> <a id="myButton" href="http://fearwood--rpg.forumactif.org/t620-le-reglement-du-forum">Règlement</a> <a id="myButton" href="http://fearwood--rpg.forumactif.org/t10-informations-sur-les-especes">Informations sur les espèces</a> <a id="myButton" href="http://fearwood--rpg.forumactif.org/f28-les-postes-vacants">Postes vacants</a> <a id="myButton" href="http://fearwood--rpg.forumactif.org/f16-questions-et-idees">Questions</a> <a id="myButton" href="http://fearwood--rpg.forumactif.org/f84-evenements-intrigue">L'intrigue</a> <a id="myButton" href="http://fearwood--rpg.forumactif.org/f46-partenariats">Partenariats</a>                                       
   </div>
                                                                                  
</div>
         
<div class="partenaires">
                                                                                  
   <marquee>
                                              <a href="http://beaconhillsrpg.forumpro.fr/"><img src="https://www.zupimages.net/up/15/27/4l7k.png" /></a> <a href="http://cafe-sucre.forums-actifs.net/"><img src="https://i.servimg.com/u/f39/14/90/55/59/logo_010.jpg" /></a> <a href="http://wicked-is-good.forumactif.org/"><img src="https://nsa38.casimages.com/img/2016/07/14/160714095146990004.png" /></a> <a href="http://kill-or-be-killed.forumactif.org/"><img src="https://i.servimg.com/u/f68/18/92/23/79/bouton11.png" /></a><a href="http://teenwolf-rpg.forumactif.org/"><img src="https://i.servimg.com/u/f19/14/34/47/24/bouton11.gif" /></a> <a href="http://aideen.forumactif.com/"><img src="https://redcdn.net/hpimg15/pics/22214710035.jpg" /></a>  <a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2018/12/6/1521853812-boutonsca2.png" /></a>                                     
   </marquee>
                                                                                  
</div>


D8CAE4

https://i.pinimg.com/originals/f4/54/8c/f4548c8d23a03760eae18752f8e86556.jpg











<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>PA (c) Sunhae</title>  <style type="text/css">
*{
  font-size: 11px;
  font-family: georgia;

}
                                    /* PARTENAIRES */
.partenaires{
  position: relative;
  display: inline-block;
  width: 46px;
  height: 46px;
  margin: 2px;
  border: #4E335E 1px solid;
  filter: alpha(opacity=50); 
  -moz-opacity: 0.5; 
  -khtml-opacity: 0.5; 
  opacity: 0.5;
  z-index: 0;
}
 
.partenaires:hover{
  background-color: transparent;
  width: 46px;
  height: 46px;
  ilter: alpha(opacity=100); 
  -moz-opacity: 1; 
  -khtml-opacity: 1; 
  opacity: 1;
  border: #4E335E 1px solid;
  z-index: 50;
}
                                    /* FIN */
 
 
                                    /* STAFF */
 
.infobulle{
  position: relative;
  z-index: 0;
}
 
.infobulle:hover{
  background-color: transparent;
  z-index: 50;
}
 
.infobulle span{
  position: absolute;
  background-image: url(http://obsession27.free.fr/divers/fonds/jf2.gif);
  padding: 5px;
  left: -1000px;
  visibility: hidden;
  color: #131318;
}
 
.infobulle:hover span{
  visibility: visible;
  top: 0px;
  left: 0px;
  width: 205px;
  height: 56px;
  color: #131318;
  border-top: 3px solid #131318;
  border-bottom: 3px solid #131318;
  border-left: 1px solid #131318;
  border-right: 1px solid #131318;
  box-shadow: 0px 0px 5px #131318;
}
 
#englob{
  position: relative;
  width: 60px;
  height: 80px;
  color: #131318;
  display: inline-block;
  border: 3px double #131318;
  margin: 5px;
  overflow: hidden;
}

.imgp{
  background: white;
  position: absolute;
  top: 0;
  opacity: 0.8;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-variant: small-caps;
  font-size: 30px;
  z-index: 1;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

#englob:hover > .imgp{
  font-size: 16px;
  opacity: 0;
}

.infosp{
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  padding-top: 15px;
  border-radius: 5px;
  font-size: 10px;
  background-image: url(http://obsession27.free.fr/divers/fonds/jf2.gif);
  font-weight: lighter;
  text-align: center;
  height: 80px;
  z-index: 0;
  opacity: 0;
  margin-left: -200px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;
}

#englob:hover > .infosp{
  opacity: 1;
  margin-left: 0px;
}
 
a{
  color: #ffffff; 
}

.fond{
 
  width: 815px;
  margin: auto;
  padding: 10px 0px 10px 0px;
}
 
.blocgeneral{
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin-top: 6px;
  background-color: transparent;
}
 
.titrebloc{
  text-align: center;
  text-transform: uppercase;
  color: #D8CAE4;
  background-color: #131318;
  padding-top: 1px;
}
 
.contextbloc{
  text-align: justify;
  background-color: #535062;
  opacity: 10%;
  padding: 5px;
  height: 180px;
  overflow: auto;
}
</style> 
<div class="fond">
                                                                        
   <center><img src="https://zupimages.net/up/19/02/6bcr.png" alt="Bienvenue sur FORUM" border="0" />                               
   </center>
                                                                              
   <table align="middle" border="0" cellpadding="10" cellspacing="0" style="width: 100%;">
                                            <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
      <tr align="center">
                                                                                  
         <td>
                                                                                       
            <div class="blocgeneral">
                                                                                            
               <div class="titrebloc">
                                                  CONTEXTE                               
               </div>
                                                                                            
               <div class="contextbloc">
                                                                                                          Nous sommes en Virginie, dans la petite ville de Fearwood. Depuis longtemps, cet endroit est réputé comme calme et tranquille, on dit que c'est une petite ville où il ne se passe presque rien. Seulement, elle cache bien ses secrets. En effet, sous cet aspect serein, se cache une ville où vivent des créatures surnaturelles depuis la nuit des temps. Bien qu'il y ait des vampires, des loups garous et des sorciers un peu partout dans le monde, étrangement, ici la population d'êtres surnaturels est presque plus élevée que celle des humains !                                                         
                  <p>
                                                      
                  </p>
                                                                                                                             
                  <center>
                                                     ▬ <a href="http://fearwood--rpg.forumactif.org/t9-contexte-du-rpg">LA SUITE ?</a> ▬                               
                  </center>
                                                                                               
               </div>
                                                                                          
            </div>
                                                                                     
         </td>
                                                                                          
         <td>
                                                                                       
            <div style="width: 180px;" class="blocgeneral">
                                                    
               <div class="titrebloc">
                              STAFF           
               </div>
                                                    
               <div class="contextbloc">
                                                         
                  <center>
                                 <br />                                             
                     <div id="englob">
                                                                   
                        <div class="imgp">
                                       <img src="https://zupimages.net/up/19/02/7g6a.jpg" alt="EMILY" />           
                        </div>
                                                                   
                        <div class="infosp">
                                       EMILY DAWSON<br />Fondatrice           
                        </div>
                                                                 
                     </div>
                                                                              
                     <div id="englob">
                                                                   
                        <div class="imgp">
                                       <img src="https://zupimages.net/up/19/02/fyv6.jpg" alt="AYANE" />           
                        </div>
                                                                   
                        <div class="infosp">
                                       AYANE DRAGNEEL<br />Fondatrice           
                        </div>
                                                                 
                     </div>
                                                                   <br />                                             
                     <div id="englob">
                                                                   
                        <div class="imgp">
                                       <img src="https://zupimages.net/up/19/02/lsul.jpg" alt="NIHALE" />           
                        </div>
                                                                   
                        <div class="infosp">
                                       NIHALE SALVATORE<br />Admine           
                        </div>
                                                                 
                     </div>
                                                                              
                     <div id="englob">
                                                                   
                        <div class="imgp">
                                       <img src="https://zupimages.net/up/19/02/1bcs.jpg" alt="NINA" />           
                        </div>
                                                                   
                        <div class="infosp">
                                       NINA HARTWIG<br />Graphiste           
                        </div>
                                                                 
                     </div>
                                          
                     <div id="englob">
                                                                 
                        <div class="imgp">
                                       <img alt="DEREK" src="https://zupimages.net/up/19/02/ekxm.jpg" />           
                        </div>
                                                                 
                        <div class="infosp">
                                       DEREK HALE<br />Admin         
                        </div>
                                                               
                     </div>
                                                                            
                     <div id="englob">
                                                                 
                        <div class="imgp">
                                       <img alt="LIA" src="https://zupimages.net/up/19/02/j9lc.jpg" />           
                        </div>
                                                                 
                        <div class="infosp">
                                       LIA MARSHALL<br />Admine           
                        </div>
                                                               
                     </div>
                                                                 <br />                                           
                     <div id="englob">
                                                                 
                        <div class="imgp">
                                       <img alt="SAM" src="https://zupimages.net/up/19/02/r9ep.jpg" />           
                        </div>
                                                                 
                        <div class="infosp">
                                       SAM TORRENCE<br />Animation         
                        </div>
                                                               
                     </div>
                                                                            
                     <div id="englob">
                                                                 
                        <div class="imgp">
                                       <img alt="SAM" src="https://zupimages.net/up/19/02/s4gy.jpg" />           
                        </div>
                                                                 
                        <div class="infosp">
                                       SAM WALLACE<br />Graphiste           
                        </div>
                                                               
                     </div>
                                                                 <br />           
                  </center>
                                                       
               </div>
                                                  
            </div>
                                             
         </td>
                                                                                          
         <td>
                                                                                       
            <div style="width: 250px; height: 85px;" class="blocgeneral">
                                                                                            
               <div class="titrebloc">
                                                  NOUVEAUTÉS                               
               </div>
                                                                                            
               <div class="contextbloc" style="height: 65px;"><strong>09.01.19</strong>: Nouveau thème Dark/violet pour la nouvelle année!<br />                                              <strong>01.01.19</strong>: BONNE ANNÉE À TOUS ! SANTÉ AVANT TOUT !<br />              <strong>13.12.18</strong>: <strong>Recensement d'hiver <<a href="http://fearwood--rpg.forumactif.org/t755-recensement-de-fin-d-annee-2018">ICI</a>> (jusqu'au 13 janvier)</strong>  <br />              <strong>XX.XX.XX</strong>: Nouveauté Ici<br />              <strong>XX.XX.XX</strong>: Nouveauté Ici<br />              <strong>XX.XX.XX</strong>: Nouveauté Ici                                           
               </div>
                                                                                          
            </div>
                                                                                                 
            <div style="width: 250px; height: 109px;" class="blocgeneral">
                                                                                            
               <div class="titrebloc">
                                                  MEMBRE DU MOIS                               
               </div>
                                                                                            
               <div class="contextbloc" style="height: 84px; padding-top: 9px; overflow: hidden;">
                                                                                                 
                  <center>
                                                                                                      
                     <table>
                                                        <tbody> </tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
                        <tr>
                                                                                          
                           <td>
                                                                                                                                   
                              <div class="infobulle">
                                                                                     <img viewer.php?id="19/02/hky7.jpg"" www.zupimages.net="" https:="" src="<a href=" alt="Membre du Mois" /><img alt="" src="https://zupimages.net/up/19/02/hky7.jpg" />" /><br />                    <span>Le membre du <strong>mois</strong> est <em>pseudo</em></span>                                                 
                              </div>
                                                                                                                                 
                           </td>
                                                                                          
                        </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody>                               
                     </table>
                                                                                                    
                  </center>
                                                                                               
               </div>
                                                                                          
            </div>
                                                                                             
         </td>
                                                                              
      </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody>                                 
   </table>
                                         <br />                                         
   <table style="margin: auto;" align="middle" border="0" cellpadding="5" cellspacing="0">
                                            <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody> <tbody></tbody>
      <tr>
                                                                                  
         <td>
                                                                                       
            <div style="width: 250px; height: 70px;" class="blocgeneral">
                                                                                            
               <div class="titrebloc">
                                                  CRÉDITS                               
               </div>
                                                                                            
               <div class="contextbloc" style="height: 50px;">
                                                                Idée originale ©️ Emily Dawson & Ayane Dragneel<br />              Graphisme Thème ©️ Azaël Hook<br />              Graphisme et Codage autre ©️ Nina Hartwig & Azaël Hook<br />              Toute reproduction partiel ou complète est interdite sans l'accord des fondatrices.<br />              Page d’accueil par Sunhae de <a href="http://forum-theme.forumperso.com/">Libre Graph'</a>                                           
               </div>
                                                                                          
            </div>
                                                                                     
         </td>
                                                                                          
         <td>
                                                                                       
            <div style="width: 506px; margin-left: 20px; height: 70px;" class="blocgeneral">
                                                                                            
               <div class="titrebloc">
                                                  PARTENAIRES                               
               </div>
                                                                                            
               <div class="contextbloc" style="height: 50px;">
                  
                  <marquee>
                                                               <a href="http://beaconhillsrpg.forumpro.fr/"><img src="https://www.zupimages.net/up/15/27/4l7k.png" /></a> <a href="http://cafe-sucre.forums-actifs.net/"><img src="https://i.servimg.com/u/f39/14/90/55/59/logo_010.jpg" /></a> <a href="http://wicked-is-good.forumactif.org/"><img src="https://nsa38.casimages.com/img/2016/07/14/160714095146990004.png" /></a> <a href="http://kill-or-be-killed.forumactif.org/"><img src="https://i.servimg.com/u/f68/18/92/23/79/bouton11.png" /></a><a href="http://teenwolf-rpg.forumactif.org/"><img src="https://i.servimg.com/u/f19/14/34/47/24/bouton11.gif" /></a> <a href="http://aideen.forumactif.com/"><img src="https://redcdn.net/hpimg15/pics/22214710035.jpg" /></a>  <a href="" target="_blank"><img src="http://image.noelshack.com/fichiers/2018/12/6/1521853812-boutonsca2.png" /></a>                                       
                  </marquee>
                                                                <br /><br /><br /><br />                                           
               </div>
                                                                                          
            </div>
                                                                                     
         </td>
                                                                                        
      </tr><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody><tbody></tbody>                                   
   </table>
                                                                        
</div>
avatar
Drew
♠ PandaAdmin

Messages : 603
Localisation : ʕ •ᴥ•ʔ

Voir le profil de l'utilisateur http://deep-ink.forums-actifs.com

Revenir en haut Aller en bas

Re: feuille de style CSS FEARWOOD

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum