AccueilDernières imagesRechercherS'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.

-55%
Le deal à ne pas rater :
Friteuse sans huile – PHILIPS – Airfryer HD9200/90 Série 3000
49.99 € 109.99 €
Voir le deal

    Page d'accueil tout en sobriété et en simplicité /PAN

    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Dim 22 Sep 2013 - 0:01

    Rappel du premier message :

    Bonjour tout le monde !
    J'ai réalisé très récemment une page d'accueil pour un forum qui a malheureusement du fermé. La bonne nouvelle, c'est que le travail était déjà fait et que du coup, je peux l'offrir au libre-service.
    Un petit aperçu ?


    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive|Great+Vibes' rel='stylesheet' type='text/css'>


    <style>

    .cadre { -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow:0 0 2px 2px grey;
    -moz-box-shadow:0 0 2px 2px grey;
    -webkit-box-shadow:0 0 2px 2px grey;
    -o-box-shadow:0 0 2px 2px grey;
    border:2px #A0826D solid;
    width:630px;
    background-color:#F5F3E9;
    }

    .welcome { font-family:'Cambria';
    font-size:30px;
    color:#DB7DA5;
    text-shadow:1px 1px 1px white;
    text-align:center;
    border-bottom:2px #EBDCBF dotted;
    }

    .welcome2 { font-family:'Cedarville Cursive';
    font-size:24px;
    color:#DBBDA8;
    text-shadow:1px 1px 1px white;
    text-align:center;
    }

    .titres { font-family:'Great Vibes';
    color:#A0826D;
    text-shadow:1px 1px 1px white;
    font-size:30px;
    }



    .description
    {
      display: block;
      width: 220px;
      margin: auto;
      height: 220px;
      overflow: hidden;
    }
    .description_contenu
    {
      position: absolute;
      width: 200px;
      height: 200px;
      overflow: 200px;
      background-color: #EFE9DD;
      font-size: 14px;
      font-family:'Georgia';
      color: #3E352E;
      text-align:center;
      padding:0px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      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;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      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;
    }

    .form { font-variant:small-caps;
    }

    .cadre_liens { height:195px;
    width:155px;
    padding:2px;
    overflow:auto;
    font-family:'Georgia';
    text-shadow:1px 1px 1px black;
    background-color:#A0826D;
    border:2px #DBBDA8 dotted;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    font-size:15px;
    letter-spacing:1px;
    font-variant:small-caps;
    margin-top:-15px;
    }

    .cadres_teams_concours { z-index:59;
    width:185px;
    padding:2px;
    overflow:auto;
    font-family:'Georgia';
    background-color:#A0826D;
    border:2px #DBBDA8 dotted;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    text-align:center;
    font-size:12px;
    letter-spacing:1px;
    margin-top:-15px;
    height:103px;
    width:170px;
    overflow:visible;
    }

    /*LIENS*/
    a.l { text-decoration:none !important;
    font-weight:bold;
    color:#FFFFFF;
    text-shadow:1px 1px 1px black;
    transition:0.4s all ease;
    -webkit-transition:0.4s all ease;
    -o-transition:0.4s all ease;
    -moz-transition:0.4s all ease;
    display:inline;
    }

    a.l:hover { text-decoration:none !important;
    font-weight:bold;
    color: #F5F3E9;
    text-shadow:1px 1px 1px #A0826D;
    }


    /*INFOBULLE*/
    a.infoA{ text-decoration:none !important;
    position:relative;
    z-index:24;
    color:#000;
    text-decoration:none
    }
     
    a.infoA:hover{ text-decoration:none !important;
    z-index:70;
    }
     
    a.infoA span{
    display: none
    }
     
    a.infoA:hover span{
    display:block;
    position:absolute;
    margin-top:-55px;
    margin-left:-10px;
    border:1px solid #000;
    background-color:#FFF;
    color:#000;
    text-align: center;
    font-weight:none;
    padding:0px;
    width:100px;
    z-index:60;
    }



    </style>

    </head>

    <body><div class="cadre"><div class="welcome">Bienvenue sur Nomduforum, <i>{USERNAME}</i> !</div><div class="welcome2">Un petit slogan, ça peut pas faire de mal !</div>

    <table><tr><td><center><span class="titres">Membre du mois</span></center></td>

    <td><center><span class="titres">Liens utiles</span></center></td><td style="width:5px;"></td>

    <td><center><span class="titres">Teams</span></center></td></tr>

    <tr><td><center><div class="description"><div style="-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;display: block; text-align: justify; width: 200px; height: 200px; background: url(http://i.imgur.com/5V51GKf.png) center center no-repeat;border:2px #DBBDA8 dotted;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 190px; padding: 5px;"><center><br /><span class="form" style="font-size:20px;">Pseudo.</span><br /><br />
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</center>
    </div></div></div></div></center></td>



    <td><div class="cadre_liens"><br /><br /><a href="#" class="l">Règlement</a><br />
    <a href="#" class="l">Présentation</a><br />
    <a href="#" class="l">Recrutement</a><br />
    <a href="#" class="l">Aide</a><br />
    <a href="#" class="l">Partenariat</a><br />
    <a href="#" class="l">Votez pour nous !</a><br /></div>
    </td>


    <td style="width:5px;"></td>


    <td><div style="margin-top:-13px;"><table><tr>

    <td><center><span class="form" style="font-family:Georgia; font-size:14px;">Equipe 1</span></td><td style="width:2px;"></center></td>

    <td><center><span class="form" style="font-family:Georgia; font-size:14px;">Equipe 2</span></center></td><tr>

    <tr><td><div style="-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-o--border-radius:5px;width:80px;background-color:#EBDCBF; border:1px  #DBBDA8 solid;">XXX pts</div></td>

    <td style="width:2px;"></td><td><div style="-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-o--border-radius:5px;width:80px;background-color:#EBDCBF; border:1px  #DBBDA8 solid;">XXX pts</div></td></tr></table></div><br />

    <center><span class="titres">Concours</span></center></div><br /><div class="cadres_teams_concours"><center>Gagnant du concours<br /><i>NOM CONCOURS</i> :<br />
    <span style="font-variant:small-caps; font-weight:bold; letter-spacing:2px; font-size:14px;"><a class="infoA">Nom du gagnant<span>

    <img style="height:140px;" src="http://img137.imageshack.us/img137/1928/123tdd.jpg" />
    <!--Remplacer le lien par celui de l'avatar--!>

    </span></a></span></center>
    <center>Venez participer au concours<br />
    <span style="font-variant:small-caps; font-weight:bold; letter-spacing:2px;font-size:15px;"><a href="#" class="l" style="font-size:14px;">Nom du concours</a><br /></div>


    </td></tr></table><div style="border-bottom:2px #EBDCBF dotted;"></div>
    <table><td><a href="#"><div class="welcome2">Nos partenaires</div></a></td><td style="width:5px;"></td><td style="width:400px;"><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="2" direction="left"><a href="#"><img src="http://img.xooimage.com/files7/e/0/9/p-tite-toile-2f7dace.png" /></a></marquee></td></table><div style="margin-right:10px;font-family:'Cambria'; text-align:right; color:#DBBDA8;letter-spacing:1px;">© Code de Hiro' - <a class="l" href="http://www.never-utopia.com" style="color:#DBBDA8;">Never Utopia</a></div>


    </div>

    </body>

    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.



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Mordiern
    Mordiern
    FémininAge : 47Messages : 285

    Jeu 30 Jan 2014 - 18:34

    Merci beaucoup :)
    SweetieBay
    SweetieBay
    FémininAge : 32Messages : 146

    Sam 1 Fév 2014 - 1:30

    c'est simple et très beau... merci
    Lunaya
    Lunaya
    FémininAge : 28Messages : 10

    Dim 2 Fév 2014 - 18:50

    Merci trop boooow <3
    aryanon
    aryanon
    MasculinAge : 27Messages : 50

    Lun 3 Fév 2014 - 23:33

    Merci!! le rendu est sublime, hâte de le tenter sur mon Bébé :)
    Chant
    Chant
    FémininAge : 23Messages : 68

    Sam 8 Fév 2014 - 13:50

    Merciii
    Lust Caution
    Lust Caution
    FémininAge : 30Messages : 79

    Dim 9 Fév 2014 - 4:50

    Merci *.*
    miou
    miou
    FémininAge : 24Messages : 23

    Lun 10 Fév 2014 - 12:31

    merci



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 5 13905011
    Missmytic
    Missmytic
    FémininAge : 35Messages : 26

    Lun 10 Fév 2014 - 13:38

    superbe merci!
    Etax
    Etax
    MasculinAge : 27Messages : 168

    Lun 10 Fév 2014 - 19:39

    Super merci :)
    Edward Speleers
    Edward Speleers
    MasculinAge : 36Messages : 460

    Mer 12 Fév 2014 - 14:17

    Pile ce qu'il me faut, merci Wink



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 5 Edkidd11
    Zappy
    Zappy
    FémininAge : 24Messages : 56

    Mer 12 Fév 2014 - 14:25

    Mercii ^^
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Ven 14 Fév 2014 - 15:36

    Super ! Merci beaucoup !
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Sam 15 Fév 2014 - 15:12

    Merci pour le code Very Happy



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 5 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    KaosWentCookie
    KaosWentCookie
    MasculinAge : 34Messages : 6

    Dim 16 Fév 2014 - 17:14

    Mercii !
    SvenO
    SvenO
    MasculinAge : 30Messages : 78

    Mer 19 Fév 2014 - 22:01

    Merci d'avance !
    Cette PA est vraiment cool !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 5 703037Bann
    avatar
    Valens
    MasculinAge : 36Messages : 53

    Jeu 20 Fév 2014 - 14:31

    Merci
    Pooni
    Pooni
    FémininAge : 26Messages : 39

    Mar 25 Fév 2014 - 17:21

    C'est super mignon **
    Merci !
    Phibula
    Phibula
    FémininAge : 31Messages : 15

    Mar 25 Fév 2014 - 20:21

    Wo, sublime. Merci bien pour ce partage. ;;
    avatar
    jotherrien13
    MasculinAge : 31Messages : 34

    Mer 26 Fév 2014 - 11:03

    merci
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mer 26 Fév 2014 - 15:27

    merci
    Armie
    Armie
    FémininAge : 34Messages : 506

    Mer 26 Fév 2014 - 15:52

    Agréable à regarder et à consulter : merci pour ce partage. :)
    SNMitsuki
    SNMitsuki
    FémininAge : 27Messages : 63

    Mer 26 Fév 2014 - 16:16

    Merciii ! Very Happy



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 5 250032Sanstitre1
    Sinavlia
    Sinavlia
    FémininAge : 27Messages : 158

    Jeu 27 Fév 2014 - 0:35

    Merci beaucoup !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 5 Grec10
    Linn
    Linn
    FémininAge : 23Messages : 24

    Ven 28 Fév 2014 - 14:46

    C'est super, merci ! :)



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 5 763787neverulinn
    avatar
    Cahara
    FémininAge : 49Messages : 6

    Ven 28 Fév 2014 - 16:09

    Merci :3
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Nov 2024 - 16:55