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 aérée, simple et en trois colonnes

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Mar 11 Mar 2014 - 19:50

    Rappel du premier message :

    Plop,

    Suite à une demande voici le LS qui en découle.

    Page d'accueil


    Version  phpBB2 ▬ CSS & HTML ▬ Petites rotations

    Aperçu ▬ www


    PA
    Code:
    <div class="fond_PA">
     
    <div class="titre_PA">
     <span style="color: #A55A3A;"> ♛ </span> Bienvenue sur FORUM
    </div>
     
    <center>
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <center>
     
    <div class="titre_bloc">
     Navigation
    </div><br /><a href="http://ombra.purforum.com/t2-reglement" style="color: #A55A3A !important;">Règlement</a><br /><a href="http://ombra.purforum.com/t3-mythe" style="color: #A55A3A !important;">Contexte</a><br /><a href="http://ombra.purforum.com/f4-esprits-a-incarner" style="color: #A55A3A !important;">Esprits à incarner</a><br /><a href="http://ombra.purforum.com/f8-une-question-un-probleme" style="color: #A55A3A !important;">Zone invité</a><br /><a href="http://ombra.purforum.com/t4-description-des-races" style="color: #A55A3A !important;">Espèces</a><br /><br />
    <div class="titre_bloc">
     Top-sites
    </div><a href="http://www.root-top.com/topsite/stupidlamb/in.php?ID=827"><img src="http://img15.hostingpics.net/pics/613387cercueilVampire1.png" /></a>
    </center>
     
    </td>
     
    <td style="width: 50px;">
     
    </td>
     
    <td>
     
    <center>
     
    <div class="titre_bloc">
     Synopsis
    </div><br />
    <center>
     
    <div style="width: 250px; height: 150px; overflow: auto; font-family: arial; text-align: justify;">
     Bienvenue sur Ombra. J'espère que tu es bien conscient d'une chose : si tu ne te méfie pas de tous ces êtres assoiffés de sang, tu y laisseras ta peau... ou plutôt ton sang. Choisi donc bien ton camp, surtout si tu es un Humain. Tu es libre de devenir le serviteur d'un Vampire ou d'un Demi-vampire. Je te déconseille de rester près d'un Dhampire : ils sont certes des tueurs de Vampires, ça ne les empêche pas de détester les Humains. Pire : ils les méprisent. Tu es vraiment prêt pour ça ? Alors, rejoins-nous vite !<br /><br />Ne reste pas sur ta faim et <a href="http://ombra.purforum.com/t3-mythe" style="color: #A55A3A !important;">lis la suite ...</a>
    </div>
     
    </center><br /><br />
    <div class="titre_bloc">
     Nouvelles
    </div><br /> <span style="width: 350px; height: 100px; overflow: auto;"> <span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a> <br /><span style="color: #A55A3A;"> XX/XX </span> Nouveauté <a href="#" style="color: #A55A3A !important;">La suite</a></span>
    </center>
     
    </td>
     
    <td style="width: 20px;">
     
    </td>
     
    <td>
     
    <div class="titre_bloc">
     Staff
    </div><br />
    <center>
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
    </div>
     
    </div><br />
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
    </div>
     
    </div>
     
    </td>
     
    <td>
     
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
    </div>
     
    </div><br />
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/43/33/39/sans_t15.png" style="height: 80px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br /><a href="#" style="color: #A55A3A !important;">MP</a> <a href="#" style="color: #A55A3A !important;">Profil</a>
    </div>
     
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </center>
     <br />
    <div class="titre_bloc">
     Crédits
    </div><br />
    <div class="bloc_crédits">
     Design par <a href="#" style="color: #A55A3A !important;">Nom</a> ; Codage de la PA par <a href="http://www.never-utopia.com/" style="color: #A55A3A !important;">Halloween</a>
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </center>
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <center>
     <img src="http://img15.hostingpics.net/pics/467523ImagePAOmbra.png" style="width: 250px;" />
    </center>
     
    </td>
     
    <td>
     
    <div class="titre_bloc">
     Nos compagnons
    </div><br />
    <div style="width: 400px; height: 50px; overflow: auto;">
     <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a> <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a>
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </div><link href="http://fonts.googleapis.com/css?family=Carrois+Gothic+SC|Vampiro+One|Condiment" rel="stylesheet" type="text/css" />



    CSS
    Code:
    /***************************** MISE EN FORME PA *****************************/

    a {
      text-decoration: none !important;
    }

    a:hover {
      text-decoration: none !important;
    }

    .fond_PA {
      background-image: url('http://i58.servimg.com/u/f58/18/43/33/39/1510.png');
     padding: 15px;
      color: #483433;
      font-size: 11px;
    }

    .titre_PA {
      font-family: 'Condiment', cursive;
      font-size: 45px;
      color: #663924;
    }

    .titre_bloc {
      font-family: 'Vampiro One', cursive;
      font-size: 30px;
      color: #CC8B6E;
      text-align: center;
    }

    .bloc_crédits {
      width: 200px;
      padding: 15px;
     -moz-transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }

    /*** STAFF ***/
    .staff {
      width: 80px;
      height: 80px;
      overflow: hidden;
      background-color: #483433;
    }

    .staff_img {
      position: relative;
      z-index: 2;
      height: 80px;
      margin-left: 0px;
      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;
    }

    .staff:hover .staff_img {
      margin-top: -300px;
      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;
    }

    .staff_description {
      position: relative;
      top: 19em;
      z-index: 1;
      width: 75px;
      height: 75px;
      text-align: center;
      font-size: 11px;
      color: #8c8c8c;
      padding: 2px;
      overflow: auto;
    }

    /***************************** FIN MISE EN FORME PA *****************************/



    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.




    < / Libre service codage >
    avatar
    Mr Lucas
    MasculinAge : 17Messages : 22

    le Lun 30 Juin 2014 - 21:14

    Moi aussi je la trouve belle ! Merci



    avatar
    Filou
    FémininAge : 27Messages : 139

    le Mar 1 Juil 2014 - 17:48

    Joli !
    Merci de la partager avec nous ^^
    Miyoshi
    FémininAge : 23Messages : 54

    le Mer 2 Juil 2014 - 11:48

    Très jolie. :3
    avatar
    Mikasa
    FémininAge : 20Messages : 162

    le Mer 2 Juil 2014 - 19:55

    J'adore, elle est magnifique ! Tu est vraiment bon !




    Signa:


    avatar
    NaruChan
    FémininAge : 16Messages : 36

    le Jeu 3 Juil 2014 - 17:34

    Elle est superbe *w*
    avatar
    Nearween
    FémininAge : 19Messages : 208

    le Dim 6 Juil 2014 - 12:02

    Merci pour le code Very Happy





    Stand by Me
    Toranpu
    FémininAge : 19Messages : 15

    le Dim 6 Juil 2014 - 21:13

    Trés jolie page d'accueille! Bravo
    avatar
    Nileeda
    FémininAge : 22Messages : 42

    le Lun 7 Juil 2014 - 3:26

    Merci ! :3
    avatar
    wiise
    FémininAge : 25Messages : 50

    le Mar 8 Juil 2014 - 10:50

    Ultra fan ! Quelque chose de simple et harmonieux, j'adore !



    avatar
    Phibula
    FémininAge : 25Messages : 15

    le Mar 8 Juil 2014 - 13:05

    Superbe. *-*
    avatar
    Swan2
    FémininAge : 19Messages : 49

    le Mar 8 Juil 2014 - 15:02

    Waow, merci beaucoup du partage ! ^^
    avatar
    Shuu-Shuu
    FémininAge : 22Messages : 196

    le Mar 8 Juil 2014 - 17:33

    merci :)
    avatar
    Neko Mimi
    FémininAge : 27Messages : 162

    le Mer 9 Juil 2014 - 15:54

    J'aime beaucoup je te l'emprunte et merci ♥



    avatar
    Kathee
    FémininAge : 25Messages : 667

    le Dim 13 Juil 2014 - 11:05

    N'en veux ! *.* (Merchi  Very Happy  )



    • Nous serions ravis de vous accueillir •


    • Venez donc voir ce petit petit fofo •
    avatar
    Susan Storm
    FémininAge : 38Messages : 77

    le Lun 14 Juil 2014 - 17:43

    Mercii Very Happy
    avatar
    Mordiern
    FémininAge : 40Messages : 282

    le Mar 15 Juil 2014 - 11:11

    Merci pour cette jolie PA
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Mer 16 Juil 2014 - 20:55

    Merci <3
    avatar
    catkiller
    FémininAge : 23Messages : 70

    le Mer 16 Juil 2014 - 23:13

    J'adore  :love: 
    avatar
    Furries
    FémininAge : 21Messages : 34

    le Jeu 17 Juil 2014 - 9:49

    Sympatique j'aime bien !
    avatar
    Kinjiro
    MasculinAge : 19Messages : 80

    le Jeu 17 Juil 2014 - 10:54

    Thanks !



    avatar
    Fleur2--lys
    FémininAge : 23Messages : 2

    le Jeu 17 Juil 2014 - 14:12

    Magnifique ! Very Happy
    avatar
    Civin
    FémininAge : 21Messages : 11

    le Sam 19 Juil 2014 - 16:29

    Wow, vraiment classe, merci Very Happy
    avatar
    Fayzl4D
    MasculinAge : 22Messages : 84

    le Sam 19 Juil 2014 - 16:42

    merci
    avatar
    Nord
    MasculinAge : 18Messages : 169

    le Sam 19 Juil 2014 - 17:09

    Jolie ce PA !
    avatar
    Gouttou †
    FémininAge : 20Messages : 50

    le Dim 20 Juil 2014 - 10:55

    merci ♥



    Contenu sponsorisé


      La date/heure actuelle est Ven 20 Juil 2018 - 22:25