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

    Rappel du premier message :

    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
    soraya
    FémininAge : 26Messages : 38

    le Ven 4 Juil 2014 - 15:00

    je suis vraiment fan de tes pa ! merci beaucoup Very Happy




       
    Cory Monteith  1982 - 2013 Oh, why you look so sad? Tears are in your eyes come on and come to me now. Don't be ashamed to cry, let me see you through 'cause I've seen the dark side too. © by anaëlle.
    avatar
    Swan2
    FémininAge : 19Messages : 49

    le Sam 5 Juil 2014 - 15:16

    J'adore, vraiment, merci *-*
    avatar
    Gladou
    MasculinAge : 23Messages : 114

    le Dim 6 Juil 2014 - 11:27

    Merci!



    avatar
    Lena
    FémininAge : 27Messages : 100

    le Dim 6 Juil 2014 - 13:46

    Whaoh *;* j'aime tes codages, ils sont toujours superbes!





    Merci a Kazuya pour son kit =)
    avatar
    Choud
    FémininAge : 24Messages : 9

    le Dim 6 Juil 2014 - 14:37

    Très très joli ! Merci =)
    avatar
    Acelol
    FémininAge : 23Messages : 24

    le Dim 6 Juil 2014 - 17:32

    Magnifique
    avatar
    lilissa
    FémininAge : 24Messages : 30

    le Dim 6 Juil 2014 - 18:35

    merci beaucoup ♥
    avatar
    Zarwins
    FémininAge : 22Messages : 154

    le Mar 8 Juil 2014 - 4:52

    Woua ! Merci beaucoup !



    avatar
    HEAVEN.SPIRIT
    MasculinAge : 23Messages : 37

    le Mer 9 Juil 2014 - 11:24

    merci
    avatar
    Istina
    FémininAge : 23Messages : 111

    le Mer 9 Juil 2014 - 14:23

    Merci :)
    avatar
    damon w salvatore
    FémininAge : 30Messages : 109

    le Sam 12 Juil 2014 - 3:21

    merci
    avatar
    Kathee
    FémininAge : 24Messages : 667

    le Dim 13 Juil 2014 - 0:53

    Celle-ci est vraiment trop chouette, merci Hal' Very Happy



    • Nous serions ravis de vous accueillir •


    • Venez donc voir ce petit petit fofo •
    avatar
    Lust Caution
    FémininAge : 23Messages : 79

    le Dim 13 Juil 2014 - 15:10

    merci.
    avatar
    ryry0013
    FémininAge : 24Messages : 143

    le Dim 13 Juil 2014 - 20:24

    Sympa :)
    donc il n'y a pas de code à mettre dans généralité?
    avatar
    Rainbow Dash
    FémininAge : 19Messages : 52

    le Lun 14 Juil 2014 - 4:26

    Merci! Super sympa Very Happy
    avatar
    Succubus
    FémininAge : 23Messages : 12

    le Mar 15 Juil 2014 - 22:27

    J'adore le style ! Merci !
    avatar
    Draly
    FémininAge : 25Messages : 108

    le Mer 16 Juil 2014 - 14:45

    J'aime beaucoup tes créations, c'est toujours sympa.:p
    avatar
    Frosty Blue
    FémininAge : 22Messages : 162

    le Ven 18 Juil 2014 - 16:49

    Magnifique, merci!
    avatar
    Kaamee
    FémininAge : 22Messages : 110

    le Dim 20 Juil 2014 - 17:34

    Superbe **



    avatar
    Dacina moe
    FémininAge : 39Messages : 169

    le Dim 20 Juil 2014 - 21:51

    Tres jolie, merci :)
    avatar
    Ozymandias
    MasculinAge : 20Messages : 44

    le Mar 22 Juil 2014 - 21:58

    Merci, c"est une très belle créa
    avatar
    louha
    FémininAge : 30Messages : 213

    le Mer 23 Juil 2014 - 17:59

    superbe !
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Mer 23 Juil 2014 - 20:22

    Merci ! ^^
    avatar
    Sadistic Syndrome
    FémininAge : 25Messages : 84

    le Ven 25 Juil 2014 - 15:48

    Super sympa et intuitive =)
    avatar
    Little Melody
    FémininAge : 17Messages : 64

    le Ven 25 Juil 2014 - 17:36

    Merci ♥
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 0:34