Il n'est pas nécessaire de me prévenir ou me remercier lorsque vous vous servez ici, mais un crédit est toujours sympa. Bien sûr, interdit de retirer les crédits sur les libres services que vous prenez. Le vol c'est mal c:
 
AccueilRechercherS'enregistrerConnexionPA Rose 8ttj

Voir le sujet précédent Voir le sujet suivant Aller en bas
PA Rose
Aadelrun


HTML
Code:
<div class="pa">
   
   <h1 class="titre_pa">
                              Bienvenue sur Forum !                       
   </h1>
   
   <div class="content_pa">
                                                   
      <div class="concept">
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt nulla a ex elementum dignissim eu at risus. Quisque convallis, libero et condimentum rutrum, elit orci egestas felis, eu molestie nisi ex vitae sapien. Nulla aliquam commodo dui, sed lacinia tortor dapibus in. Nunc eget pharetra tellus. Ut leo felis, scelerisque sit amet metus id, scelerisque consectetur turpis. Aliquam ultrices tristique elit fringilla accumsan. Nunc id ligula massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt nulla a ex elementum dignissim eu at risus. Quisque convallis, libero et condimentum rutrum, elit orci egestas felis, eu molestie nisi ex vitae sapien.                     
      </div>
                                                   
      <div class="liens_pa">
                                                      
         <ul>
                                                         
            <li>
                                       <a href="...">Règlement</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Recrutement</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Commandes</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Tutoriels</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Partenariat</a>                       
            </li>
                                                         
            <li>
                                       <a href="...">Discord</a>                       
            </li>
                                                         
         </ul>
                                                      
      </div>
                                                   
      <div class="pa_droite">
                                                      
         <div class="staff">
                                                         
            <div class="vavastaff">
                                       <img src="https://image.noelshack.com/fichiers/2019/17/4/1556225741-avatarstaff.png" />                       
               <div class="infostaff">
                                          <span>Pseudo</span>                 
                  <div class="fonction">
                                       Fonction                 
                  </div>
                                  <a href="...">Profil</a>                       
               </div>
                                                            
            </div>
                                                         
            <div class="vavastaff">
                                       <img src="https://image.noelshack.com/fichiers/2019/17/4/1556225741-avatarstaff.png" />                       
               <div class="infostaff">
                                          <span>Pseudo</span>                 
                  <div class="fonction">
                                       Fonction                 
                  </div>
                                  <a href="...">Profil </a>                     
               </div>
                                                            
            </div>
                                         
            <div class="vavastaff">
                                       <img src="https://image.noelshack.com/fichiers/2019/17/4/1556225741-avatarstaff.png" />                       
               <div class="infostaff">
                                          <span>Pseudo</span>                 
                  <div class="fonction">
                                       Fonction                 
                  </div>
                                  <a href="...">Profil </a>                     
               </div>
                                                            
            </div>
                                                               
         </div>
                                                      
         <div class="news_pa">
                                                         
            <div class="titre_new">
                                       Nouveautés                       
            </div>
                                                         
            <div class="contenu_news">
                                       <span class="date_pa">XX.XX.XX :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mattis felis. Vestibulum ante mauris, dignissim quis pellentesque eget, tincidunt non tortor.<br /><span class="date_pa">XX.XX.XX :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mattis felis. Vestibulum ante mauris, dignissim quis pellentesque eget, tincidunt non tortor.<br /><span class="date_pa">XX.XX.XX :</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non mattis felis. Vestibulum ante mauris, dignissim quis pellentesque eget, tincidunt non tortor.                         
            </div>
                                                         
         </div>
                                                    
      </div>
      
   </div>
</div>

CSS
Code:
/* --------------------- PAGE D'ACCUEIL PAR AADELRUN ---------------------- */

.pa {
  width:942px;
}

.pa a {
  text-decoration:none;
}

.titre_pa {
  font-size:30px;
  color:white;
  width:922px;
  padding:10px;
  background-color:#B46181;
  text-transform:uppercase;
  margin-bottom:0px;
}

.content_pa {
  background-color:#F7ECEC;
  padding:5px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  font-size:13px;
}

.concept {
  width:310px;
  height:177px;
  text-align:justify;
  overflow:auto;
  padding:5px;
}

.liens_pa ul {
  margin : 0;
  padding : 0;
  list-style : none;
}

.liens_pa {
  margin:auto;
  text-align:center;
}

.liens_pa li {
  width:200px;
}

.liens_pa li a {
  font-family:Roboto, sans-serif;
  text-transform: uppercase;
  color:#333333 !important;
  background-color:#CEADBE;
  font-size:14px;
  padding:3px;
  display : block;
}

.liens_pa li a:hover {
  background-color:#5C3F4D;
  color:white !important;
}

.liens_pa li + li {
  margin-top : 7px;
}

.staff {
  display:flex;
  flex-wrap:nowrap;
  justify-content: space-between;
}

.pa_droite {
 width:42%;
}
.vavastaff {
  width:125px;
  height:55px;
}

.infostaff {
  transition: 0.5s linear;
  padding:3px;
  background-color:rgba(0,0,0,0.6);
  opacity:0;
  text-align:center;
  color:white;
  margin-top:-55px;
  line-height:16px;
}

.infostaff a {
  color:white!important;
}

.infostaff span {
  font-weight:bold;
}
 
.vavastaff:hover .infostaff {
  opacity: 0.9; transition:0.5s linear;
}

.fonction {
  background-color:#E7C0C1;
  color:#333;
  width:100%;
}

.news_pa {
  width:260px;
  height:122px;
  display:flex;
  margin-top:5px;
}

.contenu_news {
  text-align:justify;
  overflow:auto;
  padding-left:5px;
  padding-right:5px;
  margin-right:-65px;
}

.titre_new {
  transform:rotate(90deg);
  font-weight:bold;
  font-size:16px;
  color:#B46181;
  text-transform:uppercase;
  margin-left:-170px;
  letter-spacing:2px;
}

.date_pa {
  color:#B46181;
  font-weight:bold;
}
Aadelrun
Aadelrun
Admin
Messages : 45
Date d'inscription : 01/09/2019
https://aadelrun.forumactif.com
Jeu 10 Oct - 20:25
Revenir en haut Aller en bas
Sauter vers: