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 : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €

    Black & White

    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Sam 8 Mar 2014 - 1:54

    Rappel du premier message :

    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.
    avatar
    kevitom
    MasculinAge : 32Messages : 3

    Lun 19 Mai 2014 - 16:53

    Good job !
    Anonymous
    Invité

    Mer 21 Mai 2014 - 15:31

    Merci ! :)
    Neko-Rika
    Neko-Rika
    FémininAge : 25Messages : 115

    Jeu 22 Mai 2014 - 14:36

    Merci :3 CSS HTLM ou JAVASCRIPT ?
    Onna
    Onna
    FémininAge : 27Messages : 23

    Jeu 22 Mai 2014 - 17:09

    Merci.~
    Kovu
    Kovu
    FémininAge : 22Messages : 257

    Ven 23 Mai 2014 - 17:35

    merci!
    MOON LEE
    MOON LEE
    FémininAge : 29Messages : 149

    Sam 24 Mai 2014 - 11:33

    Merci Wink
    Dory16
    Dory16
    FémininAge : 31Messages : 20

    Mar 27 Mai 2014 - 18:04

    Simple et efficace Very Happy Merci !



    « Hakuna Matata ! »
    avatar
    Luna77100
    FémininAge : 26Messages : 4

    Mar 27 Mai 2014 - 23:13

    Très Jolie, Classe ! ^^
    Kau
    Kau
    FémininAge : 22Messages : 148

    Dim 1 Juin 2014 - 21:21

    Wow ! Trop joli.

    Merci du partage Wink
    Malice1329
    Malice1329
    FémininAge : 35Messages : 81

    Mar 3 Juin 2014 - 23:33

    c'est très jolie comme pa



    ❝ Every Love Story is Beautiful ❞
    Baby, I'm dancing in the dark with you between my arms, Barefoot on the grass, listening to our favorite song,When you said you looked a mess, I whispered underneath my breath But you heard it, darling, you look perfect tonight× BY LIZZOU
    AwenWolf
    AwenWolf
    FémininAge : 35Messages : 76

    Mer 4 Juin 2014 - 16:24

    Merci *_*
    Mordiern
    Mordiern
    FémininAge : 46Messages : 285

    Dim 8 Juin 2014 - 10:59

    Merci pour le code !

    La PA est superbe. Simple et élégante à la fois !

    Encore un grand merci :)
    Kyuzo Seyki
    Kyuzo Seyki
    MasculinAge : 32Messages : 11

    Mar 10 Juin 2014 - 19:40

    Magnifique Very Happy merci :)
    neverforever
    neverforever
    FémininAge : 23Messages : 12

    Sam 14 Juin 2014 - 16:14

    Whaw quel PA !!
    PuppetBlue
    PuppetBlue
    FémininAge : 31Messages : 113

    Dim 15 Juin 2014 - 0:02

    Merci !! *_*



    Black & White - Page 3 Pupiii10
    mackay
    mackay
    MasculinAge : 35Messages : 124

    Sam 21 Juin 2014 - 22:31

    Vraiment belle, tu as du talent !
    Skitty
    Skitty
    FémininAge : 27Messages : 50

    Lun 23 Juin 2014 - 3:15

    C'est joli, merci !
    Tempy
    Tempy
    FémininAge : 25Messages : 76

    Lun 23 Juin 2014 - 17:46

    Merci beaucoup ! Elle m'a l'air bien sympathique ! Reste à voir le code ;3
    MaSeSt
    MaSeSt
    FémininAge : 24Messages : 4

    Mer 25 Juin 2014 - 16:30

    Chou ** Merci du partage :)
    Anonymous
    Invité

    Ven 4 Juil 2014 - 18:51

    J'aime !  Razz 
    Merci.
    Azuriel
    Azuriel
    FémininAge : 29Messages : 130

    Jeu 17 Juil 2014 - 17:16

    Merci ! ♪
    Kurokaze
    Kurokaze
    FémininAge : 32Messages : 35

    Ven 18 Juil 2014 - 0:17

    Merci =)
    Miss Julie
    Miss Julie
    FémininAge : 41Messages : 12

    Lun 21 Juil 2014 - 16:25

    Superbe !!! Merci pour ce partage !!
    Seikatsu Tengoku
    Seikatsu Tengoku
    MasculinAge : 28Messages : 11

    Mar 29 Juil 2014 - 6:50

    Super merci!
    Elora Hanta
    Elora Hanta
    FémininAge : 32Messages : 69

    Mar 29 Juil 2014 - 20:17

    Merci  Very Happy 
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:37