AccueilFAQRechercherMembresGroupesS'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.


    Page d'accueil toute simple

    Célestine
    Célestine
    FémininAge : 21Messages : 51

    le Sam 22 Nov 2014 - 3:11

    Rappel du premier message :

    Salut tout le monde !
    Je poste mon premier LS sur le forum cheers

    C'est la toute première page d'accueil que je crée, j'espère qu'elle vous plaira bien qu'elle soit très simple (elle ne contient que 3 blocs).
    Le code est assez simple à modifier, je pense, et plutôt clair, même si ça m'a pris énormément de temps pour l'écrire (vu que je suis toujours une "novice") hahaha.
    >> j'ai laissé le texte et les images de départ dans le code (par flemme de tout effacer je vous l'accorde haha), j'espère que ça ne dérange pas Razz . C'est une page d'accueil que j'ai faite il y a un bon moment pour un de mes forums qui n'a malheureusement pas été actif.
    Vous pouvez modifier les couleurs, la taille des blocs si vous le souhaitez, les polices, etc.
    Bref; adaptez ce code à vos envies ! N'oubliez pas de créditer Never-Utopia ! Very Happy

    Et puis, n'hésitez pas à dire merci si la p.a. vous a plu Wink
    La page d'accueil
    Images du staff au survol



    Les codes


    Message sur la page d'accueil:
    Code:
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />   
    <table style="margin: auto;" cellspacing="10">
                                  
       <tbody>
                                           
          <tr>
                                                    
             <td colspan="3">
                                                             
                <div class="nomfow">
                                             nous te souhaitons la bienvenue au pensionnat seido, {USERNAME}                       
                </div>
                                                         
             </td>
                                                
          </tr>
                                           
          <tr>
                                                    
             <td>
                                                             
                <div class="bloc2">
                                                                      
                   <div class="titrep">
                                                    contexte du forum                         
                   </div>
                                                                      
                   <div class="bloc2texte">
                                                                                                          <br />Bienvenue dans l'un des lycées les plus prestigieux du Japon ! Le niveau d'études y est très élevé, le corps enseignant visant à offrir à ses étudiants la meilleure formation possible pour pouvoir atteindre les universités les plus compétentes du pays. Pourtant, l'école a toujours accueilli un grand nombre de types d'élèves différents : des adolescents de bonne famille aux voyous et bagarreurs invétérés, tout le monde était accepté, à condition d'avoir un potentiel dans un domaine quelconque. Un grand nombre de clubs existent ou peuvent être créés, tels que le club de journalisme, d'échecs, de lecture, de cinéma...etc. Chaque passion peut être représentée par un club, pour autant qu'il y ait assez d'élèves pour la célébrer. Sachez, chers étudiants, que c'est vous tous, autant que vous êtes, qui faîtes vivre cette école, alors soyez imaginatifs dans ce que vous voulez créer, chaque pierre ajoutée à l'édifice ne peut être que constructive ! <br /><br />                            <a style="margin: auto;" href="http://pensionnat-seido.forumgratuit.fr/t2-le-lycee-seido?tid=75221d9d102504b18b37bedbb464c4ba">La suite ?</a> <br /> 
                   </div>
                                          
                </div>
                                                         
             </td>
                                                    
             <td>
                                                             
                <div class="bloc3">
                                                                      
                   <div class="titrep">
                                                    nouveautés                         
                   </div>
                                             <br />12.07.14 - Bienvenue à Moeko !<br />10.07.14 - Bienvenue à Nightmare !<br />10.07.14 - Bienvenue à Alice !<br /> 09.07.14 - Bienvenue à Erika !<br />07.07.14 - Bienvenue à Kakashi ! <br /> 05.07.14 - Bienvenue à Yukine !<br />05.07.14 - Ouverture du forum.<br />01.06.14 - Fin des posts administratifs<br />26.05.14 - Staff au complet !<br />24.05.14 - Création du forum ! <br />                     
                </div>
                                                         
             </td>
                                                
          </tr>
                                       
       </tbody>
                  
    </table>
                 
    <div style="margin: auto; background: #; height: auto; width: 600px; color: black; font-family: arial; font-size: 10px; margin-bottom: -4px;">
                         <br /> <br />               
       <div style="background-color: #A2A9B8; width: 600px; border-radius: 20px; padding: 4px;">
                                                                       
          <table>
                                                          
             <tbody>
                                                                   
                <tr>
                                                                            
                   <td>
                                                                                     
                      <div class="infobulle">
                                                             <a href="http://pensionnat-seido.forumgratuit.fr/u2contact"> <img style="border-radius: 50px;" src="http://img4.hostingpics.net/pics/940002tumblrmxh433IKPi1r2fcc1o7250.jpg" /> </a><span>Jun Isashiki ★ Fondateur </span>                               
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div style="width: 35px">
                                                                                          
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div class="infobulle">
                                                             <a href="http://pensionnat-seido.forumgratuit.fr/u1contact"> <img style="border-radius: 50px;" src="http://img4.hostingpics.net/pics/319904samplea2691249591c0fb29b1ae8f80e08f18c.jpg" /></a> <span>Yui Isashiki ★ Fondatrice </span>                               
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div style="width:35px">
                                                                                          
                      </div>
                                                                                 
                   </td>
                                                                            
                   <td>
                                                                                     
                      <div class="infobulle">
                                                             <a href="http://pensionnat-seido.forumgratuit.fr/u3contact"> <img style="border-radius: 50px;" src="http://i58.servimg.com/u/f58/18/87/46/31/pokemo10.jpg" /></a> <span>Satoshi Tajiri ★ Administrateur </span>                               
                      </div>
                                                                                 
                   </td>
                                                                        
                </tr>
                                                               
             </tbody>
                                                      
          </table>
                                             
       </div>
                                
    </div>

    CSS
    Code:
    /* PA par Célestine */
    .nomfow {
      font-size: 20px;
      font-family: Lobster, Great vibes, georgia;
      text-align: center;
      color: #A2A9B8;
    }

    /*Titre des blocs*/
    .titrep {
      display: block;
      text-align: center;
      width: auto;
      height: 22px;
      background-color: #A2A9B8;
      color: #F2F2B2;
      border-bottom: 1px dotted #F2F2B2;
      font-size: 20px;
      font-family: Lobster, great vibes, Georgia;
    }

    /*Contexte*/
    .bloc2 {
      border: 1px solid #A2A9B8;
      border-radius: 10px 10px 0px 0px;
      width: 330px;
      height: 240px;
      background-color: #A2A9B8;
      overflow: hidden;
    }

    .bloc2texte {
      width: 325px;
      height: 210px;
      font-size: 12px;
      font-family: arial;
      overflow: auto;
      padding: 3px;
      text-align: justify;
    }

    /*Nouveautés*/
    .bloc3 {
      border: 1px solid #A1A6BD;
      border-radius: 10px 10px 0px 0px;
      width: 245px;
      height: 240px;
      background-color: #A1A6BD;
      overflow: auto;
      font-family: arial;
      font-size: 12px;
    }

    /*staff*/
    .infobulle {
      position: relative;
      z-index: 0;
    }

    .infobulle:hover {
      background-color: transparent;
      z-index: 50;
    }

    .infobulle span {
      position: absolute;
      background-color: #E6E6E3;
      opacité: 0.8;  /*Couleur de fond*/
      color: #A2A9B8;  /* Couleur de votre texte*/
      padding: 5px;
      visibility: hidden;
      text-align: center;
      line-height: 15px;
      font-family: arial;
      font-size: 12px;
    }

    .infobulle span img {  /*style des images dans l'infobulle*/
      padding: 5px;
    }

    .infobulle:hover span {    /*Style de l'infobulle*/
      visibility: visible;
      bottom: 20px;    /*Distance entre l'infobulle et le bas de la cellule*/
      left: 50px;    /*Distance entre l'infobulle et la gauche de la page*/
      width: 100px;  /*Largeur de l'infobulle*/
      border-radius: 5px;
    }

    .infobulle a {  /*Style des liens*/
      color: white;    /*Couleur des liens*/
      text-decoration: none;
    }

    .infobulle a:hover {    /*style des liens au passage de la souris*/
      font-style: italic;
    }

    /* Fin de la P.A. */

    Si vous avez des problèmes avec ce LS, venez poster ici.
    Amychan
    Amychan
    FémininAge : 41Messages : 16

    le Mar 8 Sep 2015 - 15:21

    merci
    melinnus
    melinnus
    FémininAge : 23Messages : 16

    le Mer 16 Sep 2015 - 19:00

    mercii :)
    alysia
    alysia
    MasculinAge : 27Messages : 33

    le Lun 28 Sep 2015 - 0:26

    Merci
    Lessien
    Lessien
    FémininAge : 37Messages : 163

    le Lun 28 Sep 2015 - 15:32

    Simple mais efficace. Merci !
    AMYROSSLEDGER
    AMYROSSLEDGER
    FémininAge : 25Messages : 37

    le Mar 13 Oct 2015 - 16:27

    c'est charmant comme tout !
    Eirhinn
    Eirhinn
    FémininAge : 27Messages : 11

    le Mer 14 Oct 2015 - 14:33

    Merci !
    Reishi
    Reishi
    MasculinAge : 25Messages : 146

    le Ven 23 Oct 2015 - 9:41

    merci
    sweetheart.
    sweetheart.
    FémininAge : 31Messages : 120

    le Ven 20 Nov 2015 - 10:38

    Je veux trop la même ! Sad

    Mais spécial mariah carey quoi :')



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Chlirr
    Chlirr
    FémininAge : 30Messages : 63

    le Ven 20 Nov 2015 - 23:52

    Merci
    Ehlènoha
    Ehlènoha
    FémininAge : 30Messages : 27

    le Mar 24 Nov 2015 - 20:56

    Simple mais nickel =D
    Merci !
    TIGRESS13
    TIGRESS13
    FémininAge : 27Messages : 23

    le Ven 11 Déc 2015 - 11:57

    Merci !
    Yamoto
    Yamoto
    FémininAge : 17Messages : 29

    le Mer 23 Déc 2015 - 18:44

    merci!
    Clarisse
    Clarisse
    FémininAge : 19Messages : 3938

    le Sam 26 Déc 2015 - 15:57

    Merci ! J'vais personnaliser un peu tout ça pour que ça s'harmonise bien. :)
    Devil.
    Devil.
    FémininAge : 22Messages : 58

    le Mer 13 Jan 2016 - 19:23

    Merci ^^
    didicmy
    didicmy
    FémininAge : 28Messages : 69

    le Lun 18 Jan 2016 - 19:24

    Merci du partage
    Pinkie
    Pinkie
    FémininAge : 19Messages : 33

    le Sam 23 Jan 2016 - 11:15

    Elle est très jolie, j'aime beaucoup !
    witm
    witm
    FémininAge : 25Messages : 51

    le Dim 24 Jan 2016 - 13:14

    merci :)
    Mohank
    Mohank
    MasculinAge : 24Messages : 20

    le Dim 24 Jan 2016 - 20:40

    Merci!
    Lizbeth
    Lizbeth
    FémininAge : 22Messages : 164

    le Mar 26 Jan 2016 - 15:56

    Merci beaucoup ! Razz
    BlackArrow
    BlackArrow
    MasculinAge : 21Messages : 17

    le Mer 3 Fév 2016 - 14:13

    Merci
    Valou712
    Valou712
    FémininAge : 36Messages : 23

    le Sam 6 Fév 2016 - 7:38

    Très jolie PA !! Merci pour ce travail !!
    blastrall
    blastrall
    MasculinAge : 25Messages : 41

    le Sam 6 Fév 2016 - 14:50

    merci bien
    Synny
    Synny
    FémininAge : 18Messages : 55

    le Sam 6 Fév 2016 - 17:03

    C'est simple mais jolie, merciiii. :3
    Shidomaru
    Shidomaru
    MasculinAge : 26Messages : 8

    le Sam 6 Fév 2016 - 20:03

    Intéressant et cool merci !
    KTMiz
    KTMiz
    MasculinAge : 20Messages : 47

    le Lun 8 Fév 2016 - 19:07

    merci



    Page d'accueil toute simple - Page 4 Kjod95_sick_religion
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 3:19