Mar 8 Aoû - 20:18

Bonsoir petite citrouille~ Suite à ta grande générosité, je poste huhu~

Forum : http://academy-waverly.forumactif.com/
Version : PHPBB2
Taille du forum : 600 (en nombre)
Elément(s) demandé(s) : Page d'accueil
Maquette : ICI
Description (peut remplacer la maquette ou la compléter) : Tout est sur la maquette :) Pour les images du staff, quand on passe la souris, ça rendrait l'image en noir et blanc et plutôt transparente, avec le pseudo, en dessous le lien menant à la boîte M.P et encore en -dessous avec au saut de ligne un petit mot comme "présent" en couleur (verte dans ce cas x] )
Couleurs (si pas de maquette graphique) : C'est à "pipéter" directement xD
Polices à utiliser : Le "Bienvenue à Sydney" est en Bebas Neue (taille 48) et tous les autres petits titres comme "contexte, staff etc." sont en Bebas (taille 18) :)
Images à utiliser : L'image partenariat ICI et pour les images du staff ça ne sera que CELLE-CI à mettre plusieurs fois ^^ ; pour les top site : 1 - 2 - 3 - 4
Acceptez-vous que le code finisse en LS ? Pas vraiment car le schéma vient de ma toute petite tête >.<
Mode de rendu : Via le sujet (en hide)
Autre chose à ajouter ? Surtout un grand merci à toi qui veut bien m'aider

P.S, je viens de réaliser que dans le bloc des partenaires, il n'y a rien après le dernier ">>" en faite il est suivi d'un "demande" (c'est un lien comme le "les autres") >.<

Mar 8 Aoû - 23:08

Pouet !

Voila mon résultat : www.
Comme dit sur le Discord j'attends plus d'infos sur le staff (si l'image en N/B + transparence est le fond des informations et quel genre de coulissement tu veux), et pour la police puisque Bebas n'est pas hébergée en police web :3

Bonne soirée !

Mer 9 Aoû - 13:07

Ah que coucou !

Whoua ! Cette P.A est une réussite ma chère
Pour ce qui est du staff (comme dit sur Discord), ça ne serait donc plus un coulissement mais un simple effet (image en noir et blanc légèrement en transparence et avec les liens) au passage de la souris (:
Encore un grand merci !

Mer 9 Aoû - 17:53

Voila mon rendu : www ^^

Mer 9 Aoû - 17:58

ANH ! *meurt* Oh c'est vraiment super Halloween ! Merci beaucoup beaucoup ! En plus tu as fais ça très rapidement.

Mer 9 Aoû - 17:59

Avec plaisir :3

Du coup pour la PA :

Code:

<div id="pa">
                                                                            
   <h2>
                                          Bienvenue à Sydney                                   
   </h2>
                                       <br /><br />                                   
   <div id="pa_gauche">
                                                                             
      <h3>
                                           Contexte                                 
      </h3>
                                                                       
      <div class="pa_contexte">
                                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus libero quis nulla porta, ut eleifend tortor maximus. Integer non volutpat quam. Donec interdum, leo in consectetur semper, sem enim dapibus ipsum, venenatis imperdiet purus mauris quis odio. Nulla metus mi, congue et mauris quis, fringilla maximus est. Nam at nulla justo. Vivamus ut justo est. Nam sit amet molestie dolor. Nunc et justo sed ex tincidunt scelerisque. Etiam vulputate justo ultricies mi interdum, a hendrerit ligula posuere. Aenean porta ipsum viverra mauris interdum, in porta velit laoreet.                                 
      </div>
                                      <br />                             
      <div class="pa_bloc_liens">
                                         <a href="# class=">Règlement</a> | <a href="#">Contexte</a> | <a href="#">Bottin Avatars</a> | <a href="#">Prédéfinis</a> | <a href="#">Questions</a>                               
      </div><br />                           
      <div class="pa_copains">
                                                              
         <h3>
                                        Nos copains                           
         </h3><a target="_blank" href="#"><img src="https://img4.hostingpics.net/pics/611830partenariat.png" /></a> <a target="_blank" href="#"><img src="https://img4.hostingpics.net/pics/611830partenariat.png" /></a> <a target="_blank" href="#"><img src="https://img4.hostingpics.net/pics/611830partenariat.png" /></a><br /><a target="_blank" href="#"><img src="https://img4.hostingpics.net/pics/611830partenariat.png" /></a> <a target="_blank" href="#"><img src="https://img4.hostingpics.net/pics/611830partenariat.png" /></a> <a target="_blank" href="#"><img src="https://img4.hostingpics.net/pics/611830partenariat.png" /></a><br /><a href="#">>> Les autres</a>    <a href="#">>> Les demandes</a>                           
      </div>
                                                         
      <div class="pa_news">
                                                            
         <h4>
                                      News et Infos                         
         </h4>
                                   Ouverture du forum le xx/xx/xxxx<br /><br />Recensement du xx/xx au xx/xx<br /><br />Nous recherchons un correcteur, vous pouvez postuler <a href="#">ICI</a><br /><br /><strong>L'évènement blabla est ouvert ! Vous pouvez poster <a href="#">ICI</a></strong>                         
      </div>
                                                     
   </div>
                                                    
   <div id="pa_droite">
                                                   
      <h3>
                               Le staff                     
      </h3>
                                         
      <div class="pa_staff">
                      
         <div class="staff_pa">
                  <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/433927imgstaff.png" />     
            <div class="contenu_staff_pa">
                     Pseudo<br /><a href="#">MP</a><br /><span style="font-weight: bold; color: #509d2e;">Présent</span>           
            </div>
                     
         </div>
         <div class="staff_pa">
                  <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/433927imgstaff.png" />     
            <div class="contenu_staff_pa">
                     Pseudo<br /><a href="#">MP</a><br /><span style="font-weight: bold; color: #509d2e;">Présent</span>           
            </div>
                     
         </div>
         <div class="staff_pa">
                  <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/433927imgstaff.png" />     
            <div class="contenu_staff_pa">
                     Pseudo<br /><a href="#">MP</a><br /><span style="font-weight: bold; color: #509d2e;">Présent</span>           
            </div>
                     
         </div>
         <div class="staff_pa">
                  <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/433927imgstaff.png" />     
            <div class="contenu_staff_pa">
                     Pseudo<br /><a href="#">MP</a><br /><span style="font-weight: bold; color: #509d2e;">Présent</span>           
            </div>
                     
         </div>
         <div class="staff_pa">
                  <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/433927imgstaff.png" />     
            <div class="contenu_staff_pa">
                     Pseudo<br /><a href="#">MP</a><br /><span style="font-weight: bold; color: #509d2e;">Présent</span>           
            </div>
                     
         </div>
         <div class="staff_pa">
                  <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/433927imgstaff.png" />     
            <div class="contenu_staff_pa">
                     Pseudo<br /><a href="#">MP</a><br /><span style="font-weight: bold; color: #509d2e;">Présent</span>           
            </div>
                     
         </div>
                          
      </div>
                        <br />               
      <h3>
                           Prédéfinis                 
      </h3>
                              <a href="#" class="pa_predef"><img src="https://img4.hostingpics.net/pics/839319Sanstitre1.jpg" /></a> <a href="#" class="pa_predef"><img src="https://img4.hostingpics.net/pics/839319Sanstitre1.jpg" /></a> <a class="pa_predef" href="#"><img src="https://img4.hostingpics.net/pics/839319Sanstitre1.jpg" /></a> <a class="pa_predef" href="#"><img src="https://img4.hostingpics.net/pics/839319Sanstitre1.jpg" /></a> <br /><br />         
      <h3>
                   Top sites         
      </h3>
                                  <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/297120topsite1.png" /></a> <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/952485topsite2.png" /></a> <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/167314topsite3.png" /></a> <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/528192topsite4.png" /></a>         
   </div>
                                            
   <div class="clear">
                                                                             
   </div>
            
</div>

Et pour le CSS :

Code:

/*********************************** PAGE D'ACCUEIL ***********************************/

#pa {
  width: 96%;
  padding: 2%;
  margin: auto;
  background: #fff;
  font-size: 12px;
  font-family: calibri;
}

#pa a {
  color: #595551;
}

#pa h2, #pa h3, #pa h4 {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
}

#pa h2 {
  font-size: 48px;
  text-align: center;
  color: #f7e7a6;
}

#pa h3 {
  text-align: left;
  color: #f3d3ba;
  font-size: 18px;
}

#pa_droite h3 {
  text-align: center;
  margin-bottom: 4%;
}

#pa h4 {
  text-align: center;
  color: #f3d3ba;
  font-size: 20px;
  margin-bottom: 2%;
}

#pa_gauche {
  width: 70%;
  float: left;
  border-right: 2px solid #fbf3c7;
}

#pa_droite {
  width: 29%;
  float: right;
  text-align: center;
}

.pa_contexte {
  width: 98%;
  height: 100px;
  overflow: auto;
  text-align: left;
  color: #595551;
}

.pa_bloc_liens {
  width: 100%;
  background: #fbf3c7;
  color: #f3d3ba;
  font-size: 18px;
  text-transform: uppercase;
  padding: 2% 0;
}

.pa_bloc_liens a {
  color: #f3d3ba !important;
  font-weight: bold;
}

.pa_bloc_liens a:hover {
  color: #b6a08d !important;
}

.pa_copains, .pa_news {
  text-align: left;
  float: left;
}

.pa_copains {
  border-right: 2px solid #fbf3c7;
  width: 48%;
}

.pa_copains img {
  margin: 2% 4% 0 0;
}

.pa_news {
  width: 46%;
  padding: 2%;
}

.pa_predef img {
  margin: 0 2% 0 0 !important;
}

.clear {
  clear: both;
}

.staff_pa {
  width: 60px;
  height: 77px;
  display: inline-block;
  margin: 0% 4% 6% 5%;
}

.staff_pa_image {
  position: relative;
  z-index: 2;
  margin: 0;
}

.staff_pa:hover .staff_pa_image {
  z-index: 1;
  opacity: .5;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
}

.contenu_staff_pa {
  position: relative;
  display: block;
  width: 60px;
  top: -100%;
  height: 59px;
  padding-top: 30%;
  z-index: 1;
}

Mer 9 Aoû - 18:10

Merci pour les codes ! Du coup j'ai installé, et décidément depuis ce matin tous les codes ne s'affichent pas comme il faut x'D Voici ce que ça donne : ICI et j'ai rajouté en plus (en rouge) ce sorte de petit cadre qui reste, est-il possible de l'enlever ? x]

Mer 9 Aoû - 18:26

Je peux avoir le lien vers ton fofo test stp ?

Mer 9 Aoû - 18:29

Le voici : http://academy-waverly.forumactif.com/

Mer 9 Aoû - 20:58

Vu sur Discord, commande terminée :3