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 grise simple

    Partagez
    avatar
    Lihuén
    FémininAge : 28Messages : 544

    le 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 ^^



    avatar
    Voyageur-B21E3
    MasculinAge : 24Messages : 35

    le Mer 16 Nov 2016 - 17:25

    Merci !
    avatar
    Mr Kent
    MasculinAge : 23Messages : 23

    le Sam 26 Nov 2016 - 2:45

    Merci beaucoup
    avatar
    flowi
    FémininAge : 15Messages : 7

    le Dim 18 Déc 2016 - 11:12

    Merci :)
    avatar
    Plume Rusée
    FémininAge : 12Messages : 13

    le Mar 20 Déc 2016 - 11:31

    Merci c'est très beau!
    avatar
    Pearlqueen
    FémininAge : 26Messages : 13

    le Mar 20 Déc 2016 - 12:39

    Merci pour ce joli partaage
    avatar
    Phenoux
    FémininAge : 14Messages : 2

    le Jeu 22 Déc 2016 - 10:05

    Merci c'est très joli! 😍
    avatar
    Phenoux
    FémininAge : 14Messages : 2

    le Jeu 22 Déc 2016 - 10:05

    Merci c'est très joli! 😍
    avatar
    Adou6928
    MasculinAge : 27Messages : 19

    le Mar 27 Déc 2016 - 9:14

    Très beau code
    avatar
    VincentWeever
    MasculinAge : 21Messages : 57

    le Mar 3 Jan 2017 - 18:16

    Merci
    avatar
    Nymeria.
    FémininAge : 23Messages : 307

    le Jeu 19 Jan 2017 - 3:28

    Merci :heart:
    avatar
    IceCreamMaster
    FémininAge : 17Messages : 74

    le Sam 4 Fév 2017 - 19:37

    merci





    Eat ice cream everydays !
    avatar
    Ysandre
    FémininAge : 24Messages : 16

    le Sam 4 Mar 2017 - 19:36

    merci
    avatar
    Luxuria
    FémininAge : 21Messages : 83

    le Lun 13 Mar 2017 - 17:08

    merciii *-*
    avatar
    Kilda
    FémininAge : 38Messages : 73

    le Lun 5 Juin 2017 - 22:33

    Merci :3
    avatar
    Laurolay
    FémininAge : 14Messages : 101

    le Jeu 8 Juin 2017 - 10:11

    Merci c'est super !
    avatar
    Jixdu
    FémininAge : 17Messages : 36

    le Jeu 29 Juin 2017 - 20:55

    J'aime beaucoup, merci !
    avatar
    John:
    MasculinAge : 25Messages : 56

    le Sam 8 Juil 2017 - 14:32

    merci c'est magnifique
    avatar
    Ookami Shiroi
    FémininAge : 26Messages : 73

    le Lun 17 Juil 2017 - 21:17

    C'est parfait merci
    avatar
    Lili Shimizu
    FémininAge : 31Messages : 25

    le Jeu 20 Juil 2017 - 17:28

    Bravo et merci beaucoup !
    Pile ce qu'il me fallait en plus ~
    avatar
    Yurika Yozo
    FémininAge : 19Messages : 12

    le Sam 19 Aoû 2017 - 19:46

    merci
    avatar
    charlint
    FémininAge : 19Messages : 30

    le Ven 1 Sep 2017 - 23:43

    mercii
    avatar
    Kitsuki
    FémininAge : 18Messages : 22

    le Mar 12 Sep 2017 - 23:26

    Merci !
    avatar
    icequeen38
    FémininAge : 25Messages : 49

    le Lun 30 Oct 2017 - 21:39

    merci pour le partage
    avatar
    Draly
    FémininAge : 25Messages : 109

    le Sam 27 Jan 2018 - 11:04

    Merci du partage ^^
    avatar
    phenixia74
    FémininAge : 40Messages : 50

    le Lun 5 Fév 2018 - 7:53

    Merci pour le partage ♥
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Sep 2018 - 11:48