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
    naah
    MasculinAge : 24Messages : 79

    le Jeu 4 Aoû 2016 - 17:51

    Merci !
    avatar
    Malizia.
    FémininAge : 22Messages : 90

    le Sam 6 Aoû 2016 - 12:38

    Merci!
    avatar
    Wiss
    FémininAge : 14Messages : 53

    le Jeu 18 Aoû 2016 - 12:19

    Merci !




    Autre signa:
    avatar
    Emanon
    MasculinAge : 24Messages : 26

    le Jeu 25 Aoû 2016 - 20:28

    Merci. =)
    avatar
    Yttel
    MasculinAge : 36Messages : 29

    le Mar 6 Sep 2016 - 17:20

    Superbe, merci !
    avatar
    charly45700
    MasculinAge : 22Messages : 30

    le Ven 9 Sep 2016 - 17:08

    merci
    avatar
    Madras
    FémininAge : 33Messages : 281

    le Dim 18 Sep 2016 - 8:12

    Merci du partage
    avatar
    Rowan
    FémininAge : 16Messages : 54

    le Mar 27 Sep 2016 - 10:18

    Superbe PA ! Je la prends !
    avatar
    Lerunee
    MasculinAge : 17Messages : 3

    le Sam 1 Oct 2016 - 0:38

    Beau et simple, merci de le partager ! x)
    avatar
    Jukes
    MasculinAge : 21Messages : 1

    le Sam 1 Oct 2016 - 1:03

    Merci du partage :)
    avatar
    Bryan1997
    MasculinAge : 21Messages : 51

    le Sam 22 Oct 2016 - 23:31

    Jolie merci
    avatar
    Mariana Greyson
    FémininAge : 20Messages : 78

    le Dim 23 Oct 2016 - 0:02

    Merci
    avatar
    Thanos
    MasculinAge : 22Messages : 84

    le Mer 23 Nov 2016 - 22:56

    Merci
    céleste callisto
    FémininAge : 26Messages : 55

    le Jeu 24 Nov 2016 - 1:29

    merci
    avatar
    vaness123
    FémininAge : 27Messages : 10

    le Lun 19 Déc 2016 - 17:47

    J'adore :love:
    avatar
    Estrée
    FémininAge : 27Messages : 114

    le Mar 21 Fév 2017 - 0:54

    Bonsoir ^^ et merci pour ton tuto =)
    avatar
    Ode 14
    FémininAge : 25Messages : 20

    le Lun 20 Mar 2017 - 20:34

    Merci
    avatar
    Sophie2
    FémininAge : 54Messages : 64

    le Ven 31 Mar 2017 - 10:41

    merci
    avatar
    Örmée
    MasculinAge : 31Messages : 129

    le Ven 31 Mar 2017 - 14:39

    Merci =)
    avatar
    Melle Lena
    FémininAge : 43Messages : 298

    le Lun 10 Avr 2017 - 21:16

    Super joli, bravo!
    avatar
    Lilice
    FémininAge : 26Messages : 109

    le Jeu 27 Avr 2017 - 13:18

    Merci ♥
    avatar
    Cloudygirl
    FémininAge : 34Messages : 65

    le Jeu 4 Mai 2017 - 19:57

    Thank you pour le partage =)
    avatar
    Choops
    FémininAge : 27Messages : 8

    le Mar 9 Mai 2017 - 11:11

    Très jolie PA aussi, vraiment beau travail !
    avatar
    SpaceSapien
    MasculinAge : 27Messages : 15

    le Ven 12 Mai 2017 - 20:55

    Sympatoche !! Very Happy
    avatar
    Kamui Kyuuji
    MasculinAge : 26Messages : 30

    le Dim 21 Mai 2017 - 18:42

    Merci.
    Contenu sponsorisé


      La date/heure actuelle est Lun 22 Oct 2018 - 21:36