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.

-34%
Le deal à ne pas rater :
Note d’Espresso – Oro di Napoli Lot 48 capsules compatibles ...
5.73 € 8.67 €
Voir le deal

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

    Hiro'
    Hiro'
    MasculinAge : 24Messages : 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.
    ClipClap
    ClipClap
    FémininAge : 20Messages : 60

    Sam 12 Juil 2014 - 17:41

    Thanks ♥



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 9 435202SignatClip2
    Leisha.
    Leisha.
    FémininAge : 29Messages : 29

    Lun 14 Juil 2014 - 19:47

    Merci du partage, cette PA est parfaite !
    Natsu892
    Natsu892
    MasculinAge : 20Messages : 63

    Mer 16 Juil 2014 - 23:17

    Merci



    Louchita
    Louchita
    FémininAge : 28Messages : 132

    Sam 26 Juil 2014 - 22:08

    Mercii =)



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 9 1466018025-loulousign
    Shinozuki
    Shinozuki
    FémininAge : 20Messages : 6

    Lun 25 Aoû 2014 - 10:31

    C'est beau, merci ! :)
    mazonzon
    mazonzon
    FémininAge : 21Messages : 54

    Jeu 28 Aoû 2014 - 20:27

    Merci, il est trop beau
    Tine
    Tine
    FémininAge : 22Messages : 37

    Jeu 28 Aoû 2014 - 20:33

    Merci c:
    Insanities
    Insanities
    FémininAge : 25Messages : 40

    Jeu 11 Sep 2014 - 6:36

    Merci beaucoup du partage !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 9 Baby_b10
    Ombrys
    Ombrys
    FémininAge : 19Messages : 27

    Ven 12 Sep 2014 - 18:57

    Trop belle cette P.A :)
    Lihuén
    Lihuén
    FémininAge : 31Messages : 544

    Jeu 18 Sep 2014 - 18:52

    Merci beaucoup ! Razz



    tess444
    tess444
    FémininAge : 27Messages : 14

    Dim 21 Sep 2014 - 2:38

    merci:^^
    Meuh Pffeuh
    Meuh Pffeuh
    FémininAge : 21Messages : 37

    Lun 22 Sep 2014 - 18:47

    merci !
    Pokahontas
    Pokahontas
    FémininAge : 24Messages : 28

    Sam 27 Sep 2014 - 19:04

    merciii !
    Kathlyn
    Kathlyn
    FémininAge : 24Messages : 33

    Ven 17 Oct 2014 - 20:34

    merkiiii
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 21Messages : 304

    Dim 19 Oct 2014 - 13:27

    Merci !



    Just want to be yours.
    Foxe
    Foxe
    FémininAge : 20Messages : 122

    Dim 19 Oct 2014 - 21:07

    ouah, j'adore, merci énormément !



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 9 Wet_ha10
    Chocolakato
    Chocolakato
    FémininAge : 30Messages : 818

    Mar 4 Nov 2014 - 19:17

    Hey, merci <3



    Nevr0z
    Nevr0z
    FémininAge : 32Messages : 74

    Ven 7 Nov 2014 - 15:02

    Merci !
    .SaKou.
    .SaKou.
    FémininAge : 25Messages : 57

    Dim 9 Nov 2014 - 18:36

    Merci



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 9 1351184429-smile
    Celuna
    Celuna
    FémininAge : 30Messages : 133

    Lun 17 Nov 2014 - 11:17

    Elle est sobre mais vraiment très belle
    Arisu
    Arisu
    FémininAge : 32Messages : 116

    Lun 17 Nov 2014 - 21:36

    Sympa, merci !
    Likilou
    Likilou
    MasculinAge : 27Messages : 307

    Mar 18 Nov 2014 - 19:00

    merci



    Page d'accueil tout en sobriété et en simplicité /PAN - Page 9 707828SignArthur2
    Inwë
    Inwë
    FémininAge : 22Messages : 36

    Sam 22 Nov 2014 - 13:21

    Merci beaucoup il est magnifique *.* !
    Acédie
    Acédie
    FémininAge : 22Messages : 91

    Sam 22 Nov 2014 - 16:49

    C'est beau ! Merci
    EmYasmina
    EmYasmina
    FémininAge : 21Messages : 85

    Sam 22 Nov 2014 - 17:58

    Merci beaucoup !
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Avr 2021 - 2:42