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 à ne pas rater :
ASOS : Livraison Premier à 8 €/an
8 €
Voir le deal

    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.
    Voltino
    Voltino
    MasculinAge : 25Messages : 55

    le Mar 19 Jan 2016 - 3:40

    Simple merci
    Kinst.MP
    Kinst.MP
    FémininAge : 21Messages : 53

    le Sam 13 Fév 2016 - 16:02

    Un beau merci, avec un M MAJUSCULE. C'est parfait arigatooooooo *^*
    Pythia
    Pythia
    FémininAge : 31Messages : 183

    le Ven 11 Mar 2016 - 0:28

    Merci du partage^^



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 Neo10
    Margaux E.
    Margaux E.
    FémininAge : 17Messages : 25

    le Sam 2 Avr 2016 - 13:44

    Thanks you !
    Mondo Gecko
    Mondo Gecko
    MasculinAge : 35Messages : 51

    le Mar 5 Avr 2016 - 2:23

    Merci Hiro <3





    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 607046geek
    jeremy31
    jeremy31
    MasculinAge : 23Messages : 22

    le Ven 29 Avr 2016 - 15:47

    Merci :)
    R.Falsworth
    R.Falsworth
    FémininAge : 23Messages : 92

    le Mer 4 Mai 2016 - 20:05

    Simple et efficace ! :3
    Merci !!
    Dydy
    Dydy
    FémininAge : 29Messages : 493

    le Jeu 26 Mai 2016 - 18:18

    merci du partage ^^



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 27978_signature_never_utopia_dydy_2
    AlexeB
    AlexeB
    FémininAge : 24Messages : 165

    le Mer 1 Juin 2016 - 14:36

    Très joli!
    Merci du partage :heart:
    Dragonia
    Dragonia
    FémininAge : 31Messages : 24

    le Lun 6 Juin 2016 - 21:26

    très sympa ^^
    Shouro-jidai
    Shouro-jidai
    MasculinAge : 27Messages : 9

    le Mar 5 Juil 2016 - 2:56

    Merci :)
    Loona
    Loona
    FémininAge : 53Messages : 22

    le Dim 7 Aoû 2016 - 8:22

    Merci.



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 Signat10
    Kallindra
    Kallindra
    FémininAge : 35Messages : 27

    le Mar 9 Aoû 2016 - 15:17

    Très chouette et simple.Juste ce que je cherchais ^^
    Merci Very Happy



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 Kalli_46
    Kallindra
    Kallindra
    FémininAge : 35Messages : 27

    le Mar 9 Aoû 2016 - 15:23

    @Kallindra a écrit:Très chouette et simple.Juste ce que je cherchais ^^
    Merci Very Happy

    En fait le lien de l'aperçu n'amène pas à la bonne PA donc ce n'était pas ce que je cherchais XD
    Tant pis je reprend mes recherches ^^



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 Kalli_46
    Victor-57
    Victor-57
    MasculinAge : 29Messages : 13

    le Sam 3 Sep 2016 - 20:35

    Thanks ! Very Happy
    Dacina moe
    Dacina moe
    FémininAge : 42Messages : 171

    le Mer 12 Oct 2016 - 19:43

    Jolie, merci <3
    Kraiyz
    Kraiyz
    MasculinAge : 23Messages : 29

    le Jeu 13 Oct 2016 - 15:54

    J'adore !
    Kraiyz
    Kraiyz
    MasculinAge : 23Messages : 29

    le Jeu 13 Oct 2016 - 15:57

    Merci !
    Kraiyz
    Kraiyz
    MasculinAge : 23Messages : 29

    le Jeu 13 Oct 2016 - 16:04

    Merci
    Fakiros
    Fakiros
    MasculinAge : 22Messages : 3

    le Jeu 10 Nov 2016 - 1:37

    Merci beaucoup c'est vraiment beau!
    Ishiro
    Ishiro
    FémininAge : 26Messages : 87

    le Ven 2 Déc 2016 - 17:51

    Je vais voir le rendu sur le forum que je prépare; mais sans ça... C'est super bien foutu ._.




    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 09041711320918177
    Cheub
    Cheub
    MasculinAge : 32Messages : 23

    le Mar 3 Jan 2017 - 12:51

    Merci beaucoup !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 11 Backstab
    Corkyie
    Corkyie
    FémininAge : 22Messages : 75

    le Ven 19 Mai 2017 - 4:02

    simple et efficace, merci bien pour le partage :)
    John:
    John:
    MasculinAge : 27Messages : 56

    le Mar 30 Mai 2017 - 2:25

    mrc :3
    Lucress
    Lucress
    FémininAge : 29Messages : 3

    le Mar 30 Mai 2017 - 21:32

    Un travail sublime ! *o*
    Vais travailler dur pour arriver à ce niveau. >< Un grand merci en tout cas !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 6 Aoû 2020 - 23:38