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.

-38%
Le deal à ne pas rater :
Promo Dyson : l’aspirateur Dyson V15 Detect à 499€ au lieu de ...
499 € 799 €
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.
    chester.
    chester.
    FémininAge : 25Messages : 7

    Ven 25 Oct 2013 - 18:09

    Magnifique !
    Anonymous
    Invité

    Ven 25 Oct 2013 - 22:12

    Merci bien pour cette Pa qui est en soit très jolie!
    Fartiny
    Fartiny
    FémininAge : 26Messages : 119

    Dim 27 Oct 2013 - 15:53

    Merci, j'adore ♥
    BloodyMoony
    BloodyMoony
    FémininAge : 32Messages : 76

    Dim 27 Oct 2013 - 16:41

    C'est magnifique !!
    Fartiny
    Fartiny
    FémininAge : 26Messages : 119

    Dim 27 Oct 2013 - 20:15

    Excusez-moi, mais j'ai rencontré un problème avec ce code... il fait buguer tout mon forum et les forums se déplacent d'eux-mêmes.
    Spoiler:
    J'ai essayé cette page sur un forum test et sur mon vrai forum, ça n'a fonctionné sur aucun des deux. Je suis assez déçue car je l'adore et j'aimerais vraiment l'utiliser.
    damon w salvatore
    damon w salvatore
    FémininAge : 36Messages : 109

    Dim 27 Oct 2013 - 21:57

    merci
    Mangockie
    Mangockie
    FémininAge : 26Messages : 40

    Lun 28 Oct 2013 - 17:54

    Danke shön .o.
    Pomme-de-terre
    Pomme-de-terre
    FémininAge : 25Messages : 34

    Mar 29 Oct 2013 - 14:26

    Merci beeeaaaaauuuuuccccccoooooooooooouuuuuuuuuppppp *o*
    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Mar 29 Oct 2013 - 18:02

    Meeerci ! *-*



    YOU HELLA SAVED MY LIFE
    - chloe price
    Kassou
    Kassou
    FémininAge : 25Messages : 43

    Ven 1 Nov 2013 - 13:33

    Marchi *Q*
    Araki
    Araki
    MasculinAge : 34Messages : 141

    Sam 2 Nov 2013 - 10:14

    Pas mal, merci pour le partage !
    Clarisse
    Clarisse
    FémininAge : 24Messages : 3960

    Sam 2 Nov 2013 - 11:32

    Merci. :)
    Dixy
    Dixy
    FémininAge : 30Messages : 234

    Sam 2 Nov 2013 - 12:33

    Merci !!



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 2 ?c=isi&im=%2F8762%2F84558762%2Fpics%2F3210667051_1_13_DkYrqtSL
    Nonze
    Nonze
    MasculinAge : 31Messages : 85

    Mar 5 Nov 2013 - 20:05

    Merci
    MrTchikii
    MrTchikii
    MasculinAge : 32Messages : 27

    Jeu 7 Nov 2013 - 16:01

    MErci
    RainOrigami
    RainOrigami
    FémininAge : 24Messages : 22

    Jeu 7 Nov 2013 - 18:03

    Merci beaucoup du partage ! Very Happy
    Peps
    Peps
    FémininAge : 32Messages : 11

    Sam 9 Nov 2013 - 15:00

    Simple, mais superbe !!!!
    Merci :)
    Zoé
    Zoé
    FémininAge : 25Messages : 189

    Dim 10 Nov 2013 - 11:28

    merci :3



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 2 274643signaaaa
    Tifastrife
    Tifastrife
    FémininAge : 32Messages : 259

    Lun 11 Nov 2013 - 1:14

    Merci du partage Very Happy



    Les êtres chèrs que nous avons perdus, et les rêves, qui se sont envolés... Ne les oubliez jamais...

    Page d'accueil tout en sobriété et en simplicité /PAN - Page 2 090911064129411932
    Dragma
    Dragma
    MasculinAge : 29Messages : 65

    Lun 11 Nov 2013 - 13:43

    Merci !Very Happy 

    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Dim 17 Nov 2013 - 13:44

    TROP CHOU ! Merci à toi ! ♥
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Dim 17 Nov 2013 - 14:03

    Pourquoi on a pas la même écriture cursive ? D:
    Hebat
    Hebat
    FémininAge : 33Messages : 45

    Dim 17 Nov 2013 - 23:35

    merci
    Asunie
    Asunie
    FémininAge : 32Messages : 68

    Mer 20 Nov 2013 - 13:42

    Merci Very Happy
    younessdu91
    younessdu91
    MasculinAge : 26Messages : 96

    Mer 20 Nov 2013 - 15:00

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 9:44