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.

-48%
Le deal à ne pas rater :
Xiaomi Redmi Airdots – Ecouteurs sans fils
10.49 € 19.99 €
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.
    Amy Peterson
    Amy Peterson
    FémininAge : 21Messages : 4

    le Ven 22 Nov 2013 - 19:36

    Génial, merci infiniment!
    LimitedTime
    LimitedTime
    FémininAge : 20Messages : 21

    le Sam 23 Nov 2013 - 21:42

    Merci !
    Evydence
    Evydence
    FémininAge : 23Messages : 60

    le Ven 29 Nov 2013 - 14:29

    Merci beaucoup!
    Vegvisir
    Vegvisir
    FémininAge : 21Messages : 411

    le Dim 1 Déc 2013 - 16:29

    C'est simple et élégant, j'adore ! C'est tout se que je cherche, merci beaucoup !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 3 1
    Zibeline
    Zibeline
    FémininAge : 35Messages : 84

    le Jeu 5 Déc 2013 - 7:02

    j'aime beaucoup, merci :love: 
    Meilia
    Meilia
    FémininAge : 26Messages : 92

    le Jeu 5 Déc 2013 - 21:24

    Merci Very Happy
    MissJedusor
    MissJedusor
    FémininAge : 29Messages : 4

    le Ven 6 Déc 2013 - 18:31

    merci
    Bowtie
    Bowtie
    FémininAge : 30Messages : 62

    le Ven 6 Déc 2013 - 22:22

    Mais je le veux je le veux je le veux!!! <3
    Merci pour ce partage!
    petit lu
    petit lu
    FémininAge : 27Messages : 184

    le Sam 7 Déc 2013 - 14:01

    C'est super beau merci
    Seth Ivanoff
    Seth Ivanoff
    MasculinAge : 30Messages : 8

    le Dim 8 Déc 2013 - 0:44

    merci
    Patapey
    Patapey
    FémininAge : 100Messages : 14

    le Mar 10 Déc 2013 - 16:23

    Oh c'est joli, merci !
    Aquarius Camus
    Aquarius Camus
    FémininAge : 39Messages : 9

    le Jeu 12 Déc 2013 - 12:26

    Un grand merci, le rendu est sympa. ^^
    L.P
    L.P
    FémininAge : 22Messages : 36

    le Sam 14 Déc 2013 - 21:22

    MERCI§
    Yooachte
    Yooachte
    FémininAge : 27Messages : 54

    le Lun 16 Déc 2013 - 0:04

    J'adore, c'est magnifique !! Merci beaucoup :)
    Shany
    Shany
    FémininAge : 35Messages : 59

    le Jeu 19 Déc 2013 - 11:02

    merci ^^
    FlipFlap
    FlipFlap
    FémininAge : 37Messages : 59

    le Ven 20 Déc 2013 - 8:21

    Au secours en fait, ton code a fait beuger tout mon forum... j'ai même plus de bouton pour aller dans le panneau de configuration!
    Divine55
    Divine55
    FémininAge : 23Messages : 16

    le Sam 21 Déc 2013 - 20:04

    Ah , j'adore ! Merci infiniment !
    Tsukodaki
    Tsukodaki
    FémininAge : 20Messages : 42

    le Lun 23 Déc 2013 - 13:33

    Merci!!
    Zarwins
    Zarwins
    FémininAge : 24Messages : 155

    le Mar 24 Déc 2013 - 7:23

    wouaaa ! Merci beaucoup !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 3 121217030106243656
    PrincesseÔ
    PrincesseÔ
    FémininAge : 23Messages : 220

    le Mar 24 Déc 2013 - 11:49

    C'est vraiment sympathique le rendu ! merci ^^
    Kira DarK
    Kira DarK
    FémininAge : 23Messages : 14

    le Jeu 26 Déc 2013 - 10:13

    C'est tout sympatoche, merci !
    Dilun
    Dilun
    FémininAge : 23Messages : 32

    le Ven 27 Déc 2013 - 15:44

    J'aime beaucoup merci (: ♥
    hurudy
    hurudy
    MasculinAge : 39Messages : 40

    le Ven 27 Déc 2013 - 23:00

    merci !
    Baka Kitsune Maaka
    Baka Kitsune Maaka
    FémininAge : 27Messages : 22

    le Dim 29 Déc 2013 - 17:11

    Très joli, merci ! :)



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 3 554906BakaKitsuneMaaka1
    JonathanLeGrand
    JonathanLeGrand
    MasculinAge : 24Messages : 28

    le Lun 30 Déc 2013 - 13:26

    merci :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 3 Aoû 2020 - 22:51