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.

Le Deal du moment : -17%
PHILIPS Centrale vapeur HI5900/22 5,2 bar
Voir le deal
59.99 €

    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.
    avatar
    tiofrere59
    MasculinAge : 37Messages : 15

    Sam 29 Mar 2014 - 15:43

    Merci pour ce tuto !!!
    DaZeli
    DaZeli
    FémininAge : 28Messages : 377

    Mar 1 Avr 2014 - 3:26

    Très réussie, merci :)
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Mar 1 Avr 2014 - 19:44

    Héhé, merci pour le partage! vraiment hyper pratique Wink



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 7 27978_signature_never_utopia_dydy_2
    Adra
    Adra
    MasculinAge : 35Messages : 10

    Mer 2 Avr 2014 - 15:34

    Merciii !
    Petite Noisette
    Petite Noisette
    FémininAge : 24Messages : 8

    Lun 7 Avr 2014 - 19:53

    J'aime bien la façon dont c'est présenté ! Merci =)





    alex24d
    alex24d
    FémininAge : 36Messages : 95

    Dim 13 Avr 2014 - 13:50

    merci
    Darkeye
    Darkeye
    FémininAge : 24Messages : 56

    Dim 13 Avr 2014 - 18:42

    Elle est superbe. **



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 7 Signan10
    Rose Caldin
    Rose Caldin
    FémininAge : 30Messages : 8

    Lun 14 Avr 2014 - 1:33

    J'adore, merci
    Lighane
    Lighane
    FémininAge : 28Messages : 41

    Lun 14 Avr 2014 - 17:59

    Magnifique code :) Merci o/
    Choud
    Choud
    FémininAge : 30Messages : 9

    Dim 20 Avr 2014 - 17:50

    Merci =)
    Svenn Edwald
    Svenn Edwald
    FémininAge : 32Messages : 13

    Dim 20 Avr 2014 - 18:24

    trop chou *^*
    Patou972
    Patou972
    FémininAge : 45Messages : 181

    Lun 21 Avr 2014 - 20:11

    wow c'est super joli merci
    Anonymous
    Invité

    Mar 22 Avr 2014 - 13:46

    Merci, merci!
    Anonymous
    Invité

    Mar 22 Avr 2014 - 13:51

    Je prends pour mon forum, comment fait on pour changer l'image du chat, merci.
    Holnesse
    Holnesse
    FémininAge : 27Messages : 35

    Mer 23 Avr 2014 - 13:28

    Merci **
    bibi0712
    bibi0712
    FémininAge : 46Messages : 66

    Jeu 24 Avr 2014 - 14:15

    Elle est très jolie
    Bravo et merci Wink
    Mzellebulle
    Mzellebulle
    FémininAge : 34Messages : 39

    Ven 25 Avr 2014 - 17:13

    J'aime beaucoup, merci.
    Vaast
    Vaast
    MasculinAge : 31Messages : 16

    Lun 28 Avr 2014 - 12:41

    Merci ! Very Happy
    Choubakawa
    Choubakawa
    MasculinAge : 30Messages : 87

    Mar 29 Avr 2014 - 16:43

    Merci :)



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 7 Witche13
    avatar
    linda70
    FémininAge : 54Messages : 13

    Jeu 1 Mai 2014 - 23:59

    ouff pas trop dur ;-) merci
    avatar
    Phénix'
    FémininAge : 22Messages : 95

    Jeu 8 Mai 2014 - 15:40

    Owaa, merci, j'adore *q*
    Ay.am.e
    Ay.am.e
    FémininAge : 26Messages : 123

    Ven 9 Mai 2014 - 20:04

    Elle est vraiment belle, merci.
    Lisou
    Lisou
    FémininAge : 23Messages : 351

    Sam 10 Mai 2014 - 8:35

    Pour le forum d'une amie ♥
    Ren haring
    Ren haring
    MasculinAge : 29Messages : 1009

    Lun 12 Mai 2014 - 15:01

    Magnifique. Merci beaucoup pour le partage
    layna
    layna
    FémininAge : 31Messages : 69

    Mar 13 Mai 2014 - 19:10

    Merciiiii ^^
    Contenu sponsorisé


      La date/heure actuelle est Sam 13 Juil 2024 - 23:50