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 :
Manette DualSense PS5 édition limitée ...
Voir le deal

    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.
    Patdrue
    Patdrue
    FémininAge : 34Messages : 158

    Ven 15 Aoû 2014 - 12:21

    J'aime beaucoup, merci!
    Harmonia
    Harmonia
    FémininAge : 26Messages : 110

    Lun 1 Sep 2014 - 18:44

    Splendide PA Very Happy

    J'aime beaucoup ton travail !
    Anonymous
    Invité

    Jeu 11 Sep 2014 - 22:39

    Merci beaucoup pour ce partage ! PA vraiment très très sympathique ! Very Happy
    Sheo
    Sheo
    FémininAge : 33Messages : 26

    Dim 28 Sep 2014 - 21:21

    c'est super merci beaucoup =)
    Shaolan
    Shaolan
    MasculinAge : 33Messages : 121

    Lun 29 Sep 2014 - 8:09

    Han magnifique ** merci beaucoup!
    Furries
    Furries
    FémininAge : 27Messages : 34

    Mer 8 Oct 2014 - 18:52

    J'aime beaucoup, merci !
    Othiana
    Othiana
    FémininAge : 26Messages : 18

    Lun 20 Oct 2014 - 19:16

    Merci ! =D
    Damned
    Damned
    FémininAge : 23Messages : 109

    Lun 20 Oct 2014 - 20:07

    Merci
    Shadaan
    Shadaan
    FémininAge : 32Messages : 80

    Mar 11 Nov 2014 - 17:23

    Merciiii :3



    Black & White - Page 4 897455signnu
    Meylah
    Meylah
    FémininAge : 23Messages : 60

    Mer 12 Nov 2014 - 21:37

    Merciiiii !
    Sinon
    Sinon
    FémininAge : 25Messages : 68

    Mer 12 Nov 2014 - 22:39

    Merci !
    Kyomun
    Kyomun
    FémininAge : 27Messages : 16

    Mer 3 Déc 2014 - 19:37

    Cette pa est géniale merciiiiii~



    Mun: "When I die.... burn the magazines under my bed.."
    plushmasters
    plushmasters
    FémininAge : 32Messages : 71

    Mer 3 Déc 2014 - 22:14

    trop sublime
    Dydy
    Dydy
    FémininAge : 34Messages : 493

    Mar 6 Jan 2015 - 20:56

    merci du partage ^^



    Black & White - Page 4 27978_signature_never_utopia_dydy_2
    Arwen-Nem
    Arwen-Nem
    FémininAge : 29Messages : 17

    Mer 21 Jan 2015 - 17:48

    C'est sobre et très beau à la fois,
    Je me ^ermet de te l'emprunter ^^

    Merci en tout cas pour ton travail, et pour le partage ^^
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Sam 24 Jan 2015 - 16:29

    Merci !!
    Trych
    Trych
    FémininAge : 29Messages : 81

    Mar 27 Jan 2015 - 5:06

    jolie travail, merci



    Black & White - Page 4 Just_k10
    Maya Seiko
    Maya Seiko
    FémininAge : 31Messages : 129

    Mar 27 Jan 2015 - 10:38

    merci beaucoup ^^
    damon w salvatore
    damon w salvatore
    FémininAge : 36Messages : 109

    Mar 27 Jan 2015 - 21:13

    merci
    avatar
    Horus
    FémininAge : 27Messages : 56

    Lun 16 Fév 2015 - 13:51

    BLBLBLBLBLBLBLBL meuuuuurci !!!
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Jeu 19 Mar 2015 - 15:02

    Merci
    Yogi Nakagawa
    Yogi Nakagawa
    MasculinAge : 23Messages : 94

    Mer 1 Avr 2015 - 0:36

    Arigatou gozaimasu
    Moon Heart
    Moon Heart
    FémininAge : 24Messages : 37

    Mer 1 Avr 2015 - 20:06

    merci
    Madras
    Madras
    FémininAge : 39Messages : 285

    Ven 3 Avr 2015 - 11:54

    Merci
    Pretycherie1999
    Pretycherie1999
    FémininAge : 25Messages : 11

    Sam 4 Avr 2015 - 18:44

    Merci ^^
    Contenu sponsorisé


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