AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    PA colorée

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Sam 19 Juil 2014 - 15:09

    Rappel du premier message :

    Plop,

    /!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



    Page d'Accueil


    HTML & CSS ▬ Info-bulle et effets au survol des liens
    Aperçu ▬ www



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

    /* Fond de la PA */
    .PA_générale {
      background-color: #EFEFEF;
      width: 750px;
      padding: 20px;
      border: 3px solid #ED8E69;
      text-align: justify;
    }

    /* Mise en forme du titre de la PA */
    .titre_PA1 {
      font-family: 'Rochester', cursive;
      font-size: 40px;
      text-align: center;
      position: relative;
      top: -1.4em;
      color: #DE511B;
    }

    /* Mise en forme des divers blocs */
    .bloc_PA {
      background-color: #E4F7B9;
      text-align: justify;
      color: #55404D;
    }

    /* Mise en forme des divers blocs au survol */
    .bloc_PA:hover {
      border-left: 2px solid #ED8E69;
      border-right: 2px solid #ED8E69;
    }

    /* Mise en forme des titres des blocs */
    .bloc_titre_PA {
      background-color: #B5DCEA;
      font-family: 'Amatic SC', cursive;
      transform: capslock;
      font-size: 24px;
      text-align: center;
      color: #F9F4F2;
      font-weight: bold;
    }


    /* Mise en forme des liens présents dans les blocs au survol */
    .bloc_PA a:hover{
      text-decoration: none !important;
    }

    /* Mise en forme particulière du bloc de navigation */
    .bloc_PA_nav {
      background-color: #E4F7B9;
      text-align: justify;
      color: #55404D;
    }

    /* Mise en forme du bloc navigation au survol */
    .bloc_PA_nav:hover {
      border-left: 2px solid #ED8E69;
      border-right: 2px solid #ED8E69;
    }

    /* Mise en forme des liens du bloc navigation */
    .bloc_PA_nav a{
      color: #ED8E69 !important;
      font-family: 'Julius Sans One', sans-serif;
      font-size: 15px;
      font-weight: bold;
    }

    /* Mise en forme des liens du bloc navigation au survol */
    .bloc_PA_nav a:hover{
      font-style: italic;
      text-decoration: none !important;
      color: #4B675B !important;
      font-family: 'Finger Paint', cursive;
    }

    /* Coulissement du staff */

    .staff {
      width: 275px;
      height: 50px;
      overflow: hidden;
    }

    .staff_img {
      position: relative;
      z-index: 2;
      width: 275px;
      height: 50px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .staff:hover .staff_img {
      margin-top: -100px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .staff_description {
      position: relative;
      z-index: 1;
      width: 275px;
      height: 50px;
      margin-top: 50px;
      text-align: justify;
      font-size: 11px;
      color: #8c8c8c;
      padding: 2px;
      overflow: auto;
      background-color: #F3FCE0;
    }

    /* --------------------------------- FIN PAGE D'ACCUEIL --------------------------------- */


    PA
    Code:
    <div style="background-color: #F9F4F2;">
        <br /><br />
       <div class="PA_générale">
          
          <div class="titre_PA1">
              Bienvenue sur le forum
          </div>
          
          <center>
             
             <table>
                
                <tbody>
                   
                   <tr>
                      
                      <td>
                         
                         <div class="bloc_PA_nav">
                            
                            <div class="bloc_titre_PA" style="width: 290px;">
                                <strong> Navigation</strong>
                            </div>
                            
                            <div style="width: 250px; height: 80px; overflow: auto; padding: 20px;">
                                <span style="color: #C43636; font-size: 15px;"><strong>♆</strong></span> <a href="#">Navigation</a> <br /><span style="color: #C43636; font-size: 15px;"><strong>♆</strong></span> <a href="#">Navigation</a> <br /><span style="color: #C43636; font-size: 15px;"><strong>♆</strong></span> <a href="#">Navigation</a> <br /><span style="color: #C43636; font-size: 15px;"><strong>♆</strong></span> <a href="#">Navigation</a>
                            </div>
                             <br />
                         </div>
                         
                      </td>
                      
                      <td>
                         
                         <div class="bloc_PA">
                            
                            <div class="bloc_titre_PA" style="width: 100%;">
                                <strong>Contexte</strong>
                            </div>
                            
                            <div style="width: 380px; height: 100px; overflow: auto; padding: 10px;">
                                Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis.
                            </div>
                             <br />
                         </div>
                         
                      </td>
                      
                   </tr>
                   
                   <tr>
                      
                      <td>
                          <br />
                         <center>
                            
                            <div class="bloc_PA">
                               
                               <div class="bloc_titre_PA" style="width: 290px;">
                                   <strong> Staff</strong>
                               </div>
                               
                               <div style="width: 250px; padding-left: 7px; padding-right: 7px; padding-bottom: 7px;">
                                   <br />
                                  <div class="staff">
                                     
                                     <div class="staff_img">
                                         <img src="http://i39.servimg.com/u/f39/18/40/69/79/52185210.png" />
                                     </div>
                                     
                                     <div class="staff_description">
                                        
                                        <center>
                                            <span style="color: #74A550 ! important; font-family: 'Oswald', sans-serif; font-size: 16px;"> Pseudo Monmien</span> | <span style="color: rgb(228, 155, 20); font-family: 'Oswald', sans-serif; font-size: 16px;"> Rang </span><br /> <span style="font-family: 'Amatic SC',cursive; font-size: 18px; text-align: center; color: #5EAED0; font-weight: bold;"> Présent </span> <span style="color: #C43636; font-size: 15px;"><strong>♆</strong></span> <a href="#" style="font-family: 'Amatic SC',cursive; font-size: 18px; font-weight: bold; color: #D67365 !important;">Profil</a>
                                        </center>
                                        
                                     </div>
                                     
                                  </div><br />
                                  <div class="staff">
                                     
                                     <div class="staff_img">
                                         <img src="http://i39.servimg.com/u/f39/18/40/69/79/52185210.png" />
                                     </div>
                                     
                                     <div class="staff_description">
                                        
                                        <center>
                                            <span style="color: #74A550 ! important; font-family: 'Oswald', sans-serif; font-size: 16px;"> Pseudo Monmien</span> | <span style="color: rgb(228, 155, 20); font-family: 'Oswald', sans-serif; font-size: 16px;"> Rang </span><br /> <span style="font-family: 'Amatic SC',cursive; font-size: 18px; text-align: center; color: #5EAED0; font-weight: bold;"> Présent </span> <span style="color: #C43636; font-size: 15px;"><strong>♆</strong></span> <a href="#" style="font-family: 'Amatic SC',cursive; font-size: 18px; font-weight: bold; color: #D67365 !important;">Profil</a>
                                        </center>
                                        
                                     </div>
                                     
                                  </div>
                                  
                               </div>
                               
                            </div>
                            
                         </center>
                         
                      </td>
                      
                      <td>
                          <br />
                         <div class="bloc_PA">
                            
                            <div class="bloc_titre_PA" style="width: 100%;">
                                <strong>Informations</strong>
                            </div>
                            
                            <div style="width: 380px; height: 81px; overflow: auto; padding: 20px;">
                                Mortalem incertus idem omnes incertus futuris saluti futuris quaedam de modum ac civitatibus agitare mortalem agentes industria futuris de in quaedam civitatibus sunt in nequo exarsit civitatibus casu incertus de in conducentia omnes ac idem ac suae industria suae ultra itinera remoti casu suae modum de agitare civitatibus omnes nequo agentes nequo ac per modum agitare de ultra sunt nequo agitare itinera omnes ac industria Constantius incertus incertus milites perviis conducentia conducentia conaretur de ultra industria modum saluti omnes agentes omnes conaretur modum perviis casu casu incertus Constantius de modum idem de omnes Constantius cognito per ultra incertus Constantius civitatibus.
                            </div>
                             <br />
                         </div>
                         
                      </td>
                      
                   </tr>
                   
                </tbody>
                
             </table>
              <br />
             <div class="bloc_PA" style="width: 715px;">
                
                <div class="bloc_titre_PA" style="width: 100%;">
                    <strong>Nouveautés</strong>
                </div>
                
                <div style="width: 690px; height: 100px; overflow: auto; padding: 10px;">
                    Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis. Gestus sit speciem tibiaeque et nunc studiorum clausis sonu paucae nunc philosopho exundant non artium ita instrumenta instrumenta carpentorum in cultibus carpentorum levia sonu domus cantor cultibus in in organa et et hydraulica bybliothecis locum ludibriis lyrae et histrionici studiorum ritu studiorum doctor histrionici domus paucae gestus sit ita lyrae clausis antea sepulcrorum clausis et organa antea accitur nunc ad sonu non philosopho sit accitur histrionici exundant denique oratoris celebratae in antea vocali levia domus fidium paucae cum pro domus ad studiorum ignaviae et ad in celebratae instrumenta exundant fidium et artium tinnitu ludibriis et et seriis ingentes vocali bybliothecis.
                </div>
                 <br />
             </div>
             
          </center>
           <br />
          <center>
             
             <table>
                
                <tbody>
                   
                   <tr>
                      
                      <td>
                         
                         <div class="bloc_PA_nav">
                            
                            <div class="bloc_titre_PA" style="width: 290px;">
                                <strong>Top Sites</strong>
                            </div>
                            
                            <div style="width: 250px; height: 40px; overflow: auto; padding: 20px;">
                               
                               <center>
                                   <a href="#" target="_blank"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a> <a href="#" target="_blank"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a> <a href="#" target="_blank"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a> <a href="#" target="_blank"><img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" /></a>
                               </center>
                               
                            </div>
                             <br />
                         </div>
                         
                      </td>
                      
                      <td>
                         
                         <div class="bloc_PA">
                            
                            <div class="bloc_titre_PA" style="width: 100%;">
                                <strong>Partenaires</strong>
                            </div>
                            
                            <div style="width: 380px; height: 40px; overflow: auto; padding: 20px;">
                                <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a> <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/932453miniban2.jpg" /></a>
                            </div>
                             <br />
                         </div>
                         
                      </td>
                      
                   </tr>
                   
                </tbody>
                
             </table>
             
          </center>
          
       </div>
    </div>
     <link href="http://fonts.googleapis.com/css?family=Rochester" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Julius+Sans+One|Finger+Paint|Amatic+SC|Oswald" rel="stylesheet" type="text/css" />



    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^




    < / Libre service codage >
    avatar
    Kanzaki
    FémininAge : 24Messages : 13

    le Mar 2 Aoû 2016 - 16:59

    Merci !
    avatar
    HazelW
    FémininAge : 25Messages : 51

    le Lun 8 Aoû 2016 - 22:08

    Troop jolie ! Merci !



    avatar
    Mello
    FémininAge : 20Messages : 52

    le Mar 9 Aoû 2016 - 23:58

    Merci!
    avatar
    shiranui
    MasculinAge : 19Messages : 14

    le Jeu 11 Aoû 2016 - 17:47

    merci :heart:
    avatar
    missp
    FémininAge : 27Messages : 26

    le Dim 14 Aoû 2016 - 20:07

    Merci <3
    Otaku♥
    FémininAge : 17Messages : 7

    le Ven 19 Aoû 2016 - 15:02

    Merci



    avatar
    LegendsOfToday
    FémininAge : 22Messages : 78

    le Ven 19 Aoû 2016 - 15:06

    Merci !
    avatar
    mymywilliamss
    FémininAge : 24Messages : 11

    le Sam 20 Aoû 2016 - 20:19

    merci pour le partage elle est vraiment chouette (a) !
    avatar
    Anaidéia
    FémininAge : 18Messages : 10

    le Dim 4 Sep 2016 - 18:12

    Merciiii Razz
    avatar
    Evil Queen 4ever
    FémininAge : 25Messages : 60

    le Mar 6 Sep 2016 - 1:03

    superbe merci du partage





    avatar
    Shiba Rikubi
    MasculinAge : 23Messages : 22

    le Lun 12 Déc 2016 - 23:35

    Merci pour ce code! ^^
    avatar
    November
    MasculinAge : 17Messages : 50

    le Mer 21 Déc 2016 - 10:46

    Merci! :3
    céleste callisto
    FémininAge : 26Messages : 54

    le Mer 4 Jan 2017 - 18:49

    merci
    avatar
    Ichigo Hoshi
    FémininAge : 24Messages : 22

    le Sam 7 Jan 2017 - 20:49

    Merci :)
    avatar
    mijako
    FémininAge : 25Messages : 83

    le Dim 8 Jan 2017 - 1:43

    merci
    avatar
    Princesa
    FémininAge : 29Messages : 10

    le Mar 24 Jan 2017 - 11:58

    Merci
    avatar
    Soar
    FémininAge : 18Messages : 17

    le Ven 3 Mar 2017 - 20:33

    Merci
    avatar
    Suna
    FémininAge : 13Messages : 31

    le Dim 5 Mar 2017 - 12:36

    Yay ! Jamais vu une PA aussi beau :love: :love: :love: :love:



    Salut à tous, mon nom est Suna en rapport avec Suna (un village de Ninja dans Naruto)
    Mes surnoms son Gaga, Erza et Gaara. j'aime beaucoup les mangas et en particulier Fairy Tail. Je suis fort en rpg, mnof e, codage et nulle à chier en graphisme.

    avatar
    ArgelTown
    MasculinAge : 18Messages : 23

    le Lun 13 Mar 2017 - 13:55

    merci
    avatar
    Cannelle Cannelle
    MasculinAge : 19Messages : 33

    le Lun 3 Avr 2017 - 10:43

    Très jolie :aww:
    avatar
    Aile
    FémininAge : 30Messages : 134

    le Dim 16 Avr 2017 - 15:28

    Merci bien.



    avatar
    naah
    MasculinAge : 24Messages : 79

    le Jeu 27 Avr 2017 - 21:16

    Beau! ♥
    avatar
    Cloud Strife
    MasculinAge : 26Messages : 84

    le Ven 28 Avr 2017 - 20:20

    Merci
    avatar
    Raynold
    MasculinAge : 18Messages : 39

    le Sam 27 Mai 2017 - 22:14

    MRC
    avatar
    NanoiHime
    FémininAge : 19Messages : 562

    le Lun 5 Juin 2017 - 22:56

    merciii



    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:16