AccueilDernières imagesRechercherS'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.

Le Deal du moment : -20%
-20% sur le Lot de 2 écrans PC GIGABYTE ...
Voir le deal
429 €

    PA grise simple

    Lihuén
    Lihuén
    FémininAge : 34Messages : 544

    Mar 4 Nov 2014 - 5:50

    Rappel du premier message :

    Bonjour !

    Voici une PA réalisée suite à la demande de ~Nodoka~ (:

    Voici ce que ça donne : Aperçu

    Lorsque le curseur passe sur les trois ronds du bas, ceux-ci tournent.


    Merci de ne pas enlever le crédit de N-U !

    Si vous rencontrez un problème, vous pouvez venir l'exposer ici.



    HTML

    (À coller dans Panneau d'administration -> Affichage -> Page d'accueil -> Généralités)

    Code:
          <link href="//fonts.googleapis.com/css?family=Fredericka+the Great:400" rel="stylesheet" type="text/css" />   
    <div id="fond_PA">
                                                                                                          
       <div class="petit_bloc_PA">
                                                            <span class="titre_PA">Contexte </span>                                     
          <div id="contexte_PA">
                                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed neque a ante gravida euismod. Nam porttitor mauris vel justo tempor, a pharetra tortor scelerisque. Integer malesuada urna vel lectus gravida consequat. Nulla tempus ullamcorper ex sit amet fermentum. Ut pellentesque vitae erat eget egestas. Aliquam at neque dui. Maecenas hendrerit gravida lorem sit amet placerat. Phasellus iaculis dapibus nisl in convallis. Vestibulum bibendum enim ut mollis faucibus. Morbi luctus sem non tellus porta semper. Nullam vehicula ultricies quam, eu fermentum massa sagittis sit amet. Sed eleifend lobortis tincidunt. Nunc vulputate eros in erat imperdiet, id pellentesque enim imperdiet. Aenean vitae finibus erat, eu laoreet ipsum. Curabitur accumsan dolor eros, in hendrerit dui blandit eu. Morbi lectus dui, euismod eget venenatis ac, mollis eget purus. Nam sollicitudin eu massa sed porttitor. Cras lobortis quam vitae nulla condimentum, in commodo enim lobortis. Curabitur ut leo ligula. Nunc maximus venenatis orci nec sagittis.                                       
          </div>
                                                                                           
       </div>
                                                                                                    
       <div class="grand_bloc_PA">
                                                            <span class="titre_PA">Staff </span>                       
          <div id="img_staff">
                                     <a href="#"><img src="http://1.bp.blogspot.com/_76NVqbOpM2c/TRkdt9DxyyI/AAAAAAAAAOM/Bi0uq2EFpeQ/s400/gray_wolf.jpg" /></a><a href="#"><img src="http://1.bp.blogspot.com/_76NVqbOpM2c/TRkdt9DxyyI/AAAAAAAAAOM/Bi0uq2EFpeQ/s400/gray_wolf.jpg" /></a>             
          </div>
                                                           
       </div>
                                                                                                            
       <div class="petit_bloc_PA">
                                                            <span class="titre_PA">Météo</span>             
          <div id="meteo_PA">
               <img src="http://ales.meteoa12jours.net/wicons/wsymb8_0004_black_low_cloud.png" /><br /> Le ciel est nuageux, et il fait frais. 
          </div>
                     
       </div>
                                                                                                    
       <div class="grand_bloc_PA">
                                                            <span class="titre_PA">Actualités</span>                                 
          <div id="actualites_PA">
                                                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />    Suspendisse et lectus nec massa commodo ornare feugiat ac augue.<br />    Duis quis erat a turpis condimentum lobortis.<br />Mauris vel mauris vel dui suscipit pellentesque eget quis ante.    <br />Vivamus at purus aliquam, rhoncus turpis in, vulputate enim.    <br />Sed fringilla arcu non dictum sagittis.    <br />Suspendisse ac nisl et dui mollis tincidunt.    <br />Sed sed neque quis mi finibus varius sed eget odio.<br />    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />    Vivamus eget augue consectetur, viverra eros quis, efficitur dolor.<br />    Donec at ligula eget est suscipit tempus quis a quam.<br />    Fusce convallis justo sed tellus tempus, eu sagittis turpis tincidunt.<br />    Aliquam eu ante ac urna rhoncus feugiat.<br />    Duis mattis arcu sed ex fermentum condimentum.<br />    Sed malesuada sapien sed augue mollis consectetur.<br />    Phasellus congue lectus eu urna auctor facilisis.<br />    Pellentesque scelerisque quam et efficitur varius.<br />    Maecenas quis mauris vitae arcu ornare sodales faucibus vel massa.<br />                             
          </div>
                                                                                       
       </div>
                                                                                                            
       <div id="partenaires_PA">
                                                            <span class="titre_PA">Partenariats & votes </span>                                         
          <div id="boutons_part">
                                                           <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/573008logo3.jpg" /></a>                                         
          </div>
                                                                                             
          <div id="boutons_vote">
                                                           <a href="#"><img src="http://www.colormake.com/wp-content/uploads/2014/02/631px-Paw_Animal_Rights_symbol.png" /></a><a href="#"><img class="img_part" src="http://www.colormake.com/wp-content/uploads/2014/02/631px-Paw_Animal_Rights_symbol.png" /></a>                                         
          </div>
                                                                                                 
       </div>
                                 <a href="#"><img class="clans_PA" src="http://www.animalcorner.co.uk/wildlife/wolves/graphics/wolf2.jpg" /></a><a href="#"><img class="clans_PA" src="http://www.animalcorner.co.uk/wildlife/wolves/graphics/wolf2.jpg" /></a><a href="#"><img class="clans_PA" src="http://www.animalcorner.co.uk/wildlife/wolves/graphics/wolf2.jpg" /></a><br /><span style="color: #959595; font-size: 10px;">(c) Lihuén sur <a href="http://www.never-utopia.com">Never-Utopia</a></span>                                       
    </div>


    CSS

    (À coller dans Panneau d'administration -> Affichage -> Images et Couleurs -> Couleurs -> Feuille de style CSS)

    Code:
        /*---------------- MISE EN FORME PA -----------------*/
        #fond_PA {
          width: 730px;
          margin: auto;
          background-color: #555555;
          font-size: 11px;
        }
        .titre_PA {
          display: block;
          background-color: #e0e0e0;
          text-align: center;
          font-family: Fredericka the Great;
          font-size: 20px;
        }
        .petit_bloc_PA {
          width: 200px;
          height: 195px;
          background-color: #bdbdbd;
          display: inline-block;
          box-shadow: 0px 0px 2px black;
          margin: 20px 10px 10px 20px;
          position: relative;
        }
        .grand_bloc_PA {
          width: 460px;
          height: 195px;
          background-color: #bdbdbd;
          display: inline-block;
          box-shadow: 0px 0px 2px black;
          margin: 10px 20px 10px 10px;
          position: relative;
        }
        /* MISE EN FORME DU CONTEXTE */
        #contexte_PA {
          padding: 10px;
          text-align: justify;
          height: 150px;
          width: 180px;
          overflow: auto;
          position: absolute;
          color: #3c3c3c;
        }
        /* MISE EN FORME DU STAFF */
        #img_staff {
          height: 195px;
          width: 460px;
          position: absolute;
        }
        #img_staff img {
          height: 150px;
          margin: 10px 20px 0px 20px;
        }
        /* MISE EN FORME METEO */
        #meteo_PA {
          position: absolute;
          text-align: center;
          padding: 5px;
        }
        #meteo_PA img {
          width: 100px;
        }
        /* MISE EN FORME ACTUALITES */
        #actualites_PA {
          padding: 10px;
          text-align: justify;
          height: 150px;
          width: 440px;
          overflow: auto;
          position: absolute;
          color: #3c3c3c;
        }
        /* MISE EN FORME PARTENAIRES */
        #partenaires_PA {
          width: 680px;
          background-color: #bdbdbd;
          display: inline-block;
          box-shadow: 0px 0px 2px black;
          margin: 10px 20px 20px 20px;
        }
        #boutons_part {
          display: inline-block;
          margin-right: 60px;
        }
        #boutons_part img {
          margin: 15px 6px 10px 6px;
        }
        #boutons_vote {
          display: inline-block;
          margin-left: 30px;
        }
        #boutons_vote img {
          width: 30px;
          margin: 10px 15px 10px 0px;
        }
        /* MISE EN FORME TROIS BOUTONS QUI TOURNENT */
        .clans_PA {
          width: 100px;
          height: 100px;
          border-radius: 50px;
          margin: 10px 5px 20px 5px;
          -webkit-transition: 1s ease;
          transition: 1s ease;
        }
        .clans_PA:hover {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }

    Vos commentaires et remerciements sont toujours bienvenus ^^



    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Lun 16 Fév 2015 - 14:52

    merci



    KimmyKinder
    KimmyKinder
    FémininAge : 22Messages : 181

    Lun 16 Fév 2015 - 17:56

    Merci beaucoup !!! <3
    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Sam 21 Fév 2015 - 20:32

    Superbe ^^
    Leelo
    Leelo
    FémininAge : 32Messages : 157

    Jeu 26 Fév 2015 - 20:02

    Merci Miss
    Aile de l'Ange
    Aile de l'Ange
    FémininAge : 25Messages : 110

    Mer 11 Mar 2015 - 17:37

    Merci beaucoup du partage
    Lux'Uriante
    Lux'Uriante
    FémininAge : 34Messages : 21

    Ven 13 Mar 2015 - 15:31

    thanks a lot !
    Fuji1205
    Fuji1205
    FémininAge : 34Messages : 14

    Lun 16 Mar 2015 - 16:23

    Merci du partage =) !
    Pikabouh
    Pikabouh
    FémininAge : 22Messages : 123

    Mar 17 Mar 2015 - 20:44

    Thanks, je vais tenter le code là ^^
    Badaric
    Badaric
    MasculinAge : 33Messages : 26

    Jeu 19 Mar 2015 - 19:27

    Merci !
    Kamesora
    Kamesora
    FémininAge : 31Messages : 93

    Ven 20 Mar 2015 - 12:15

    Merci beaucoup
    Abby Reever
    Abby Reever
    FémininAge : 32Messages : 146

    Dim 22 Mar 2015 - 13:27

    Merci! :)
    Silver Blast
    Silver Blast
    MasculinAge : 24Messages : 78

    Dim 22 Mar 2015 - 17:50

    C'est trop beau ** merci
    Katuro
    Katuro
    FémininAge : 25Messages : 39

    Dim 22 Mar 2015 - 22:25

    Merci ! c:
    Madras
    Madras
    FémininAge : 39Messages : 285

    Ven 3 Avr 2015 - 14:27

    Merci
    pika-cerise
    pika-cerise
    FémininAge : 32Messages : 92

    Ven 10 Avr 2015 - 18:08

    jadore
    Soleilou
    Soleilou
    FémininAge : 23Messages : 49

    Sam 25 Avr 2015 - 20:15

    Merci beaucoup de partager ce code (:
    Il est magnifique, en tout cas
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Lun 27 Avr 2015 - 2:12

    Merci
    Kitty Kat.
    Kitty Kat.
    FémininAge : 29Messages : 86

    Lun 27 Avr 2015 - 14:29

    J'aime beaucoup ! Very Happy
    Rara
    Rara
    FémininAge : 27Messages : 88

    Mar 28 Avr 2015 - 22:13

    Merci!
    Tsumi
    Tsumi
    FémininAge : 26Messages : 39

    Mer 13 Mai 2015 - 15:12

    Merci!
    Gabriielle
    Gabriielle
    FémininAge : 32Messages : 42

    Ven 15 Mai 2015 - 22:51

    merci elle est magnifique
    Keith Sanders
    Keith Sanders
    MasculinAge : 26Messages : 22

    Sam 16 Mai 2015 - 17:25

    Merci du Partage! Very Happy
    Melaly
    Melaly
    FémininAge : 29Messages : 91

    Jeu 21 Mai 2015 - 20:20

    Merci beaucoup :)
    Wolf Valley
    Wolf Valley
    FémininAge : 24Messages : 72

    Sam 6 Juin 2015 - 16:47

    Merci *-*
    Orange Sanguine
    Orange Sanguine
    FémininAge : 27Messages : 86

    Lun 8 Juin 2015 - 5:04

    Merci ^^



    PA grise simple - Page 2 Sans_t11
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:52