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.

Le deal à ne pas rater :
Captive : où acheter le Tome Captive 1.5 en édition Collector ?
26.90 €
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

    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
    Thalaï
    FémininAge : 29Messages : 23

    Ven 28 Fév 2014 - 22:15

    Absolument sublime
    avatar
    Malbe
    FémininAge : 27Messages : 27

    Sam 1 Mar 2014 - 16:32

    Très joli, j'adore ! :)
    ClipClap
    ClipClap
    FémininAge : 23Messages : 60

    Sam 1 Mar 2014 - 16:37

    Merci, c'est trop meugnon !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 6 435202SignatClip2
    avatar
    chujin
    FémininAge : 30Messages : 7

    Dim 2 Mar 2014 - 14:54

    Merci
    Narialys
    Narialys
    FémininAge : 28Messages : 29

    Lun 3 Mar 2014 - 13:34

    Thank you !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 6 B79556058132607996b3de7317d36
    Mezou
    Mezou
    FémininAge : 24Messages : 56

    Lun 3 Mar 2014 - 17:42

    Merci. :3
    MOON LEE
    MOON LEE
    FémininAge : 29Messages : 149

    Mer 5 Mar 2014 - 12:26

    Merci
    Elyade
    Elyade
    FémininAge : 38Messages : 53

    Jeu 6 Mar 2014 - 21:33

    Merci ! =)
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Jeu 6 Mar 2014 - 22:11

    Merci Wink
    Percylove
    Percylove
    FémininAge : 28Messages : 259

    Ven 7 Mar 2014 - 0:54

    Merci beaucoup!



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 6 9a6v
    Sacagawea
    Sacagawea
    FémininAge : 28Messages : 236

    Ven 7 Mar 2014 - 3:05

    Simple et élégant ! Merci du partage  :star: 
    avatar
    Njut
    FémininAge : 23Messages : 43

    Ven 7 Mar 2014 - 19:02

    Merci !
    Anonymous
    Invité

    Sam 8 Mar 2014 - 20:01

    Très beau et personnalisable bravo et merci pour ce partage Wink
    Tu as déjà mis le Crédit ou il faut l'ajouter ?!
    Méandre.
    Méandre.
    FémininAge : 26Messages : 95

    Dim 9 Mar 2014 - 20:08

    Merci !
    EnjoyPhoenix
    EnjoyPhoenix
    FémininAge : 27Messages : 22

    Lun 10 Mar 2014 - 19:16

    J'aime beaucoup ! Merci ! Very Happy
    lutecia
    lutecia
    FémininAge : 29Messages : 13

    Mar 11 Mar 2014 - 8:29

    Merchi à toi Oh grand Sage !
    ShamRock
    ShamRock
    FémininAge : 29Messages : 44

    Mar 11 Mar 2014 - 15:23

    Merci ~
    Patdrue
    Patdrue
    FémininAge : 34Messages : 158

    Mer 12 Mar 2014 - 12:19

    muchas gracias!!!
    CathyCréation
    CathyCréation
    FémininAge : 44Messages : 207

    Jeu 13 Mar 2014 - 4:10

    merci beaucoup elle est tres belle
    Banpaia
    Banpaia
    FémininAge : 26Messages : 130

    Jeu 20 Mar 2014 - 17:45

    Merci !
    lala zhang
    lala zhang
    FémininAge : 32Messages : 376

    Ven 21 Mar 2014 - 12:35

    super PA, j'aime bien le style
    avatar
    Gedomaru
    FémininAge : 26Messages : 70

    Sam 22 Mar 2014 - 13:29

    Arigatou! Elle est parfaite, c'est pile ce que je recherchait! =D
    Hallibel
    Hallibel
    FémininAge : 30Messages : 82

    Dim 23 Mar 2014 - 12:26

    Merci !
    Fallaha
    Fallaha
    FémininMessages : 80

    Mar 25 Mar 2014 - 1:14

    merci !!! Very Happy
    Little Melody
    Little Melody
    FémininAge : 22Messages : 64

    Ven 28 Mar 2014 - 19:52

    Mimi ** ♥
    Contenu sponsorisé


      La date/heure actuelle est Mer 21 Fév 2024 - 3:45