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.


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

    Partagez
    avatar
    Hiro'
    MasculinAge : 21Messages : 127

    le 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
    âme
    FémininAge : 52Messages : 154

    le Mar 30 Déc 2014 - 13:38

    Très très bien !
    Merci à toi :)



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    avatar
    okeane
    FémininAge : 27Messages : 93

    le Sam 7 Fév 2015 - 16:43

    merci =)))
    avatar
    Haly
    FémininAge : 26Messages : 15

    le Lun 9 Fév 2015 - 18:16

    Merci, beau travail !
    avatar
    FlipFlap
    FémininAge : 35Messages : 59

    le Sam 21 Fév 2015 - 13:40

    Merci beaucoup!
    avatar
    Kianda
    MasculinAge : 17Messages : 88

    le Dim 22 Fév 2015 - 19:19

    Magnifique, merci beaucoup !



    avatar
    summerby
    FémininAge : 24Messages : 36

    le Mar 3 Mar 2015 - 9:52

    magnifique !
    avatar
    Grenouille
    FémininAge : 22Messages : 49

    le Sam 28 Mar 2015 - 0:16

    Merci !
    avatar
    Celuna
    FémininAge : 27Messages : 130

    le Lun 6 Avr 2015 - 17:03

    Il est d'une tendresse, fluide et magnifique.. Je craque pour le petit chat. Merci pour ce magnifique partage.
    avatar
    Oïa
    FémininAge : 27Messages : 57

    le Ven 24 Avr 2015 - 16:00

    merciiiiiiiiiiiiiiiii



    avatar
    Nezzoon
    FémininAge : 19Messages : 66

    le Dim 3 Mai 2015 - 12:42

    Très sympa, merci !
    avatar
    Rhoswen Fay
    FémininAge : 31Messages : 66

    le Mar 23 Juin 2015 - 19:38

    joli !
    avatar
    mon-etoile
    FémininAge : 29Messages : 140

    le Lun 3 Aoû 2015 - 20:09

    Merci il est magnifique et tout sobre
    avatar
    Kelalin
    FémininAge : 25Messages : 1888

    le Lun 3 Aoû 2015 - 22:51

    Merci ( ̄ー ̄)
    avatar
    Daisy Hardman
    FémininAge : 20Messages : 60

    le Lun 3 Aoû 2015 - 23:09

    merci
    avatar
    Sadja
    MasculinAge : 20Messages : 74

    le Sam 15 Aoû 2015 - 16:37

    merci beaucoup, il me sera très utile
    avatar
    Shanoa
    FémininAge : 20Messages : 64

    le Mar 27 Oct 2015 - 22:29

    merci pour ce joli code
    avatar
    Gargouille
    MasculinAge : 20Messages : 83

    le Lun 30 Nov 2015 - 22:36

    Magique
    avatar
    Kynoha
    MasculinAge : 20Messages : 35

    le Lun 7 Déc 2015 - 21:53

    Magnifique, je prend merci !
    avatar
    GuillaumeBETA
    MasculinAge : 21Messages : 17

    le Mar 8 Déc 2015 - 23:33

    Merci !
    avatar
    Antithée
    FémininAge : 21Messages : 69

    le Ven 11 Déc 2015 - 21:40

    La classe Cool merci d'avoir partagé !
    avatar
    Bunny Lune
    FémininAge : 28Messages : 142

    le Mar 15 Déc 2015 - 15:03

    Merci du partage.
    avatar
    £ternal_$unshine
    FémininAge : 25Messages : 69

    le Sam 19 Déc 2015 - 12:46

    Merci pour cette jolie page d'accueil.



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    avatar
    Valou712
    FémininAge : 34Messages : 23

    le Ven 25 Déc 2015 - 17:37

    PA très sympathique, merci beaucoup et Joyeux Noël !!
    avatar
    Chlirr
    FémininAge : 29Messages : 63

    le Mar 29 Déc 2015 - 9:46

    ça ressemble à ce que je voudrais faire

    Merci Very Happy
    avatar
    G U E R L A I N
    FémininAge : 27Messages : 154

    le Sam 16 Jan 2016 - 1:00

    merci du partage :)



    Contenu sponsorisé


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