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.


    Verte et noire, une PA sobre mais élégante

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Mar 11 Mar 2014 - 22:29

    Plop,

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

    Page d'accueil


    CSS & HTML ▬ Petites rotations

    Aperçu ▬ www


    PA
    Code:
    <div class="fond_PA_1">
     <br /> <br /> <br /><br />
    <div class="fond_PA_2">
     
    <div class="titre">
     Nom forum
    </div>
     <br /><br />
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <center>
     
    <div class="contexte">
     
    <div class="contexte_img">
     <img src="http://25.media.tumblr.com/6d4265b6a129ebc617b2853dc285b740/tumblr_mwapx7oibg1qgfk6po1_r1_500.gif" />
    </div>
     
    <div class="contexte_description">
     
    <div class="lettrine">
     C
    </div>
     eci est un contexte. minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. <a href="#" style="color: #72BB60 !important;">La suite</a>
    </div>
     
    </div>
     
    <div style="clear: both;">
     
    </div>
     
    </center><br />
    <div class="fond_bloc_prédef">
     
    <div class="titre1">
     Prédéfinis
    </div>
     
    <center>
     <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="http://i58.servimg.com/u/f58/18/40/69/79/klihjl10.png" style="width: 60px; border-radius: 100%;" /></a>
    </center>
     
    </div>
     <br />
    <div class="titrecoupsde">
     Nos coups de ♥
    </div>
     
    <div class="fond_bloc_coupsde" style="width: 270px;">
     
    <center>
     <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a>
    </center>
     
    </div>
     
    </td>
     
    <td style="width: 30px;">
     
    </td>
     
    <td>
     
    <div class="fond_bloc_staff">
     
    <div class="titre1">
     Staff
    </div>
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" style="height: 150px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
    </div>
     
    </div>
     
    </td>
     
    <td>
     
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" style="height: 150px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
    </div>
     
    </div>
     
    </td>
     
    <td>
     
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" style="height: 150px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
    </div>
     
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    <center>
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" style="height: 150px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
    </div>
     
    </div>
     
    </td>
     
    <td>
     
    <div class="staff">
     
    <div class="staff_img">
     <img src="http://i58.servimg.com/u/f58/18/40/69/79/sans_t14.png" style="height: 150px;" />
    </div>
     
    <div class="staff_description">
     <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
    </div>
     
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </center>
     
    </div><br />
    <div class="fond_bloc_news">
     
    <div class="titre1">
     New-York Time
    </div>
     <span style="width: 290px; height: 90px; overflow: auto;"> <span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> </span>
    </div><br />
    <div class="fond_bloc_votes">
     
    <table>
     
    <tbody>
     
    <tr>
     
    <td>
     
    <center>
     <img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" />
    </center>
     
    </td>
     
    <td>
     Votez pour nous <a href="#" style="color: #72BB60 !important;">ici</a>.<br />N'hésitez pas à poster pour nos publicités <a href="#" style="color: #72BB60 !important;">ici</a> et <a href="#" style="color: #72BB60 !important;">ici</a>.
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     <br />
    <div class="bloc_crédits">
     Le contexte, l’apparence, les idées sont la propriété du staff de <span style="color: #72BB60 !important;">Forum</span>. Toute reproduction partielle ou totale est interdite.<br />Design par <a href="#" style="color: #72BB60 !important;">Pseudo</a> ; Codage de la PA par <a href="http://www.never-utopia.com/" style="color: #72BB60 !important;">Halloween</a>
    </div>
     <br /><br /> <br /><br />
    </div>
     <br /><br />
    </div>
     <link href="http://fonts.googleapis.com/css?family=Montez" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Mouse+Memoirs" rel="stylesheet" type="text/css" />



    CSS
    Code:
    /************************ MISE EN FORME PAGE D'ACCUEIL ************************/

    .fond_PA_1 {
      width: 750px;
      background-color: #252525;
      border-radius: 20%;
    }

    .fond_PA_2 {
      width: 750px;
      background-color: #0D0D0D;
      border-radius: 30%;
    }

    .titre {
      font-family: 'Montez', cursive;
      font-size: 50px;
      text-align: center !important;
      position: relative;
      top: -0.8em;
      color: #72BB60;
    }

    .titre1 {
      font-family: 'Mouse Memoirs', sans-serif;
      font-size: 30px;
      text-align: center !important;
      position: relative;
      top: -0.5em;
      color: #72BB60;
    }

    .fond_bloc_prédef {
      width: 270px;
      height: 180px;
      padding: 15px;
     background-color: #252525;
    }

    .fond_bloc_coupsde {
      width: 500px;
      padding: 15px;
     margin-top: -20px;
      background-color: #252525;
    }

    .titrecoupsde {
      font-family: 'Montez', cursive;
      font-size: 50px;
      text-align: center !important;
      position: relative;
      top: 0em;
      color: #72BB60;
    }

    .fond_bloc_news {
      width: 300px;
      height: 100px;
      padding: 15px;
     color: #8c8c8c;
      background-color: #252525;
    }

    .fond_bloc_votes {
      width: 300px;
      padding: 15px;
     background-color: #252525;
      color: #8c8c8c;
    }

    .bloc_crédits {
      width: 500px;
      padding: 15px;
     background-color: #252525;
      color: #8c8c8c;
      -moz-transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }

    /*** STAFF ***/

    .fond_bloc_staff {
      width: 300px;
      height: 270px;
      padding: 15px;
     background-color: #252525;
    }

    .staff {
      width: 93px;
      height: 100px;
      overflow: hidden;
      background-color: #414141;
    }

    .staff_img {
      position: relative;
      z-index: 2;
      height: 100px;
      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: -400px;
      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: 26em;
      z-index: 1;
      width: 93px;
      height: 100px;
      text-align: center;
      font-size: 11px;
      color: #8c8c8c;
      padding: 2px;
      overflow: auto;
    }
      


    /*** CONTEXTE QUI COULISSE ***/
    .contexte {
      width: 300px;
      height: 200px;
      overflow: hidden;
      background-color: #252525;
    }

    .contexte_img {
      position: relative;
      z-index: 2;
      width: 300px;
      height: 200px;
      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;
    }

    .contexte:hover .contexte_img {
      margin-left: 400px;
      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;
    }

    .contexte_description {
      position: relative;
      z-index: 1;
      width: 270px;
      height: 200px;
      margin-top: -200px;
      text-align: justify;
      font-size: 11px;
      color: #8c8c8c;
      padding: 10px;
      overflow: auto;
    }

    .lettrine:first-letter {
      font-size: 300%;
      float: left;
      font-family: 'Montez', cursive;
      color: #72BB60;
    }



     /************************ FIN MISE EN FORME PAGE D'ACCUEIL ************************/





    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
    Leisha.
    FémininAge : 27Messages : 29

    le Sam 29 Mar 2014 - 13:18

    Hello,
    Encore moi, mais j'aime beaucoup ce que tu fais Wink
    Le lien du forum est dans le message que j'ai posté pour les catégories rouges.

    Merci encore :)
    avatar
    Likau
    MasculinAge : 24Messages : 326

    le Sam 29 Mar 2014 - 13:40

    Elle est vachement sympa celle-là ! Very Happy
    avatar
    Luxuria
    FémininAge : 20Messages : 83

    le Dim 6 Avr 2014 - 18:23

    J'approuve les autres, c'est très beau. <3
    avatar
    alex24d
    FémininAge : 30Messages : 95

    le Lun 7 Avr 2014 - 12:23

    J'adore très joli nice!
    avatar
    Afterglow.winter
    FémininAge : 22Messages : 138

    le Sam 3 Mai 2014 - 22:37

    Superbe



    How do you get up from an all time low?
    avatar
    Malice1329
    FémininAge : 29Messages : 79

    le Dim 4 Mai 2014 - 5:56

    C'est vraiment magnifique



    avatar
    Cruelly
    FémininAge : 25Messages : 2563

    le Dim 4 Mai 2014 - 8:03

    Je vais tester cella aussi :)



    MON PROJET :heart: j'ai besoin d'avis ^^


    avatar
    Chae Lee
    FémininAge : 21Messages : 116

    le Mar 6 Mai 2014 - 22:08

    OMO ! C'est superbe *.* Merci !
    avatar
    Etoile Du Phenix
    FémininAge : 15Messages : 14

    le Mar 6 Mai 2014 - 22:23

    waw ces juste sublime *p*
    avatar
    Pastomaniac
    FémininAge : 21Messages : 194

    le Mer 7 Mai 2014 - 14:53

    Merci *_____*



    avatar
    Thalia Grace
    FémininAge : 21Messages : 65

    le Mer 7 Mai 2014 - 14:59

    Merci ! ♥
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Mer 7 Mai 2014 - 15:16

    J'aime beaucoup merci
    avatar
    Callisto
    FémininAge : 21Messages : 44

    le Jeu 8 Mai 2014 - 13:28

    joli ~ merci
    avatar
    NathanaelSane
    FémininAge : 24Messages : 73

    le Jeu 8 Mai 2014 - 15:29

    Merci :)
    avatar
    Dixy
    FémininAge : 24Messages : 228

    le Jeu 8 Mai 2014 - 15:42

    C'est vraiment beau merci !



    avatar
    Susan Storm
    FémininAge : 38Messages : 77

    le Jeu 8 Mai 2014 - 15:50

    Merci Wink
    avatar
    Edward Speleers
    FémininAge : 30Messages : 456

    le Jeu 8 Mai 2014 - 17:08

    Elle est trop belle, bravo



    avatar
    Insane paper-plane
    FémininAge : 21Messages : 139

    le Ven 9 Mai 2014 - 4:20

    Très jolie !
    avatar
    Rubis-Hope
    FémininAge : 25Messages : 46

    le Sam 10 Mai 2014 - 20:50

    Encore une fois, très joli
    Merci du partage
    avatar
    Calypso Luciano
    FémininAge : 27Messages : 333

    le Sam 10 Mai 2014 - 21:09

    Très joli merci
    avatar
    Kamesora
    FémininAge : 26Messages : 90

    le Dim 11 Mai 2014 - 14:41

    Merci beaucoup je suis fan de tes codes
    avatar
    Ren haring
    MasculinAge : 23Messages : 1008

    le Dim 11 Mai 2014 - 15:54

    Elles es Magnifique :) j'avoue tu a du talent
    avatar
    Aleksei
    MasculinAge : 22Messages : 20

    le Dim 11 Mai 2014 - 16:51

    Merci. (:
    avatar
    LickingBoot
    FémininAge : 19Messages : 503

    le Dim 11 Mai 2014 - 19:20

    merci ! Very Happy



    Contenu sponsorisé


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