<div class="container">
                                                          
 <!--                             navigation + titre                            -->                              
 <div class="top">
                                                              
 <div class="name">
                           bienvenue à                          
 </div>
                                                              
 <div class="subtitle">
                           la mafia sorcière de florence                            
 </div><br />                                      
 <div class="navigationpa">
                                       <a href="">contexte</a> |            <a href="">préliens</a> |            <a href="">bottin</a> |            <a href="">partenariat</a> |            <a href="">invités</a>                                  
 </div><br />                                  
 </div>
                                                          
 <!--                             milieu                            -->                              
 <div class="up">
                                                              
 <div class="up-left">
                                                                  
 <!--                             colonne de gauche                             -->                                      
 <div class="left-up">
                                                                      
 <!--                             colonne de gauche> bloc du haut                             -->                                          
 <div class="titre">
                           INFORMATIONS                          
 </div>
                                           <span class="col">01.01</span>Now that there is the Tec-9, a crappy spray gun from South Miami.                <br /><span class="col">02.01</span>This gun is advertised as the most popular gun in American crime.                <br /><span class="col">66.66</span>Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.                                        
 </div>
                                                                  
 <div class="left-down">
                                                                      
 <!--                             colonne de gauche> bloc du bas                             -->                          
 <!--                             PARTENAIRES                            -->                                          
 <div class="titre">
                           NOS AFFILIÉS                          
 </div>
                                       <a href="">•</a> <a href="">•</a> <a href="">•</a> <a href="">•</a> <a href="">•</a> <a href="">•</a>            <br /><a href="">PLUS</a> | <a href="">LE DEVENIR ?</a>                          
 </div>
                                               <br />                                                          
 </div>
                                                                      
 <div class="up-middle">
                                                                  
 <!--                             colonne de milieu                             -->                          
 <!--                             STAFF                            -->                                      
 <div class="admin">
                                                                      
 <div class="imgadmin">
                            
 <center>
                                             <a href="LIEN VERS LE PROFIL DUN ADMIN"> <img src="https://i.servimg.com/u/f54/20/18/36/42/sugx1a10.png" class="iconpa" /></a>                  <a href="LIEN VERS LE PROFIL DUN ADMIN"> <img src="https://i.servimg.com/u/f54/20/18/36/42/sugx1a10.png" class="iconpa" /></a>                  <a href="LIEN VERS LE PROFIL DUN ADMIN"> <img src="https://i.servimg.com/u/f54/20/18/36/42/sugx1a10.png" class="iconpa" /></a>                                          
 </center>
                            
 </div>
                                                                      
 <div class="titre">
                           VOTRE STAFF                          
 </div>
            
 <center>
               lau | alex | ju              
 </center><br />version réalisée par | pa codée par robbie. | icones de                                        
 </div>
                                                                        
 </div>
                                                              
 <div class="up-right">
                                                                  
 <!--                             colonne de droite                             -->                          
 <!--                             CONTEXTE                             -->                                      
 <div class="titre">
                           CONTEXTE                          
 </div>
                                       Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.             Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine.                            
 </div>
                                                          
 </div>
                                                          
 <!--                             boîte du bas                            -->                              
 <div class="bottom">
                                                              
 <div class="bottom-left">
                                                                  
 <div class="titre">
                           INTRIGUE                          
 </div>
                                       Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me <a href="LIEN VERS TC OU INTRIGUE">ici</a>                        
 </div>
                                                              
 <div class="bottom-right">
                                                                  
 <div class="titre">
                           FAMILLES                          
 </div>
                                                                  
 <!--                            ici les icons des membres du mois                            -->                                      
 <div class="iconpamdm-left">
   <img src="https://i.servimg.com/u/f54/20/18/36/42/4510.jpg" class="iconpa" />                          
 </div>
                                                      
 <div class="iconpamdm-right">
 <img src="https://i.servimg.com/u/f54/20/18/36/42/4510.jpg" class="iconpa" />                          
 </div><br />                                      
 <div class="text-mdm">
                          nous recherchons actuellement des membres de familles.                    
 </div>
                                                              
 </div>
                                                          
 </div>
</div>

/*pa*//*style flexbox, ne pas y toucher sans maitriser*/
.container{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width:100%;
    background-color: #f4f2ed;
}
.top{
    display: flex;
    width: 100%;
    flex-direction: column;
}
.up,.bottom{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}
.up-left{
    width: 26%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.left-up{
    text-align: justify;
    height: 78px;
    overflow: auto;
}
.left-down{
    text-align: center;
}
.up-middle{
    width: 23%;
    height: 150px;
}
.up-right{
    width: 40%;
    overflow: auto;
    text-align: justify;
    height: 150px;
}
.bottom-left{
    width: 55%;
    text-align: justify;
    overflow: auto;
    height: 70px;
}
.bottom-right{
    width: 35%;
    position: relative;
    height: 70px;
    overflow: auto;
}

/*style des box avec contenus, possible de modifier la couleur de fond*/
.up-right,.up-middle,.left-up,.left-down,.bottom-left,.bottom-right{
    margin-bottom: 5px;
  background-color: #ffffff;
box-shadow:#82917b 0px 0px 2px;
border-radius: 5px;
    padding: 10px;
    color: rgb(196, 196, 196);
}

/*liens de navigation*/
.navigationpa{
}

.navigationpa>a{
    margin-left:5px;
    margin-right:5px;
    font-size: 10px;
}

/*style nom du forum*/

.name{
    text-transform: uppercase;
    font-family: dorsa, sans serif;
    font-size: 35px;color:#F4C24E;
    border-bottom: 1px solid #292929;
    text-align: center;
    margin: 7px 2%
}


.subtitle {
    text-transform: uppercase;
    font-size: 8px;
    text-align: center;
    letter-spacing: 4px;
    color: #292929;
}

/*titre des blocs*/
.titre {   text-transform: lowercase;
  font-family: Dynalight, cursive;
    text-align: center;
    border-bottom: 1px #585447 solid;text-shadow : 1px 0px 1px white; opacity: 0.8;text-shadow: 1px -2px 1px -2px gray;
    font-size: 20px;
    letter-spacing: 2px;
color: #66095B;
    top: 0px;
}

.admin{
text-align: justify;
}

.imgadmin{
    text-align: center;
}

/*style des images pour les admins*/
.iconpa{
    width: 35px;
    border-radius: 100%;
  padding: 5px;border: 1px solid #d2d2d2;background-color: #fff;
    text-align: center;
    opacity:60%;
}
.iconpamdm-left{
    position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
}
.iconpamdm-right{
    position: absolute;
    top: 0px;
    right:0px;
    display: inline-block;
}
.iconpa:hover,.iconpamdm:hover{
    opacity:100%
}
.text-mdm{
    padding-left: 40px;
    padding-right: 40px;
}

/*dégradé sur les dates*/
.col{
    background: linear-gradient(#ce900a,#393c3e);
    color:white;
    margin:5px; /*retrait par rapport à la ligne*/
    font-size: 9px;
}

/* scrollbar */

::-webkit-scrollbar {
width: 2px;
height: 4px;
}

::-webkit-scrollbar-thumb {
background-color:#cd8b3c;
}

::-webkit-scrollbar-track {
background-color: #F9F9F9;
}

/*BARRE DE NAVIGATION*/
a.mainmenu{
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
margin-bottom: -20px;
font-family: Verdana !important;
text-transform: lowercase;
    font-size: 10px;
    margin-left:5px;
    margin-right:5px;
}



a.mainmenu:hover{
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
margin-bottom: -20px;
font-family: Verdana !important;
text-transform: lowercase;
    font-size: 10px;
    margin-left:5px;
    margin-right:5px;
}