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.

-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.99 €
Voir le deal

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

    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Dim 22 Sep 2013 - 0:01

    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.
    shala
    shala
    FémininAge : 32Messages : 213

    Dim 22 Sep 2013 - 12:23

    c'est super beau ^^



    Leoguillem
    Leoguillem
    MasculinAge : 24Messages : 137

    Dim 22 Sep 2013 - 16:05

    Han!
    C'est sobre, simple, j'aime!
    Merci!



    - Je signe Marabout -
    Laetitia
    Laetitia
    FémininAge : 42Messages : 89

    Dim 22 Sep 2013 - 16:38

    très sympa
    merci
    Depp
    Depp
    FémininAge : 32Messages : 300

    Lun 23 Sep 2013 - 16:02

    Un grand merci ^^



    Page d'accueil tout en sobriété et en simplicité /PAN Tumblr_nenygwIlcz1s4u464o1_500
    M i h o
    M i h o
    FémininAge : 30Messages : 18

    Jeu 3 Oct 2013 - 18:45

    Merci !
    Rhythm Star
    Rhythm Star
    FémininAge : 23Messages : 61

    Ven 4 Oct 2013 - 21:40

    Merci
    Whisper
    Whisper
    FémininAge : 26Messages : 34

    Sam 5 Oct 2013 - 12:20

    Très joli, merci !
    Siprano
    Siprano
    FémininAge : 26Messages : 295

    Sam 5 Oct 2013 - 13:08

    merciiiiiiii
    tamanegeek
    tamanegeek
    MasculinAge : 24Messages : 167

    Dim 6 Oct 2013 - 12:58

    Merci
    Yukionna
    Yukionna
    FémininAge : 23Messages : 75

    Jeu 10 Oct 2013 - 18:41

    Merciii ^^
    le_bn
    le_bn
    MasculinAge : 31Messages : 7

    Ven 11 Oct 2013 - 21:49

    Merci Hiro :)
    J'ai tellement cherché pour l'effet qu'il y a dans "Membre du Mois", tu me sauves !
    LickingBoot
    LickingBoot
    FémininAge : 25Messages : 503

    Sam 12 Oct 2013 - 15:39

    Magnifique ! merci beaucoup



    Page d'accueil tout en sobriété et en simplicité /PAN 557826ilovedoudousign
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Dim 13 Oct 2013 - 13:11

    Merci, superbe PA



    Page d'accueil tout en sobriété et en simplicité /PAN Kit_si10
    arturb
    arturb
    MasculinAge : 23Messages : 48

    Sam 19 Oct 2013 - 21:27

    merci :)
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Dim 20 Oct 2013 - 19:16

    Merci



    Page d'accueil tout en sobriété et en simplicité /PAN 1435969469-signd
    FEZ!FEZ!
    Page d'accueil tout en sobriété et en simplicité /PAN 150804081846482087
    ariel-la-sirène
    ariel-la-sirène
    FémininAge : 28Messages : 2

    Dim 20 Oct 2013 - 23:09

    Je te remercies.
    Apokalip'z
    Apokalip'z
    MasculinAge : 30Messages : 290

    Mar 22 Oct 2013 - 16:53

    Veux voir ça!



    Page d'accueil tout en sobriété et en simplicité /PAN 1424818313-sign-apoka
    сhampi
    сhampi
    FémininAge : 25Messages : 151

    Mer 23 Oct 2013 - 10:39

    Merci beaucoup.
    Anonymous
    Invité

    Mer 23 Oct 2013 - 19:24

    Merci c'est vraiment super jolie Very Happy
    Raziel Dirty
    Raziel Dirty
    MasculinAge : 26Messages : 39

    Mer 23 Oct 2013 - 20:06

    Thank you !
    avatar
    TATACARO13
    FémininAge : 49Messages : 80

    Jeu 24 Oct 2013 - 12:13

    MERCI



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

    Page d'accueil tout en sobriété et en simplicité /PAN 381658signatureBAU
    Téoz
    Téoz
    FémininAge : 35Messages : 38

    Jeu 24 Oct 2013 - 21:43

    merci c'est simple et frais :)
    Kathee
    Kathee
    FémininAge : 30Messages : 680

    Jeu 24 Oct 2013 - 22:05

    Merci Hiro' ! C'est Pile-poil ce que je cherchais : une PA simple aux couleurs douces, sans trop de grigris (pour les petits forums comme le mien^^) et surtout très claire ! MERCIII !

    :friends: 






    Forum dérivé ouat
    dans un univers steampunk :heart:
    Alice Margatroid
    Alice Margatroid
    FémininAge : 28Messages : 38

    Ven 25 Oct 2013 - 17:25

    C'est trop mignon ! Merci du partage :3



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


      La date/heure actuelle est Jeu 28 Mar 2024 - 9:13