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 du moment : -9%
SSD interne Crucial SSD P3 1To NVME
Voir le deal
49.99 €

    Page d'accueil toute simple

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

    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.
    Patou972
    Patou972
    FémininAge : 45Messages : 181

    Lun 16 Fév 2015 - 4:19

    merci beaucoup :friends:
    FlipFlap
    FlipFlap
    FémininAge : 41Messages : 59

    Sam 21 Fév 2015 - 15:05

    simple et efficace merci!
    mace
    mace
    MasculinAge : 34Messages : 15

    Sam 21 Fév 2015 - 15:50

    Merci
    Filou
    Filou
    FémininAge : 33Messages : 162

    Mar 24 Fév 2015 - 5:41

    Simple et pratique :3
    AyaseNeko
    AyaseNeko
    FémininAge : 28Messages : 55

    Mar 3 Mar 2015 - 17:28

    Ces justement parce qu'elle est simple qu'elle est belle ^^
    Kortyx
    Kortyx
    MasculinAge : 34Messages : 81

    Mer 4 Mar 2015 - 16:29

    Trop bien !
    Théine
    Théine
    MasculinAge : 43Messages : 24

    Sam 7 Mar 2015 - 20:08

    Merci!
    Luky
    Luky
    FémininAge : 26Messages : 4

    Sam 7 Mar 2015 - 23:41

    Merci
    Adélia
    Adélia
    FémininAge : 26Messages : 21

    Dim 8 Mar 2015 - 17:33

    j'aime beaucoup, merci :)
    Chadot
    Chadot
    FémininAge : 36Messages : 248

    Lun 9 Mar 2015 - 16:32

    Merci beaucoup.



    Page d'accueil toute simple - Page 2 2mo6y5k
    Neilia
    Neilia
    FémininAge : 32Messages : 101

    Ven 13 Mar 2015 - 19:01

    merci ^^
    Adèle
    Adèle
    FémininAge : 33Messages : 96

    Ven 27 Mar 2015 - 19:18

    Merchi ♥
    Airore
    Airore
    FémininAge : 25Messages : 132

    Dim 5 Avr 2015 - 12:32

    Merci !
    AnimeFanGirl199
    AnimeFanGirl199
    FémininAge : 26Messages : 13

    Lun 6 Avr 2015 - 20:26

    Merci :)
    Insanities
    Insanities
    FémininAge : 29Messages : 40

    Mar 7 Avr 2015 - 0:28

    Wow merci beaucoup pour ton code !



    Page d'accueil toute simple - Page 2 Baby_b10
    Melaly
    Melaly
    FémininAge : 30Messages : 91

    Mar 7 Avr 2015 - 23:11

    Merci c'est simple et clair :)
    Equestria
    Equestria
    FémininAge : 27Messages : 118

    Jeu 9 Avr 2015 - 20:04

    merci
    avatar
    Abate.7
    MasculinAge : 29Messages : 67

    Lun 13 Avr 2015 - 13:35

    merci
    Sparky59
    Sparky59
    FémininAge : 24Messages : 54

    Lun 13 Avr 2015 - 16:40

    Merci ^^
    TiGraou
    TiGraou
    MasculinAge : 31Messages : 243

    Mar 12 Mai 2015 - 3:27

    Merci
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Ven 15 Mai 2015 - 18:12

    Merci
    Neymar
    Neymar
    MasculinAge : 26Messages : 139

    Sam 16 Mai 2015 - 23:00

    Erzci o/
    Javarakita
    Javarakita
    FémininAge : 24Messages : 86

    Ven 29 Mai 2015 - 19:20

    J'aime beaucoup merci et bravo :)
    ryukato
    ryukato
    MasculinAge : 30Messages : 3

    Ven 29 Mai 2015 - 22:26

    mici madame
    Lunara
    Lunara
    FémininAge : 37Messages : 95

    Jeu 4 Juin 2015 - 19:53

    merci du partage
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 13:30