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 :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G ...
Voir le deal
599 €

    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.
    AkaZukin
    AkaZukin
    FémininAge : 30Messages : 35

    Mar 16 Juin 2015 - 1:18

    merchi!
    Mr Black_Way
    Mr Black_Way
    MasculinAge : 28Messages : 10

    Ven 19 Juin 2015 - 17:33

    sympathique, soft mais efficace à vrai dire, jolie travail ^^
    Acédie
    Acédie
    FémininAge : 26Messages : 91

    Sam 20 Juin 2015 - 0:24

    Merci beaucoup !
    Mr. Shidokaz
    Mr. Shidokaz
    MasculinAge : 30Messages : 192

    Dim 28 Juin 2015 - 0:22

    Merci beaucoup pour le partage ! Very Happy
    Lya F.
    Lya F.
    MasculinAge : 25Messages : 58

    Lun 29 Juin 2015 - 12:10

    Magnifique !
    White Lady
    White Lady
    FémininAge : 32Messages : 28

    Jeu 2 Juil 2015 - 20:06

    Merci beaucoup !!
    Dahlia
    Dahlia
    FémininAge : 27Messages : 33

    Ven 3 Juil 2015 - 3:04

    j'aime beaucoup !
    merci du partage :)
    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Ven 3 Juil 2015 - 13:22

    Merci
    MEGALAXY
    MEGALAXY
    MasculinAge : 35Messages : 20

    Sam 4 Juil 2015 - 22:47

    cool :)
    Anonymous
    Invité

    Dim 5 Juil 2015 - 19:21

    Merci !
    Charoltta
    Charoltta
    MasculinAge : 23Messages : 4

    Mer 8 Juil 2015 - 17:09

    Très joli est simple :)

    J'adore !
    Thalia Grace
    Thalia Grace
    FémininAge : 28Messages : 66

    Ven 10 Juil 2015 - 17:32

    Merci beaucoup !
    Err0r
    Err0r
    FémininAge : 31Messages : 134

    Lun 13 Juil 2015 - 18:15

    je pique !



    Page d'accueil toute simple - Page 3 150519095409324327
    Lux'Uriante
    Lux'Uriante
    FémininAge : 35Messages : 21

    Dim 19 Juil 2015 - 18:42

    merkiii beuaucoup !
    Luunalight
    Luunalight
    FémininAge : 34Messages : 98

    Mar 21 Juil 2015 - 12:23

    merci!
    Mattyew
    Mattyew
    MasculinAge : 30Messages : 90

    Mer 22 Juil 2015 - 17:34

    Simple mais mignon !
    DarkMasamune
    DarkMasamune
    FémininAge : 32Messages : 63

    Sam 1 Aoû 2015 - 15:48

    Simple et efficace! Merci!
    Daisy Hardman
    Daisy Hardman
    FémininAge : 27Messages : 60

    Lun 3 Aoû 2015 - 23:28

    merci
    Anonymous
    Invité

    Mar 4 Aoû 2015 - 14:13

    Merci ! ヽ(;▽;)ノ
    rosebleudu10
    rosebleudu10
    FémininAge : 34Messages : 189

    Dim 9 Aoû 2015 - 13:32

    merci
    NanoiHime
    NanoiHime
    FémininAge : 26Messages : 566

    Jeu 13 Aoû 2015 - 16:31

    merci !



    avatar
    Catblack
    FémininAge : 28Messages : 85

    Sam 15 Aoû 2015 - 19:55

    merci !!
    Lux Caellis
    Lux Caellis
    FémininAge : 31Messages : 23

    Sam 22 Aoû 2015 - 20:08

    Merci =)
    FraiseChoco
    FraiseChoco
    FémininAge : 31Messages : 31

    Jeu 27 Aoû 2015 - 7:53

    Merci ! :)
    Katell
    Katell
    FémininAge : 30Messages : 18

    Sam 29 Aoû 2015 - 22:14

    Tout à fait ce qu'il faut à des personnes qui recherchent quelque chose de simple et pur, tout en étant joli ! Merci beaucoup pour ce code !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 10:15