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

    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
    Nalyana
    FémininAge : 21Messages : 26

    le Dim 20 Juil 2014 - 17:27

    Très sympa, merci ! :)
    avatar
    Hikarii-P
    FémininAge : 20Messages : 20

    le Lun 21 Juil 2014 - 0:36

    j'aime ! *^*
    avatar
    Sadistic Syndrome
    FémininAge : 25Messages : 84

    le Ven 25 Juil 2014 - 15:47

    Merci ! =)
    avatar
    Piratress
    FémininAge : 20Messages : 215

    le Ven 25 Juil 2014 - 16:26

    Très jolie, j'aime beaucoup merci ! :)
    avatar
    Cupcake-11
    FémininAge : 20Messages : 31

    le Sam 26 Juil 2014 - 20:30

    Superbe merci ♥
    avatar
    O'Daim
    FémininAge : 22Messages : 116

    le Mar 29 Juil 2014 - 1:04

    Elle est aérée, oui, et ça fait du bien ! Merci pour ce partage et ce travail !
    avatar
    Frozen
    FémininAge : 18Messages : 19

    le Mar 29 Juil 2014 - 19:14

    Merci, la page d'accueil est vraiment superbe et assez légère, comme je les aime.  Razz 
    avatar
    Malick
    Age : 23Messages : 159

    le Mer 30 Juil 2014 - 13:21

    Merci



    avatar
    Freya Lazare
    FémininAge : 31Messages : 112

    le Jeu 31 Juil 2014 - 13:26

    Vraiment très sympa Very Happy
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Jeu 31 Juil 2014 - 18:57

    Merci ! ^^
    avatar
    Noruenu
    FémininAge : 25Messages : 123

    le Ven 1 Aoû 2014 - 0:33

      Merci ! 8D
    avatar
    Withy
    FémininAge : 38Messages : 37

    le Sam 2 Aoû 2014 - 0:02

    Très joli travail, merci de le mettre à disposition ! ^-^
    avatar
    Saphire
    FémininAge : 20Messages : 146

    le Sam 2 Aoû 2014 - 16:32

    Très jolie PA
    avatar
    Emelyne
    FémininAge : 36Messages : 77

    le Dim 3 Aoû 2014 - 1:20

    merci
    avatar
    ninouee
    FémininAge : 37Messages : 130

    le Dim 3 Aoû 2014 - 16:02

    C'est magnifique!



    avatar
    Velvet-Mist
    FémininAge : 27Messages : 44

    le Lun 4 Aoû 2014 - 18:09

    Très mignonne! Merci beaucoup! **
    avatar
    Percylove
    FémininAge : 23Messages : 256

    le Mar 5 Aoû 2014 - 5:14

    Trop beau, je veux tester aussi!



    avatar
    shala
    FémininAge : 26Messages : 213

    le Sam 9 Aoû 2014 - 5:18

    merci^^



    avatar
    Camy
    FémininAge : 18Messages : 63

    le Sam 9 Aoû 2014 - 10:09

    Trop jolie, simple et aérée ! Waw !
    avatar
    Cherry'
    FémininAge : 22Messages : 64

    le Dim 10 Aoû 2014 - 10:41

    Très jolie, merci ! :)
    avatar
    TimeToSmile
    FémininAge : 20Messages : 49

    le Dim 31 Aoû 2014 - 16:52

    Très simple et maniable merci !
    avatar
    Stanislav
    FémininAge : 21Messages : 8

    le Dim 31 Aoû 2014 - 20:06

    Joliiie *-*
    avatar
    Little Melody
    FémininAge : 17Messages : 64

    le Lun 1 Sep 2014 - 10:18

    Merci :3
    avatar
    Rumi
    FémininAge : 31Messages : 10

    le Mar 2 Sep 2014 - 4:25

    Encore une fois, merci. Je n'ai pas encore vu une seule de tes créations qui ne soit pas divine.
    avatar
    Invité

    le Sam 6 Sep 2014 - 16:59

    Superbe
    Contenu sponsorisé


      La date/heure actuelle est Lun 18 Juin 2018 - 13:34