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 : 9754

    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
    Thibzer
    MasculinAge : 22Messages : 4

    le Dim 24 Déc 2017 - 12:43

    Merci bien !
    avatar
    Camomille
    FémininAge : 18Messages : 58

    le Ven 12 Jan 2018 - 17:13

    Magnifique, je te remercie :3
    avatar
    -Cobra-
    MasculinAge : 19Messages : 32

    le Dim 14 Jan 2018 - 2:12

    merci
    avatar
    Orochimaru
    FémininAge : 28Messages : 209

    le Mar 16 Jan 2018 - 16:18

    Vraiment chouette comme PA Very Happy
    Merci du partage et beau travail Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Chocolou
    FémininAge : 24Messages : 109

    le Mar 13 Fév 2018 - 23:50

    Wouhaaa D: j'adore ! merciiii
    avatar
    Spoon
    FémininAge : 24Messages : 16

    le Dim 4 Mar 2018 - 13:23

    très chouette pa ! merci beaucoup ! :heart:
    avatar
    Slyshaw
    MasculinAge : 17Messages : 12

    le Lun 5 Mar 2018 - 20:11

    Merci
    avatar
    Amakhaza
    FémininAge : 15Messages : 52

    le Mar 6 Mar 2018 - 9:37

    c'est beeeeeeeeeeeeeau ♥
    avatar
    Sashimisushi
    FémininAge : 23Messages : 11

    le Mar 27 Mar 2018 - 13:37

    Merci !
    avatar
    MalOuw
    FémininAge : 21Messages : 6

    le Lun 2 Avr 2018 - 22:51

    Très jolie, merci :)
    avatar
    Noir Black
    FémininAge : 32Messages : 33

    le Sam 14 Avr 2018 - 21:36

    merci^^
    avatar
    Lyana
    MasculinAge : 18Messages : 22

    le Sam 28 Avr 2018 - 2:34

    Merci x3
    avatar
    TheDrakLord
    MasculinAge : 22Messages : 59

    le Lun 30 Avr 2018 - 18:57

    Très jolie merci beaucoup



    avatar
    Aoi Kiseki
    FémininAge : 26Messages : 105

    le Mar 1 Mai 2018 - 19:49

    Merci
    avatar
    lelie25
    FémininAge : 26Messages : 115

    le Lun 7 Mai 2018 - 19:15

    merci je vais tester
    avatar
    Amacky
    FémininAge : 26Messages : 133

    le Mar 15 Mai 2018 - 18:22

    Merci beaucoup
    avatar
    soulscythe
    MasculinAge : 27Messages : 19

    le Mar 15 Mai 2018 - 21:04

    Merci !
    avatar
    Aëlia
    FémininAge : 27Messages : 4

    le Sam 19 Mai 2018 - 12:32

    Trop jolie ! Je veux la tester **
    Merci pour le partage !
    avatar
    Alouarn
    MasculinAge : 27Messages : 127

    le Sam 4 Aoû 2018 - 23:38

    Merci beaucoup pour cette magnifique PA ! **
    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Sep 2018 - 11:11