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
    Halloween
    FémininAge : 22Messages : 9733

    le Dim 15 Juin 2014 - 19:38

    Rappel du premier message :

    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 !
    Sentenza
    MasculinAge : 32Messages : 95

    le Ven 12 Sep 2014 - 16:00

    merci
    Milou
    FémininAge : 17Messages : 163

    le Sam 20 Sep 2014 - 18:15

    merci !



    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Dim 19 Oct 2014 - 14:45

    Magnifique encore merciiiiii *-*



    Just want to be yours.
    Piratress
    FémininAge : 19Messages : 188

    le Lun 20 Oct 2014 - 21:03

    Merci *-*
    TimeToSmile
    FémininAge : 18Messages : 40

    le Mar 21 Oct 2014 - 19:00

    C'est superbe merci !!! 8D
    Féhéla
    FémininAge : 43Messages : 232

    le Mar 21 Oct 2014 - 22:57

    merci
    Akina-chan
    FémininAge : 23Messages : 137

    le Jeu 23 Oct 2014 - 18:01

    Merci beaucoup <3
    Nevr0z
    FémininAge : 28Messages : 74

    le Dim 26 Oct 2014 - 1:56

    Merci !
    0smose
    FémininAge : 21Messages : 153

    le Sam 8 Nov 2014 - 17:15

    J'adore !!





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    Patou972
    FémininAge : 38Messages : 165

    le Mer 12 Nov 2014 - 4:41

    Le rendu est super, merci beaucoup
    Trenz
    MasculinAge : 14Messages : 44

    le Mer 12 Nov 2014 - 7:09

    Merci. =D
    picka234
    Age : 51Messages : 420

    le Dim 16 Nov 2014 - 18:46

    cheers cheers cheers cheers



    Meylah
    FémininAge : 15Messages : 60

    le Dim 16 Nov 2014 - 19:04

    Simple et jolie. Merci du partage.
    Sweet Angel
    FémininAge : 33Messages : 125

    le Mer 24 Déc 2014 - 12:39

    Merci
    Dreamyland
    FémininAge : 19Messages : 87

    le Jeu 8 Jan 2015 - 18:11

    Merci
    Risa
    FémininAge : 28Messages : 233

    le Dim 11 Jan 2015 - 23:51

    Merci du partage, je l'utiliserais sans doute pour un prochain thème.
    Lunet
    FémininAge : 19Messages : 27

    le Ven 16 Jan 2015 - 23:20

    Thank you ♥
    Everything.
    FémininAge : 24Messages : 14

    le Mar 27 Jan 2015 - 23:39

    merci beaucoup !
    cynical-echo
    FémininAge : 19Messages : 41

    le Dim 8 Fév 2015 - 16:13

    Très beau ! Merci du partage ! :)
    GreenGage
    FémininAge : 23Messages : 70

    le Dim 8 Fév 2015 - 18:48

    merci !
    reshiram44
    MasculinAge : 18Messages : 304

    le Sam 14 Fév 2015 - 22:43

    Merci



    Adélia
    FémininAge : 18Messages : 15

    le Sam 7 Mar 2015 - 22:42

    très joli, merci beaucoup :)
    pixelman
    FémininAge : 36Messages : 237

    le Jeu 12 Mar 2015 - 19:00

    Merci pour le partage ^^




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Rêveuse
    FémininAge : 14Messages : 30

    le Ven 13 Mar 2015 - 19:25

    Merci!
    Wolftactick
    FémininAge : 15Messages : 69

    le Ven 13 Mar 2015 - 19:33

    Ouaw
    Contenu sponsorisé

    Aujourd'hui à 22:32


      La date/heure actuelle est Sam 21 Jan 2017 - 22:32