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 : 23Messages : 9741

    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 déménage sur NMD o/
    Mon codebook
    avatar
    Sentenza
    MasculinAge : 33Messages : 95

    le Ven 12 Sep 2014 - 16:00

    merci
    avatar
    Milou
    FémininAge : 18Messages : 163

    le Sam 20 Sep 2014 - 18:15

    merci !



    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Dim 19 Oct 2014 - 14:45

    Magnifique encore merciiiiii *-*



    Just want to be yours.
    avatar
    Piratress
    FémininAge : 20Messages : 213

    le Lun 20 Oct 2014 - 21:03

    Merci *-*
    avatar
    TimeToSmile
    FémininAge : 19Messages : 47

    le Mar 21 Oct 2014 - 19:00

    C'est superbe merci !!! 8D
    avatar
    Féhéla
    FémininAge : 44Messages : 233

    le Mar 21 Oct 2014 - 22:57

    merci
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Jeu 23 Oct 2014 - 18:01

    Merci beaucoup <3
    avatar
    Nevr0z
    FémininAge : 29Messages : 74

    le Dim 26 Oct 2014 - 1:56

    Merci !
    avatar
    0smose
    FémininAge : 22Messages : 164

    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.
    avatar
    Patou972
    FémininAge : 38Messages : 167

    le Mer 12 Nov 2014 - 4:41

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

    le Mer 12 Nov 2014 - 7:09

    Merci. =D
    avatar
    picka234
    Age : 52Messages : 440

    le Dim 16 Nov 2014 - 18:46

    cheers cheers cheers cheers



    avatar
    Meylah
    FémininAge : 16Messages : 60

    le Dim 16 Nov 2014 - 19:04

    Simple et jolie. Merci du partage.
    avatar
    Sweet Angel
    FémininAge : 34Messages : 147

    le Mer 24 Déc 2014 - 12:39

    Merci
    avatar
    Dreamyland
    FémininAge : 20Messages : 87

    le Jeu 8 Jan 2015 - 18:11

    Merci
    avatar
    Risa
    FémininAge : 29Messages : 238

    le Dim 11 Jan 2015 - 23:51

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

    le Ven 16 Jan 2015 - 23:20

    Thank you ♥
    avatar
    Everything.
    FémininAge : 25Messages : 14

    le Mar 27 Jan 2015 - 23:39

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

    le Dim 8 Fév 2015 - 16:13

    Très beau ! Merci du partage ! :)
    avatar
    GreenGage
    FémininAge : 24Messages : 73

    le Dim 8 Fév 2015 - 18:48

    merci !
    avatar
    reshiram44
    MasculinAge : 19Messages : 353

    le Sam 14 Fév 2015 - 22:43

    Merci



    avatar
    Adélia
    FémininAge : 19Messages : 17

    le Sam 7 Mar 2015 - 22:42

    très joli, merci beaucoup :)
    avatar
    pixelman
    FémininAge : 37Messages : 239

    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'.... "

    avatar
    Rêveuse
    FémininAge : 15Messages : 43

    le Ven 13 Mar 2015 - 19:25

    Merci!
    Wolftactick
    FémininAge : 16Messages : 71

    le Ven 13 Mar 2015 - 19:33

    Ouaw
    Contenu sponsorisé


      La date/heure actuelle est Lun 20 Nov 2017 - 18:11