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.
    Loona
    Loona
    FémininAge : 51Messages : 22

    le Dim 7 Aoû 2016 - 7:56

    Merci.



    Page d'accueil toute simple - Page 6 Signat10
    Gnuh
    Gnuh
    FémininAge : 21Messages : 87

    le Jeu 1 Sep 2016 - 20:29

    Merci à toi pour le codage et le partage ^-^



    Page d'accueil toute simple - Page 6 Untitl16
    Neffaly
    Neffaly
    MasculinAge : 24Messages : 47

    le Ven 2 Sep 2016 - 3:38

    mrc
    naah
    naah
    MasculinAge : 25Messages : 80

    le Sam 3 Sep 2016 - 20:56

    Magnifique!
    Anaidéia
    Anaidéia
    FémininAge : 18Messages : 10

    le Dim 4 Sep 2016 - 18:07

    Merci pour cette jolie PA !
    Anonymous
    Invité

    le Jeu 8 Sep 2016 - 20:23

    Simple et efficace, merci :)
    charly45700
    charly45700
    MasculinAge : 22Messages : 30

    le Ven 9 Sep 2016 - 17:03

    merci
    NowSprings
    NowSprings
    FémininAge : 20Messages : 35

    le Ven 30 Sep 2016 - 21:30

    Merci !



    Page d'accueil toute simple - Page 6 Signat10
    Page d'accueil toute simple - Page 6 Dark_and_girly_stamp_by_stampmakerlkj-d6154qaPage d'accueil toute simple - Page 6 I_love_pirates_stamp_by_stampmakerlkj-d6544no Page d'accueil toute simple - Page 6 Steampunk_stamp_by_stampmakerlkj-d61q82o Page d'accueil toute simple - Page 6 Gay_rights_stamp_by_stampmakerlkj-d61m4fe Page d'accueil toute simple - Page 6 9ccead529ece7299769357ab69416b0d-d6svomf Page d'accueil toute simple - Page 6 Star_Wars_Stamp_by_ChimeraDragonfang Page d'accueil toute simple - Page 6 00d1124c4de408f25d00d7e42f651893-d31l3d0
    Lilynufare
    Lilynufare
    FémininAge : 28Messages : 341

    le Dim 4 Déc 2016 - 21:43

    Jolie merci
    Voltino
    Voltino
    MasculinAge : 24Messages : 55

    le Sam 10 Déc 2016 - 20:09

    Super, merci
    Exenties
    Exenties
    FémininAge : 32Messages : 75

    le Mar 13 Déc 2016 - 20:24

    Merci !




    Page d'accueil toute simple - Page 6 128765signpiratetypoBIScadre
    Solid6Snake
    Solid6Snake
    MasculinAge : 35Messages : 146

    le Mer 14 Déc 2016 - 19:50

    Il y a de l'idée c'est propre.
    Elektra Kloo
    Elektra Kloo
    FémininAge : 30Messages : 156

    le Jeu 15 Déc 2016 - 15:03

    merci
    Faïryna
    Faïryna
    FémininAge : 16Messages : 64

    le Sam 31 Déc 2016 - 16:20

    Merci, c'est très beau!
    Tiya Melody
    Tiya Melody
    FémininAge : 21Messages : 9

    le Mer 11 Jan 2017 - 9:49

    merci
    Athéna
    Athéna
    FémininAge : 58Messages : 29

    le Ven 3 Fév 2017 - 13:32

    J'aime bien, je vais tenter. Merci !



    "L'esprit est un instrument de musique avec une certaine gamme de tons,
    au-deLà desquels s'étend un silence infini."
    petit lu
    petit lu
    FémininAge : 26Messages : 184

    le Ven 10 Mar 2017 - 10:32

    Joli, merci
    Ode 14
    Ode 14
    FémininAge : 26Messages : 21

    le Lun 20 Mar 2017 - 20:49

    merci ^^
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 27Messages : 128

    le Mar 21 Mar 2017 - 13:45

    J'aime beaucoup, merci a toi !



    What if I need you baby?
    I PROMISE THAT ONE DAY I’LL BE AROUND, I’LL KEEP YOU SAFE ! IT'S SUCH A CRUEL WORLD BUT I FOUND SOMETHING GOOD.. ‘CAUSE IN ALL THIS BITTERNESS YOU STAY SO SWEET ...
    Sophie2
    Sophie2
    FémininAge : 55Messages : 66

    le Ven 31 Mar 2017 - 10:05

    merci
    Raynold
    Raynold
    MasculinAge : 19Messages : 39

    le Dim 28 Mai 2017 - 3:17

    i adore
    Stronger
    Stronger
    MasculinAge : 24Messages : 277

    le Dim 28 Mai 2017 - 6:54

    merci :)



    Page d'accueil toute simple - Page 6 Strong13
    Agilbert
    Agilbert
    FémininAge : 22Messages : 49

    le Jeu 8 Juin 2017 - 10:06

    Merci ! cheers
    Steel Block
    Steel Block
    MasculinAge : 23Messages : 34

    le Dim 18 Juin 2017 - 21:35

    merci
    Kira Hatsuki
    Kira Hatsuki
    FémininAge : 17Messages : 146

    le Jeu 13 Juil 2017 - 14:37

    Merci beaucoup ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 25 Avr 2019 - 21:49