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.


    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.
    Angie Harkness
    Angie Harkness
    FémininAge : 40Messages : 725

    Mar 15 Avr 2014 - 18:45

    je le trouve très jolie et simple merci je crois que je vais te l'empreinter Wink
    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Mer 16 Avr 2014 - 8:27

    super joli!

    Merci :)
    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Ven 18 Avr 2014 - 19:58

    Whaouu très belle PA j'adore merci Very Happy
    Hikaria
    Hikaria
    FémininAge : 29Messages : 14

    Sam 19 Avr 2014 - 0:01

    Merci :)
    avatar
    Phénix'
    FémininAge : 22Messages : 95

    Dim 20 Avr 2014 - 20:03

    Merci :)
    ClaryF
    ClaryF
    FémininAge : 33Messages : 138

    Lun 21 Avr 2014 - 14:10

    Merci beaucoup pour cette PA *-*
    Elle est vachement sympa :3
    Nighthayah
    Nighthayah
    FémininAge : 36Messages : 69

    Lun 21 Avr 2014 - 15:18

    Merci beaucoup c'est vraiment super
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Lun 21 Avr 2014 - 18:59

    Merci ^^
    Amerawdwr
    Amerawdwr
    MasculinAge : 30Messages : 17

    Ven 25 Avr 2014 - 20:17

    L'Empereur, dans sa grande Mansuétude, te remercie de la peine que tu as prise pour alléger le fardeau de ses doigts.



    L'Empereur de toutes choses.
    effyi
    effyi
    FémininAge : 29Messages : 41

    Sam 26 Avr 2014 - 15:41

    merci beaucoup ♥
    avatar
    Aïda
    FémininAge : 29Messages : 35

    Dim 27 Avr 2014 - 0:11

    merci beaucoup Very Happy
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 31Messages : 153

    Mer 30 Avr 2014 - 15:07

    Merci beaucoup ! Elle est magnifique^^
    Oce.
    Oce.
    FémininAge : 24Messages : 51

    Jeu 1 Mai 2014 - 11:25

    Merci, c'est vraiment jolie !
    Bravo Wink



    Black & White - Page 2 Pale12
    avatar
    linda70
    FémininAge : 54Messages : 13

    Jeu 1 Mai 2014 - 23:26

    Merci !!
    Draly
    Draly
    FémininAge : 31Messages : 119

    Ven 2 Mai 2014 - 11:15

    Superbe.*.*
    Lunara
    Lunara
    FémininAge : 37Messages : 95

    Sam 3 Mai 2014 - 14:47

    merci pour ce partage !
    Auron
    Auron
    FémininAge : 28Messages : 9

    Sam 3 Mai 2014 - 17:23

    merci
    Percylove
    Percylove
    FémininAge : 28Messages : 259

    Dim 4 Mai 2014 - 1:46

    Oh trop beau! Merci du partage!



    Black & White - Page 2 9a6v
    luna-chan86
    luna-chan86
    FémininAge : 34Messages : 201

    Dim 4 Mai 2014 - 14:21

    Merci Very Happy



    Dellou
    Dellou
    FémininAge : 26Messages : 57

    Dim 4 Mai 2014 - 20:46

    Merci :)
    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Lun 5 Mai 2014 - 1:10

    Wahou merci Wink
    Etoile Du Phenix
    Etoile Du Phenix
    FémininAge : 20Messages : 14

    Mar 6 Mai 2014 - 23:19

    elle est juste sublime *p*
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Jeu 8 Mai 2014 - 17:56

    Merci :)



    Black & White - Page 2 Edkidd11
    Ren haring
    Ren haring
    MasculinAge : 29Messages : 1009

    Lun 12 Mai 2014 - 15:04

    Fantastique PA . Merci pour le partage
    Itachi28
    Itachi28
    FémininAge : 27Messages : 55

    Mar 13 Mai 2014 - 19:10

    Merci!
    Contenu sponsorisé


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