AccueilRechercherS'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 : -49%
Casque sans fil Bluetooth Bose QuietComfort 35 II
Voir le deal
195 €

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

    Hiro'
    Hiro'
    MasculinAge : 23Messages : 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.
    âme
    âme
    FémininAge : 55Messages : 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.
    okeane
    okeane
    FémininAge : 30Messages : 93

    le Sam 7 Fév 2015 - 16:43

    merci =)))
    Haly
    Haly
    FémininAge : 28Messages : 15

    le Lun 9 Fév 2015 - 18:16

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

    le Sam 21 Fév 2015 - 13:40

    Merci beaucoup!
    Kianda
    Kianda
    MasculinAge : 19Messages : 88

    le Dim 22 Fév 2015 - 19:19

    Magnifique, merci beaucoup !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 10 1416416855-kandiasigna
    summerby
    summerby
    FémininAge : 26Messages : 36

    le Mar 3 Mar 2015 - 9:52

    magnifique !
    Grenouille
    Grenouille
    FémininAge : 24Messages : 49

    le Sam 28 Mar 2015 - 0:16

    Merci !
    Celuna
    Celuna
    FémininAge : 29Messages : 133

    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.
    Oïa
    Oïa
    FémininAge : 29Messages : 57

    le Ven 24 Avr 2015 - 16:00

    merciiiiiiiiiiiiiiiii



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 10 Sign_212
    Nezzoon
    Nezzoon
    FémininAge : 21Messages : 66

    le Dim 3 Mai 2015 - 12:42

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

    le Mar 23 Juin 2015 - 19:38

    joli !
    mon-etoile
    mon-etoile
    FémininAge : 31Messages : 140

    le Lun 3 Aoû 2015 - 20:09

    Merci il est magnifique et tout sobre
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2234

    le Lun 3 Aoû 2015 - 22:51

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

    le Lun 3 Aoû 2015 - 23:09

    merci
    Sadja
    Sadja
    MasculinAge : 22Messages : 78

    le Sam 15 Aoû 2015 - 16:37

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

    le Mar 27 Oct 2015 - 22:29

    merci pour ce joli code
    Gargouille
    Gargouille
    MasculinAge : 22Messages : 83

    le Lun 30 Nov 2015 - 22:36

    Magique
    Kynoha
    Kynoha
    MasculinAge : 23Messages : 35

    le Lun 7 Déc 2015 - 21:53

    Magnifique, je prend merci !
    GuillaumeBETA
    GuillaumeBETA
    MasculinAge : 23Messages : 17

    le Mar 8 Déc 2015 - 23:33

    Merci !
    Antithée
    Antithée
    FémininAge : 23Messages : 69

    le Ven 11 Déc 2015 - 21:40

    La classe Cool merci d'avoir partagé !
    Bunny Lune
    Bunny Lune
    FémininAge : 30Messages : 145

    le Mar 15 Déc 2015 - 15:03

    Merci du partage.
    £ternal_$unshine
    £ternal_$unshine
    FémininAge : 27Messages : 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 ♥
    Page d'accueil tout en sobriété et en simplicité /PAN - Page 10 78216279872221
    Valou712
    Valou712
    FémininAge : 37Messages : 23

    le Ven 25 Déc 2015 - 17:37

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

    le Mar 29 Déc 2015 - 9:46

    ça ressemble à ce que je voudrais faire

    Merci Very Happy
    G U E R L A I N
    G U E R L A I N
    FémininAge : 29Messages : 188

    le Sam 16 Jan 2016 - 1:00

    merci du partage :)



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 10 191114colorfulwallandsexygirlfacebookcovero1
    Contenu sponsorisé


      La date/heure actuelle est Sam 8 Aoû 2020 - 4:17