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
    witm
    FémininAge : 24Messages : 51

    le Dim 24 Jan 2016 - 13:18

    j'aime beaucoup
    avatar
    megb59
    FémininAge : 24Messages : 104

    le Sam 6 Fév 2016 - 23:10

    J'aodre cette PA elle est vriamnt belle!
    avatar
    Vador
    MasculinAge : 17Messages : 64

    le Sam 6 Fév 2016 - 23:22

    Merci !
    avatar
    Dokigaygay
    MasculinAge : 19Messages : 29

    le Mer 24 Fév 2016 - 19:29

    Génial!
    avatar
    Thanos
    MasculinAge : 22Messages : 83

    le Mer 2 Mar 2016 - 3:45

    magnifique
    avatar
    Amariem
    FémininAge : 19Messages : 98

    le Ven 4 Mar 2016 - 21:59

    Merci merci !



    avatar
    anthony1453
    MasculinAge : 19Messages : 7

    le Mer 9 Mar 2016 - 17:52

    Merci beaucoup
    avatar
    Dorin
    FémininAge : 43Messages : 28

    le Jeu 17 Mar 2016 - 18:22

    merci
    avatar
    Ghost of Darkness
    FémininAge : 24Messages : 43

    le Dim 3 Avr 2016 - 23:31

    Très joli travail, comme d'habitude venant de toi Halloween ♥ Merci !



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    avatar
    Eywa
    FémininAge : 33Messages : 14

    le Mar 12 Avr 2016 - 12:45

    Jolie cheers
    avatar
    VincentWeever
    MasculinAge : 20Messages : 57

    le Mar 12 Avr 2016 - 13:32

    Merci du partage
    avatar
    Orochimaru
    FémininAge : 28Messages : 209

    le Mar 19 Avr 2016 - 19:23

    Beau travail Very Happy
    Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Cuicui
    FémininAge : 27Messages : 112

    le Ven 22 Avr 2016 - 14:15

    Elle est très jolie cette page d'accueil.



    avatar
    RPG Maker
    FémininAge : 23Messages : 44

    le Sam 30 Avr 2016 - 20:09

    Joli, merci ^^
    Little--Angel
    FémininAge : 22Messages : 46

    le Lun 23 Mai 2016 - 19:49

    J'aime beaucoup Very Happy
    avatar
    Vintage Phonic
    FémininAge : 28Messages : 21

    le Mar 24 Mai 2016 - 14:57

    C'est vraiment super beau **
    avatar
    Requiem
    MasculinAge : 25Messages : 21

    le Mar 21 Juin 2016 - 15:53

    Merci :love:
    avatar
    Henoch
    FémininAge : 36Messages : 34

    le Lun 27 Juin 2016 - 20:27

    Merci superbe !
    avatar
    Lapouche
    FémininAge : 22Messages : 9

    le Lun 19 Sep 2016 - 18:01

    Très joli, merci!
    avatar
    Lysblan
    FémininAge : 18Messages : 5

    le Lun 19 Sep 2016 - 18:05

    C'est vraiment jolie j'aime bien
    avatar
    Ciàran
    FémininAge : 27Messages : 187

    le Mer 21 Sep 2016 - 11:51

    merci <3
    Yunroxas
    FémininAge : 24Messages : 37

    le Dim 25 Sep 2016 - 17:17

    Merci :)
    Darouine Lius
    MasculinAge : 28Messages : 65

    le Mer 26 Oct 2016 - 14:12

    merci
    avatar
    Shakalla
    FémininAge : 21Messages : 8

    le Ven 11 Nov 2016 - 14:36

    Merci du partage *-*
    avatar
    Gieve
    FémininAge : 28Messages : 104

    le Sam 7 Jan 2017 - 17:44

    merciiiiiiiiiiiiiiii !!
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:13