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/
    avatar
    Tria
    FémininAge : 20Messages : 125

    le Lun 6 Avr 2015 - 17:17

    Merci beaucoup ! (:



    "Tomber est permis, se relever est ordonné."
    avatar
    Foxe
    FémininAge : 16Messages : 122

    le Mer 6 Mai 2015 - 13:00

    Trop beau *^* merci



    avatar
    F. de l'O.
    FémininAge : 25Messages : 30

    le Mar 19 Mai 2015 - 4:01

    Merci !



    En cours...
    avatar
    Saya Shirayuki
    FémininAge : 24Messages : 149

    le Mer 10 Juin 2015 - 22:45

    Merci du partage !
    avatar
    erika02
    FémininAge : 20Messages : 259

    le Ven 26 Juin 2015 - 7:56

    merci



    avatar
    Reishi
    MasculinAge : 23Messages : 140

    le Jeu 22 Oct 2015 - 19:29

    merci ! Very Happy
    avatar
    Kelalin
    FémininAge : 24Messages : 1507

    le Jeu 22 Oct 2015 - 20:38

    Merci pour le partage ! 「(°ヘ°)
    avatar
    Lilynufare
    FémininAge : 25Messages : 317

    le Mar 5 Juil 2016 - 0:06

    merci :)
    avatar
    Kazuya
    MasculinAge : 24Messages : 1497

    le Mar 19 Juil 2016 - 0:25

    merci ça m'aide



    avatar
    *-Atlas-*
    MasculinAge : 28Messages : 135

    le Ven 14 Oct 2016 - 6:32

    Merci



    avatar
    leviarthrite
    FémininAge : 30Messages : 26

    le Ven 14 Oct 2016 - 17:47

    Merci beaucoup :)
    avatar
    Mariana Greyson
    FémininAge : 18Messages : 62

    le Sam 22 Oct 2016 - 23:52

    Merci
    Shiba Rikubi
    MasculinAge : 22Messages : 18

    le Lun 12 Déc 2016 - 23:39

    Merci! ^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 29 Juin 2017 - 14:36