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.


    Endless Curse ; PA basique

    Partagez
    avatar
    Halloween
    FémininAge : 22Messages : 9734

    le Dim 15 Juin 2014 - 19:38

    Plop,

    Une vieille page d'accueil retrouvée par hasard que je partage du coup.
    Les codes sont disponibles sous hide, un petit merci ne coûte rien et motive celui ou celle qui partage Wink

    La taille des images du staff est de 100*100px.

    Page d'accueil


    Version  phpBB2 ▬ CSS & HTML ▬ Info-bulles

    Aperçu ▬ www


    CSS
    Code:
    /* --------------------------------- PA --------------------------------- */

    /* Fond de l'accueil */
    .fondpa {
      background-image: url('http://i42.servimg.com/u/f42/13/02/95/50/sans_t50.png');
    }

    /* Blocs de l'accueil */
    .bloc_PA {
      background-color: #B7AC84;
      border-top: 15px solid #544A37;
      border-bottom: 15px solid #544A37;
      width : 300px;
      padding: 10px;
      color: #544A37;
      text-align: justify;
    }

    /* Mise en forme des divers titres de la PA */
    .titre_PA {
      color: #443D2C;
      font-family: arial;
      font-size: 26px;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom : -15px;
      letter-spacing: 1px;
      text-shadow: 1px 1px 0px #000000;
    }

    /* Concerne le premier membre du staff en hover */
    .staff1 {
      display: inline-block;
      width: 100px;
      background: url('http://i42.servimg.com/u/f42/13/02/95/50/tumblr45.png');
      height: 100px;
      white-space: nowrap;
      overflow: hidden;
    }

    .staff1_contenu {
      position: relative;
      width: 100px;
      height: 100px;
      overflow: auto;
      white-space: nowrap;
      background-color: #443D2C;
      font-size: 10px;
      color: #B7AC84;
      text-align: jutsify;
      margin-left : -5px;
      margin-top : -5px;
      padding: 5px;
      opacity: 0;
      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;
    }

    .staff1_contenu:hover {
      opacity: 0.8;
      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;
    }

    /* Concerne le second membre du staff en hover */
    .staff2 {
      display: inline-block;
      width: 100px;
      white-space: nowrap;
      background: url('http://i42.servimg.com/u/f42/13/02/95/50/k11.png');
      height: 100px;
      overflow: hidden;
    }

    .staff2_contenu {
      position: relative;
      width: 100px;
      height: 100px;
      overflow: auto;
      white-space: nowrap;
      background-color: #443D2C;
      font-size: 10px;
      color: #9c9c9c;
      text-align: jutsify;
      margin-left : -5px;
      margin-top : -5px;
      padding: 5px;
      opacity: 0;
      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;
    }

    .staff2_contenu:hover {
      opacity: 0.8;
      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;
    }

    /* --------------------------------- FIN PA --------------------------------- */

    Page d'accueil
    Code:
    <div class="fondpa">
     <br /><br />
     <table style="width: 100%;" cellspacing="2" border="0">
     
     <tbody>
     
     <tr>
     
     <td style="width: 35%;">
     
     <div class="titre_PA">
     Titre forum
     </div>
     
     <div class="bloc_PA" style="height: 350px; overflow: auto;">
     <br />Tener quassari eius quicquid dispendium factum quicquid suae ad eius cogitatum solet caedibus corpus increpuisset ita salutis offensis dispendium cogitatum quicquid existimans etiam increpuisset animus caedibus angustus caedibus animus salutis corpus aut dispendium angustus offensis eius etiam factum luctuosam existimans corpus aut fecit fecit insontium tener solet et existimans insontium offensis levibus ad eius existimans insontium offensis corpus factum ad suae aut animus animus levibus ad dispendium animus ita suae luctuosam eius et caedibus ita offensis eius quicquid dispendium aegrum eius caedibus levibus caedibus offensis insontium factum tener fecit tener aegrum ad solet animus insontium angustus insontium increpuisset dispendium etiam. <a href="#"> La suite</a><br /><br /><br />
     <center>
     <select style="width: 90%" onchange="location = this.options
    [this.selectedIndex].value"><option selected="selected">Les liens importants </option> <option value="#">Le Contexte </option> <option value="#">Le Règlement </option> <option value="#">Guide du visiteur </option> <option value="#">Les Problèmes & Suggestions </option> <option value="#">Les partenariats </option> </select>
     </center>
     
     </div><br /><br />
     <div class="bloc_PA">
     <strong>Annonces & News</strong> Ouverture à venir<br />
     </div>
     
     </td>
     
     <td style="width: 65%;">
     
     <center>
     
     <div class="titre_PA">
     
     <center>
     Bienvenue
     </center>
     
     </div>
     
     <div class="bloc_PA" style="width: 380px;">
     <br /> Bienvenue sur FORUM. Si vous êtes ici, c'est soit que vous êtes très chanceux, soit que vous êtes attirés par notre communauté. Pour les visiteurs curieux, nous vous conseillons de lire en premier lieu notre contexte dans son intégralité pour ne pas avoir de surprise, puis de suivre la procédure. Bien évidement, le staff est là pour répondre à vos questions, n'hésitez donc pas (la partie est ouverte aux invités). Amusez-vous bien ! <br /><br />✏ Avatars réels, personnalités asiatiques ;<br />✏ Prénom + NOM ;<br />✏ 500 mots minimum.
     </div>
     <br /><br />
     <div class="staff1">
     
     <div class="staff1_contenu">
     
     <div align="center">
     <br /><br /><strong>Kanon YUSAKI</strong> <br />★ <a style="color: #B7AC84;" href="#">MP</a><br />★ <a style="color: #B7AC84;" href="#">Profil</a>
     </div>
     
     </div>
     
     </div>
     
     <div class="staff2">
     
     <div class="staff2_contenu">
     
     <div align="center">
     <br /><br /><strong>Emiko YAMAZAKI</strong> <br />★ <a style="color: #B7AC84;" href="#">MP</a> <br />★ <a style="color: #B7AC84;" href="#">Profil</a>
     </div>
     
     </div>
     
     </div>
     <br /><br />
     <div class="titre_PA">
     Thanks
     </div>
     
     <div class="bloc_PA">
     Forum créé à partir de l'idée de base de PSEUDO. PA by Halloween de Never Utopia. <br /> <br />
     <center>
     <a href="http://www.never-utopia.com" target="_blank"><img src="http://img4.hostingpics.net/pics/607783miniban5.jpg" alt="Never-Utopia" title="Never-Utopia : graphisme et aides" /></a>
     </center>
     
     </div>
     
     </center>
     
     </td>
     
     </tr>
     
     </tbody>
     
     </table>
    </div>
     






    Dernière édition par Halloween le Mar 22 Juil 2014 - 17:35, édité 3 fois



    Je mets les voiles, que le vent te soit favorable matelot !
    avatar
    Neva
    FémininAge : 25Messages : 18553

    le Mer 18 Juin 2014 - 18:37

    Hey Hallow !
    Est-ce qu tu pourrais juste commenter quelques class de ton CSS pour indiquer de quoi il s'agit ? Par exemple, tu as plusieurs description et aussi deux contextes. Ca aidera les membres qui ne s'y connaissent pas trop =)

    (au fait, pour opacity et border radius, les préfixes ne sont plus nécessaires http://shouldiprefix.com/ )



     
    avatar
    Halloween
    FémininAge : 22Messages : 9734

    le Sam 21 Juin 2014 - 20:11

    En effet le code était vieillot, j'aurais pu le remettre à jour xD
    C'est donc fait, merci Neva ^^



    Je mets les voiles, que le vent te soit favorable matelot !
    avatar
    Shanyme Thibolt
    FémininAge : 23Messages : 142

    le Dim 27 Juil 2014 - 21:59

    J'adore *^*
    avatar
    Filou
    FémininAge : 25Messages : 138

    le Mar 5 Aoû 2014 - 21:52

    Joli °v°
    avatar
    Leoguillem
    MasculinAge : 17Messages : 137

    le Mer 6 Aoû 2014 - 14:17

    Merci ! Very Happy



    - Je signe Marabout -
    avatar
    Likilou
    MasculinAge : 23Messages : 291

    le Jeu 7 Aoû 2014 - 19:42

    merci



    avatar
    Mephitis.
    FémininAge : 19Messages : 46

    le Dim 10 Aoû 2014 - 21:52

    Merci il est sympa (:
    avatar
    Angie H.-Carter
    FémininAge : 33Messages : 687

    le Lun 11 Aoû 2014 - 18:21

    je le trouve bien je te le prend^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    PLOIM
    FémininAge : 19Messages : 52

    le Lun 11 Aoû 2014 - 18:44

    Merci o/ !
    avatar
    Eshon
    FémininAge : 36Messages : 187

    le Mar 12 Aoû 2014 - 15:17

    Merci ! ^^
    avatar
    Mushu
    FémininAge : 19Messages : 68

    le Mer 13 Aoû 2014 - 16:26

    Joli c: !
    avatar
    Alyssa.B50
    FémininAge : 22Messages : 41

    le Ven 15 Aoû 2014 - 3:13

    Merci beaucoup ^^
    avatar
    Kinjiro
    MasculinAge : 18Messages : 80

    le Ven 15 Aoû 2014 - 17:04

    Ty.



    avatar
    NowSprings
    FémininAge : 18Messages : 35

    le Lun 18 Aoû 2014 - 14:17

    Merci :)



        
    avatar
    Little Melody
    FémininAge : 15Messages : 64

    le Lun 18 Aoû 2014 - 17:47

    Merci <3
    avatar
    Dydy
    FémininAge : 26Messages : 490

    le Lun 18 Aoû 2014 - 18:16

    merci du partage!



    avatar
    Svenn Edwald
    FémininAge : 24Messages : 13

    le Lun 18 Aoû 2014 - 19:19

    mercii ^^
    avatar
    Mikasa
    FémininAge : 19Messages : 155

    le Mar 19 Aoû 2014 - 16:23

    merci !



    [center]
    avatar
    Rynkka
    FémininAge : 18Messages : 117

    le Mar 19 Aoû 2014 - 18:00

    Merci!



    Shinju.dot
    FémininAge : 27Messages : 87

    le Mar 26 Aoû 2014 - 10:50

    merci
    avatar
    Asaliah
    FémininAge : 31Messages : 120

    le Dim 7 Sep 2014 - 16:20

    J'aime beaucoup elle est sobre et vraiment classe. :) Merci !



    avatar
    Draly
    FémininAge : 24Messages : 86

    le Lun 8 Sep 2014 - 19:59

    Un PA qui donne bien envie de la tester.^^ Très beau style.
    avatar
    Nearween
    FémininAge : 18Messages : 205

    le Mer 10 Sep 2014 - 15:37

    merci pour le code ^^



    Jack Frost



           

    I not a dream, I reality


    avatar
    Kiki85
    MasculinAge : 22Messages : 389

    le Mer 10 Sep 2014 - 16:38

    merci du partage :)
    Contenu sponsorisé


      La date/heure actuelle est Mer 29 Mar 2017 - 15:15