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
    Natsu892
    MasculinAge : 17Messages : 63

    le Dim 11 Mai 2014 - 19:42

    j'aime merci



    avatar
    maxynina
    FémininAge : 27Messages : 7

    le Lun 12 Mai 2014 - 22:28

    Mercii
    avatar
    Tchii
    FémininAge : 32Messages : 251

    le Mer 14 Mai 2014 - 13:06

    Coucou!
    Merci pour cette jolie PA!
    A trés vite!
    Tchii!
    avatar
    Invité

    le Mer 14 Mai 2014 - 17:00

    Vraiment magnifique
    Narlya
    FémininAge : 16Messages : 20

    le Mer 14 Mai 2014 - 18:08

    C'est très beau merci à toi ! ^^
    avatar
    Pastiche
    FémininAge : 23Messages : 78

    le Mer 14 Mai 2014 - 19:19

    C'est superbe ! Merci beaucoup du partage !
    avatar
    Allison01
    FémininAge : 33Messages : 197

    le Mer 14 Mai 2014 - 19:32

    superbe ^^ merci

    avatar
    Invité

    le Mer 14 Mai 2014 - 20:50

    Très beau ♥
    avatar
    [W]endy
    FémininAge : 27Messages : 117

    le Jeu 15 Mai 2014 - 17:14

    Magnifique, merci Very Happy
    avatar
    Plume'
    FémininAge : 20Messages : 166

    le Sam 17 Mai 2014 - 11:11

    Merci !
    avatar
    tamanegeek
    MasculinAge : 19Messages : 167

    le Sam 17 Mai 2014 - 18:12

    Merci ! :3
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Mer 21 Mai 2014 - 18:15

    Merci !!
    avatar
    MOON LEE
    FémininAge : 24Messages : 149

    le Sam 24 Mai 2014 - 11:50

    Amazing :)

    Merci Wink
    avatar
    laura31500
    FémininAge : 16Messages : 49

    le Ven 30 Mai 2014 - 21:43

    C'est magnifique comme les autres, j'adore ce que tu fais et j'admire ton travail qui doit être très compliqué ! Bonne continuations ! ( j'ai l’impression d'avoir 30 ans de plus d'un coup Very Happy)
    avatar
    Asuka
    FémininAge : 24Messages : 105

    le Sam 31 Mai 2014 - 2:12

    Merci !!!



    avatar
    Raween
    FémininAge : 26Messages : 110

    le Sam 31 Mai 2014 - 10:07

    Merci beaucoup
    avatar
    Invité

    le Sam 31 Mai 2014 - 19:19

    Merci !
    avatar
    Sheo
    FémininAge : 26Messages : 26

    le Sam 31 Mai 2014 - 20:44

    Un boulot de fifou *.*
    avatar
    Likilou
    MasculinAge : 24Messages : 301

    le Sam 31 Mai 2014 - 22:41

    Merci ^^



    avatar
    Eerie Ange's
    FémininAge : 17Messages : 166

    le Dim 1 Juin 2014 - 9:03

    Superbe (=
    Eroik04
    MasculinAge : 20Messages : 22

    le Dim 1 Juin 2014 - 17:52

    merci
    avatar
    Asgardian
    MasculinAge : 27Messages : 21

    le Dim 1 Juin 2014 - 22:02

    très jolie !
    avatar
    1charlotte
    FémininAge : 17Messages : 196

    le Dim 1 Juin 2014 - 22:16

    Merci
    avatar
    chabus
    FémininAge : 25Messages : 21

    le Mar 3 Juin 2014 - 15:09

    Merci
    En ligne
    avatar
    Neko-Rika
    FémininAge : 19Messages : 115

    le Jeu 5 Juin 2014 - 10:54

    Merci ♥
    Contenu sponsorisé


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