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
    Sakura Sinister
    FémininAge : 31Messages : 35

    le Lun 22 Mai 2017 - 10:35

    très jolie :)
    avatar
    Momiji-chan
    FémininAge : 20Messages : 38

    le Ven 23 Juin 2017 - 0:18

    Merci :)
    avatar
    Dorin
    FémininAge : 43Messages : 28

    le Sam 1 Juil 2017 - 18:50

    merci
    avatar
    Ombeline30
    FémininAge : 33Messages : 124

    le Dim 2 Juil 2017 - 22:32

    Merci beaucoup c'est trop joli  :love:
    avatar
    Roronoa
    MasculinAge : 26Messages : 4

    le Mar 4 Juil 2017 - 18:43

    Sympa
    avatar
    Sydeale
    FémininAge : 21Messages : 124

    le Mer 19 Juil 2017 - 0:37

    Je te pique tes codes pour la partie staff, merci pour le code o/

    P.S.: j'oublierai pas le crédit !
    avatar
    Lalia
    FémininAge : 18Messages : 40

    le Lun 24 Juil 2017 - 21:31

    Merci :3
    avatar
    Misery Devil
    FémininAge : 28Messages : 163

    le Mar 25 Juil 2017 - 11:48

    sympas



    avatar
    Elyade
    FémininAge : 32Messages : 50

    le Mer 26 Juil 2017 - 22:43

    Cette PA est très claire et précise. Bravo et merci !
    avatar
    allen walker
    FémininAge : 21Messages : 27

    le Ven 4 Aoû 2017 - 18:59

    Merci !
    avatar
    Melgreb
    MasculinAge : 38Messages : 21

    le Ven 11 Aoû 2017 - 0:28

    Merci pour ce partage
    avatar
    Snoow
    MasculinAge : 22Messages : 17

    le Sam 12 Aoû 2017 - 20:42

    Merci !
    avatar
    Talesof91
    FémininAge : 27Messages : 83

    le Dim 13 Aoû 2017 - 16:00

    Très jolie :)
    Merci.
    avatar
    Cythère
    FémininAge : 29Messages : 29

    le Dim 27 Aoû 2017 - 20:18

    Merci :)
    avatar
    Phenixis
    FémininAge : 20Messages : 22

    le Mar 29 Aoû 2017 - 23:07

    Merci pour le partage ♥



    avatar
    KannaFantasy
    FémininAge : 25Messages : 24

    le Mer 13 Sep 2017 - 21:11

    Très belle PA merci Very Happy
    avatar
    Orange Sanguine
    FémininAge : 22Messages : 84

    le Ven 15 Sep 2017 - 22:31

    Merci ^-^ ♥



    avatar
    benficagirl
    FémininAge : 32Messages : 375

    le Dim 15 Oct 2017 - 21:14

    meric :)
    avatar
    Desmnas
    MasculinAge : 20Messages : 12

    le Mer 25 Oct 2017 - 22:49

    Merkiw pour ton beau travail *.*
    avatar
    Coldness
    FémininAge : 14Messages : 53

    le Ven 27 Oct 2017 - 11:44

    Merci beaucoup !
    avatar
    alysszen
    FémininAge : 22Messages : 16

    le Jeu 2 Nov 2017 - 14:24

    C'est super beau ! Super travail
    avatar
    MadSushi
    FémininAge : 22Messages : 25

    le Dim 5 Nov 2017 - 0:23

    Merci :)
    avatar
    Usalpsi
    FémininAge : 33Messages : 10

    le Dim 12 Nov 2017 - 13:18

    Merci beaucoup pour ce code, c'est une belle PA !
    avatar
    Hasuko77
    MasculinAge : 25Messages : 13

    le Jeu 30 Nov 2017 - 12:09

    merci !
    avatar
    Charly0
    Messages : 14

    le Sam 23 Déc 2017 - 22:48

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 17 Juil 2018 - 3:58