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 à ne pas rater :
Boîte Avant-Première Star Wars Unlimited – Ombres de la Galaxie : ...
Voir le deal

    Black & White

    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 8 Mar 2014 - 1:54

    Bonjour,

    Voici une nouvelle page d'accueil. J'espère qu'elle vous plaira.

    La largeur est prédéfinie à 800px de largeur. Les srcolls externes de l'aperçu n'apparaissent pas dans l'original c'est parce que j'utilise un Iframe à cause du code.

    Aperçu:



    Code:
    /*titres*/

    .titres{
     display: inline-block;
     font-size: 25px;
     color: purple;
     margin-top: -15px;
     font-style: italic;
     max-width: 500px;
    }

    .titre_staff{
     font-size: 25px;
     color: purple;
     font-style: italic;
    }

    /*staff*/

    .staff{
     background-color: #000;
     width: 130px;
     height: 130px;
     border-radius: 200px;
     margin-top: 20px;
     color: #FFF;
     position: relative;
     z-index: 10;
     transition-duration: 10s;
    }

    .staff:hover{
     background-color: #000;
     width: 130px;
     height: 130px;
     border-radius: 200px;
     margin: 20px 130px 0 -130px;
     color: #FFF;
     position: relative;
     z-index: 10;
     transition-duration: 1s;
    }

    /*contenus globaux*/

    .contenu_ligne1{
     background-color: #000;
     border-radius: 50px;
     width: 180px;
     height: 180px;
     margin: 15px 5px 0 5px;
     color: #FFF;
    }

    .contenu_ligne2{
     background-color: #000;
     border-radius: 50px;
     height: 200px;
     margin: 15px 5px 0 5px;
     color: #FFF;
    }

    .contenu_ligne3{
     background-color: #000;
     border-radius: 20px;
     height: 50px;
     margin: 15px 5px 0 5px;
     color: #FFF;
    }

    /*images*/

    .predef_td{
     width: 82px;
     height: 82px;
     background-color: #FFF;
     border: 1px solid #FFF;
    }

    /*Textes*/

    .text{
     margin: 5px 15px 0 0;
     padding: 0 5px 0 10px;
     overflow: auto;
     height: 165px;
     text-align: justify;
    }

    .staff_text{
     position: relative;
     text-align: center;
     margin: 30px 0-75px 0;
     z-index: 30;
     color: #000;
    }

    /*partenaires*/

    .partenaire{
     background-color: #000;
     border-radius: 20px;
     width: 100%;
     height: 35px;
     color: #FFF;
     vertical-align: middle;
     padding: 10px 0 10px 0;
    }

    Code:
    <table border="0" width="800" height="50%" align="center">
     <tr>
     <td rowspan="3" width="20%" align="center">
     <span class="titre_staff">staff</span>
     <table cellspacing="10">
     <tr>
     <td align="center">
     <div class="staff_text"><center>NOM<br>Administrateur</center></div>
     <div class="staff"></div>
     </td>
     </tr>
     <tr>
     <td align="center">
     <div class="staff_text"><center>NOM<br>Administrateur</center></div>
     <div class="staff"></div>
     </td>
     </tr>
     <tr>
     <td align="center">
     <div class="staff_text"><center>NOM<br>Administrateurs</center></div>
     <div class="staff"></div>
     </td>
     </tr>
     </table>
     </td>
     <td width="26.6%" class="" align="center">
     <div class="contenu_ligne1">
     <span class="titres">infos</span>
     <div class="text">blablabla</div>
     </div>
     </td>
     <td width="26.6%" class="" align="center">
     <div class="contenu_ligne1">
     <span class="titres">liens</span>
     <div class="text">blablabla</div>
     </div>
     </td>
     <td width="26.6%" align="center">
     <div class="contenu_ligne1">
     <span class="titres">coups de coeurs</span>
     <table>
     <tr>
     <td><a href="" width="100" height="38.75"><img src="" width="100" height="38.75" border="1"></a></td>
     </tr>
     <tr>
     <td><a href="" width="100" height="38.75"><img src="" width="100" height="38.75" border="1"></a></td>
     </tr>
     <tr>
     <td><a href="" width="100" height="38.75"><img src="" width="100" height="38.75" border="1"></a></td>
     </tr>
     </table>
     </div>
     </td>
     </tr>
     <tr>
     <td colspan="3">
     <table border="0" width="100%">
     <tr>
     <td width="50%" align="center">
     <div class="contenu_ligne2">
     <span class="titres">Contexte</span>
     <div class="text">blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla </div>
     </div>
     </td>
     <td width="50%" align="center">
     <div class="contenu_ligne2">
     <span class="titres">Prédéfini</span>
     <table>
     <tr>
     <td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
     <td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
     <td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
     </tr>
     <tr>
     <td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
     <td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
     <td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
     </tr>
     </table>
     </div>
     </td>
     </tr>
     </table>
     </td>
     </tr>
     <tr>
     <td colspan="3">
     <table border="0" width="100%">
     <tr>
     <td width="50%" align="center">
     <div class="contenu_ligne3">
     <span class="titres">Topsites</span>
     <table>
     <tr>
     <td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
     <td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
     <td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
     <td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
     <td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
     <td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
     </tr>
     </table>
     </div>
     </td>
     <td width="50%" align="center">
     <div class="contenu_ligne3">
     <span class="titres">Crédits</span>
     <div class="text">©Code PA by Aelita</div>
     </div>
     </td>
     </tr>
     </table>
     </td>
     </tr>
     <tr>
     <td colspan="4">
     <div class="partenaire">
     <marquee direction="left" scrolldelay="1" scrollamount="2" height="45">
     <a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
     <a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
     <a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
     <a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
     </marquee>
     </div>
     </td>
     </tr>
    </table>

    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.
    Seven
    Seven
    FémininAge : 30Messages : 135

    Lun 10 Mar 2014 - 11:32

    Cette PA est vraiment superbe.
    Alors, merci beaucoup pour ce super partage !
    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 12 Mar 2014 - 16:45

    De rien ^^
    Petit Harfang
    Petit Harfang
    FémininAge : 23Messages : 80

    Jeu 13 Mar 2014 - 15:15

    Marchi Very Happy !
    petit lu
    petit lu
    FémininAge : 31Messages : 184

    Sam 15 Mar 2014 - 13:55

    Merci du partage
    C'est très jolis
    hoterion
    hoterion
    FémininAge : 32Messages : 75

    Sam 15 Mar 2014 - 17:48

    Sympa, merci :) Vous faites toujours du beau boulot !



    Black & White Sing10
    JustDrago
    JustDrago
    FémininAge : 26Messages : 27

    Dim 16 Mar 2014 - 13:42

    merci Wink
    bubulle
    bubulle
    FémininAge : 37Messages : 76

    Mar 18 Mar 2014 - 12:10

    merci
    Budapest
    Budapest
    FémininAge : 24Messages : 46

    Sam 22 Mar 2014 - 15:10

    Merci. (:



    Likau
    Likau
    MasculinAge : 30Messages : 353

    Sam 22 Mar 2014 - 15:23

    Simple mais très sympa ! Very Happy
    Raween
    Raween
    FémininAge : 32Messages : 112

    Dim 23 Mar 2014 - 5:00

    Merci beaucoup ^^
    Amasiser
    Amasiser
    FémininAge : 31Messages : 20

    Lun 24 Mar 2014 - 10:18

    Merci. (:
    Lilly31
    Lilly31
    FémininAge : 32Messages : 97

    Lun 24 Mar 2014 - 11:31

    Wahou !!! *0* Merci !



    Black & White Rehete10
    Anonymous
    Invité

    Lun 24 Mar 2014 - 15:04

    Jolie ><
    RainboWolf
    RainboWolf
    FémininAge : 27Messages : 102

    Sam 29 Mar 2014 - 21:41

    Waouh merci ! Very Happy
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Dim 30 Mar 2014 - 3:13

    merci ^^
    Dearborn
    Dearborn
    FémininAge : 30Messages : 112

    Jeu 3 Avr 2014 - 17:15

    Merci!
    Layla4
    Layla4
    FémininAge : 24Messages : 149

    Jeu 3 Avr 2014 - 18:19

    Merci !
    Screen
    Screen
    FémininAge : 32Messages : 92

    Ven 4 Avr 2014 - 20:48

    super partage
    ☮ mistletoe
    ☮ mistletoe
    FémininAge : 25Messages : 28

    Dim 6 Avr 2014 - 14:42

    Merci beaucoup c'est superbe :heart:
    Shouro-jidai
    Shouro-jidai
    MasculinAge : 31Messages : 9

    Dim 6 Avr 2014 - 15:49

    Merci, c'est juste génial. =D
    Aile
    Aile
    FémininAge : 36Messages : 134

    Lun 7 Avr 2014 - 17:23

    Elle est belle *o* MERCIIIIII



    Black & White 799284Sanstitre1
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Mar 8 Avr 2014 - 16:43

    J'aime beaucoup merci pour le partage
    Liliumini
    Liliumini
    FémininAge : 29Messages : 58

    Mer 9 Avr 2014 - 10:50

    Merci! Very Happy 
    Ashley Yamada
    Ashley Yamada
    FémininAge : 25Messages : 7

    Sam 12 Avr 2014 - 17:20

    Merci !! cette PA est superbe Wink
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Juin 2024 - 9:51