AUTRE — page d'accueil

/*------------------------------------- PAGE D'ACCUEIL ----------------------*/
.grdbloc{
  width: 791px;
  margin: auto;
}
.tite{
  text-transform: lowercase;
  font-family: 'Voltaire', sans-serif;
  font-size: 20px;
  text-align: center;
  color: #7B0C0F;
  font-weight: bold;
}
.bloccontexte{
  float: left;
}
.prbloc{
  width: 250px;
  text-align: justify;
  font-size: 11px;
  height: 250px;
  overflow: auto;
}
.primg{
  float: left;
  width: 100px;
  margin-right: 5px;
  border-radius: 5px;
}
.blocstaff{
  width: 256px;
  float: left;
  margin-left: 10px;
}
.staffblock {
  display: inline-block;
  position: relative;
  height: 50px;
  max-width: 250px;
  border: 2px solid #2F4B56;
  overflow: hidden;
  padding: 3px;
  background: #fff;
  border: 1px solid #ccc;
  float: left;
}
.staffblock2 {
  display: inline-block;
  position: relative;
  height: 100px;
  max-width: 150px;
  border: 2px solid #2F4B56;
  overflow: hidden;
  padding: 3px;
  background: #fff;
  border: 1px solid #ccc;
  float: left;
}
.staffcontent {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  font-size: 10px;
  box-sizing: border-box;
  padding-top: 20px;
  transform: translate(0, 100%);
  transition: all 0.3s;
  text-align: center;
}
.staffblock:hover .staffcontent {
  transform: translate(0, 0);
}
.staffblock2:hover .staffcontent {
  transform: translate(0, 0);
}
h4 {
 text-align: center;
 font-size: 9px;
 color: #82818e;
 margin: 0;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-family: 'Abel', sans-serif;
}
.bloceffec{
  width: 260px;
  float: left;
  margin-left: 15px;
  text-align: justify;
  font-size: 11px;
  height: 280px;
  overflow: auto;
}
.imgclan{float:left; margin-right: 10px; margin-top:5px; width:40px;}
.clant{
  width: 190px;
  height: 40px;
  overflow: auto;
}
.blocnews{
  float: left;
  width: 380px;
  margin-top: 5px;
}
.newscontent{
  width: 380px;
  float: left;
  text-align: justify;
  font-size: 11px;
  height: 100px;
  overflow: auto;
}
.blocpredef{
  float: left;
  width: 400px;
  margin-top: 5px;
  margin-left: 10px;
}
.predefcontent{
  width: 400px;
  float: left;
  text-align: justify;
  font-size: 11px;
  height: 100px;
  overflow: auto;
}
.blocpato{
  margin-top: 10px;
}
.partocontent{
  width: 790px;
  height: 60px;
  margin-left: -50px;
}
.imgparto{
  border: 2px solid #2F4B56;
  padding: 3px;
  background: #fff;
  border: 1px solid #ccc;
  width: 50px;
  height: 50px;
}
.last{display: inline-block;
position: absolute;
font-size: 20px;
margin-left: 10px;
margin-top: 5px;
width: 20px;
height: 20px;
padding: 15px;
border-radius: 100px;
color: indianred;
background: lightgray;
}

<link rel="stylesheet" href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Voltaire" />
<div class="grdbloc">
                                    
   <div class="bloccontexte">
                                       
      <div class="tite">
                           » extrait du contexte             
      </div>
                                       
      <div class="prbloc">
                           <img class="primg" src="https://i.pinimg.com/originals/4b/dd/d9/4bddd905412502a4c65cb526d737853f.gif" /><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit vestibulum feugiat. Etiam nec egestas eros, quis luctus tortor. Donec vulputate laoreet nibh, sit amet euismod quam ultrices et. Ut at nulla ipsum. Quisque eu augue nec ex efficitur varius. Donec ut nulla erat. Sed vel quam nisi. Etiam non tempus sem, at vulputate ex. Suspendisse sollicitudin tellus nec ipsum tempus ultrices. Nullam nisi est, auctor nec lectus quis, semper commodo massa. Pellentesque condimentum magna ac purus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit vestibulum feugiat. Etiam nec egestas eros, quis luctus tortor. Donec vulputate laoreet nibh Lorem ipsum dolor sit amet, con
         <div align="center">
              <a href="http">» lire intégralement</a> 
         </div>
                            
      </div>
                                       
   </div>
                                    
   <div class="blocstaff">
                                       
      <div class="tite">
                           » le Staff du forum               
      </div>
                                         
      <div class="staffblock">
                                               <img alt="" src="http://placehold.it/250x50" />                                     
         <div class="staffcontent">
                                                                       
            <h4>
                                 le grand cerf blanc                 
            </h4>
                            rang, présence | <a href="http">MP</a>                   
         </div>
                                          
      </div>
                                           
      <div style="margin-top: 5px;" class="staffblock">
                                               <img alt="" src="http://placehold.it/250x50" />                                     
         <div class="staffcontent">
                                                                       
            <h4>
                                 nom du personnage               
            </h4>
                            rang, présence | <a href="#">MP</a>                                     
         </div>
                                              
      </div>
                                       
      <div class="tite">
                         » Les chats du Mois               
      </div>
                                           
      <div class="staffblock2">
                                               <img alt="" src="http://placehold.it/115x100" />                                     
         <div class="staffcontent">
                                                                       
            <h4>
                                 le truc du mois                 
            </h4><br />Nom du Chat <br />&<br /> <a href="#">voir sa fiche de liens</a>                   
         </div>
                                          
      </div>
                                         
      <div style="margin-left: 10px;" class="staffblock2">
                                               <img alt="" src="http://placehold.it/115x100" />                                     
         <div class="staffcontent">
                                                                       
            <h4>
                                 le rp du mois                 
            </h4><br />Nom du Chat <br />&<br /> Nom du Chat<br /><a href="http">☽ lien du rp</a>                   
         </div>
                                          
      </div>
                                           
   </div>
                                    
   <div class="bloceffec">
                                       
      <div class="tite">
                           » Effectifs des clans               
      </div><img class="imgparto" src="http://placehold.it/40x40" />               
      <div class="clant">
                             <cs2>texte ☽</cs2> texte.       
      </div><br /><img class="imgparto" src="http://placehold.it/40x40" />               
      <div class="clant">
                             <cs2>texte ☽</cs2> texte.       
      </div><br /><img class="imgparto" src="http://placehold.it/40x40" />               
      <div class="clant">
                             <cs2>texte ☽</cs2> texte.       
      </div><br /><img class="imgparto" src="http://placehold.it/40x40" />               
      <div class="clant">
                             <cs2>texte ☽</cs2> texte.       
      </div><br /> <img class="imgparto" src="http://placehold.it/40x40" />               
      <div class="clant">
                             <cs2>texte ☽</cs2> texte.       
      </div>
                                       
   </div>
                                    
   <div class="blocnews">
                                       
      <div class="tite">
                           » Ce qu'il y a à savoir             
      </div>
                                       
      <div class="newscontent">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit vestibulum feugiat. Etiam nec egestas eros, quis luctus tortor. Donec vulputate laoreet nibh, sit amet euismod quam ultrices et. Ut at nulla ipsum. Quisque eu augue nec ex efficitur varius. Donec ut nulla erat. Sed vel quam nisi. Etiam non tempus sem, at vulputate ex. Suspendisse sollicitudin tellus nec ipsum tempus ultrices. Nullam nisi est, auctor nec lectus quis, semper commodo massa. Pellentesque condimentum magna ac purus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce suscipit vestibulum feugiat. Etiam nec egestas eros, quis luctus tortor. Donec vulputate laoreet nibh Lorem ipsum dolor sit amet, con                 
      </div>
                                       
   </div>
                                    
   <div class="blocpredef">
                                       
      <div class="tite">
                         » les félins attendus                 
      </div>
                                       
      <div class="predefcontent">
                           <span class="sf sf-saturn"> </span> petit message pour promouvoir les pvs & pré-liens <span class="sf sf-bolt-o"></span> clan du tonnerre <span class="sf sf-ghost-o"></span> clan de l'ombre <span class="sf sf-wave"></span> clan de la rivière ≈ clan du vent<span class="sf sf-saturn"></span> lien pour mettre en avant sa recherche.                 
      </div>
                                       
   </div>
                                 <br />     
   <div class="blocpato">
                                       
      <div style="text-align: left;" class="tite">
                           » les beaux partenaires             
      </div>
                                             
      <div class="partocontent">
                           <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" /> <img class="imgparto" src="http://placehold.it/50x50" />                 
         <div class="last">
                              <span class="sf sf-plus-2"> </span>                 
         </div>
                                          
      </div>
                                           
   </div>
</div>