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
    >> Chiro <<
    MasculinAge : 25Messages : 83

    le Dim 27 Juil 2014 - 10:07

    merci
    avatar
    Pein94
    Age : 24Messages : 59

    le Mar 29 Juil 2014 - 21:03

    Bravo :)
    NamPearl
    FémininAge : 21Messages : 40

    le Mer 30 Juil 2014 - 18:22

    Merci
    avatar
    bubulle
    FémininAge : 31Messages : 76

    le Jeu 31 Juil 2014 - 16:35

    merci
    avatar
    flowers.
    FémininAge : 24Messages : 25

    le Ven 1 Aoû 2014 - 16:19

    Simple et efficace, j'aime beaucoup !
    avatar
    Addixon
    FémininAge : 23Messages : 40

    le Sam 2 Aoû 2014 - 17:45

    Merci!
    avatar
    Raymanou
    MasculinAge : 25Messages : 49

    le Lun 4 Aoû 2014 - 17:00

    MErci beaucoup c'est gentil Very Happy
    avatar
    catkiller
    FémininAge : 23Messages : 70

    le Dim 10 Aoû 2014 - 18:18

    C'est superbe!
    avatar
    Liliumini
    FémininAge : 23Messages : 55

    le Jeu 14 Aoû 2014 - 10:37

    Merci, j'aime beaucoup!
    avatar
    Pythia
    FémininAge : 29Messages : 182

    le Ven 22 Aoû 2014 - 21:27

    DARRRRYL !!!!! Pardon je m'égare !
    Sublime travail. Tu as beaucoup de talent :) Merci pour le partage
    avatar
    Jull421
    FémininAge : 23Messages : 141

    le Sam 23 Aoû 2014 - 2:03

    Merci ♥



    avatar
    Ombrys
    FémininAge : 16Messages : 27

    le Mer 27 Aoû 2014 - 14:09

    Trop belle
    avatar
    teteaclaquefr
    MasculinAge : 27Messages : 39

    le Mer 27 Aoû 2014 - 21:28

    Merci beaucoup ! les couleurs vont extrêmement bien ensemble !
    avatar
    FlorianGuichard
    MasculinAge : 20Messages : 4

    le Jeu 28 Aoû 2014 - 12:57

    merci
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Sam 30 Aoû 2014 - 17:18

    Bravo et merci
    avatar
    Kau
    FémininAge : 16Messages : 148

    le Dim 31 Aoû 2014 - 1:14

    J'adore, merci ^^
    avatar
    Kanae
    FémininAge : 26Messages : 350

    le Dim 31 Aoû 2014 - 11:43

    Je la trouve très belle car sobre et harmonieuse !
    Je regrette juste un peu que les cadres du haut touchent les bords arrondis.

    Comme d'habitude, j'aime beaucoup ce que tu fais.
    avatar
    M.T
    FémininAge : 28Messages : 53

    le Dim 31 Aoû 2014 - 23:13

    J'aime <3
    Merci.
    avatar
    Badaric
    MasculinAge : 28Messages : 26

    le Lun 1 Sep 2014 - 12:26

    Merci beaucoup, elle est magnifique
    avatar
    SpicAsh
    FémininAge : 21Messages : 170

    le Lun 1 Sep 2014 - 15:11

    Thanks !
    avatar
    Blue Ice
    MasculinAge : 23Messages : 36

    le Ven 5 Sep 2014 - 22:19

    Magnifique *^* MERCI Very Happy
    avatar
    Sitahy
    FémininAge : 17Messages : 19

    le Sam 6 Sep 2014 - 5:46

    Merci du partage ! :-)



    avatar
    plushmasters
    FémininAge : 25Messages : 70

    le Sam 6 Sep 2014 - 21:04

    sublime
    avatar
    Dark Dream
    FémininAge : 25Messages : 79

    le Jeu 11 Sep 2014 - 22:03

    Superbe *o*
    avatar
    Sentenza
    MasculinAge : 33Messages : 95

    le Ven 12 Sep 2014 - 15:22

    merci!
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 11:27