AccueilRechercherS'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 : 28Messages : 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.
    Yomidashi
    Yomidashi
    FémininAge : 23Messages : 14

    Jeu 25 Fév 2016 - 8:43

    Cette PA est magnifique! :arrh:



    Black & White - Page 6 Tumblr_n6gz9jVUEd1soec3yo1_500
    Litalis
    Litalis
    MasculinAge : 25Messages : 27

    Ven 4 Mar 2016 - 17:19

    Une très bonne PA qui donne tout ce que l'on souhaite Very Happy
    Margaux E.
    Margaux E.
    FémininAge : 18Messages : 25

    Sam 2 Avr 2016 - 13:32

    Trop beau !!! *-*
    Merci
    Mondo Gecko
    Mondo Gecko
    MasculinAge : 36Messages : 51

    Mar 5 Avr 2016 - 2:45

    Merci Aelita !





    Black & White - Page 6 607046geek
    Claraaa
    Claraaa
    FémininAge : 24Messages : 23

    Sam 7 Mai 2016 - 20:16

    Merci
    Mustique
    Mustique
    FémininAge : 25Messages : 10

    Ven 24 Juin 2016 - 14:56

    Merci beaucoups !
    Steel Block
    Steel Block
    MasculinAge : 25Messages : 34

    Jeu 25 Aoû 2016 - 14:53

    Merci =)
    Mitwi
    Mitwi
    FémininAge : 19Messages : 22

    Dim 28 Aoû 2016 - 13:25

    Merci !
    Anonymous
    Invité

    Ven 7 Oct 2016 - 6:36

    Merci!
    SweetDreams
    SweetDreams
    FémininAge : 23Messages : 32

    Ven 21 Oct 2016 - 21:39

    Merci :3
    Steel Block
    Steel Block
    MasculinAge : 25Messages : 34

    Dim 18 Juin 2017 - 0:29

    merci Wink
    INHA
    INHA
    FémininAge : 21Messages : 6

    Jeu 22 Juin 2017 - 12:37

    Thank's ton PA est magnifique !!! Razz
    Ello
    Ello
    FémininAge : 20Messages : 12

    Ven 29 Déc 2017 - 22:09

    Je cherchais une PA et c'est vrai qu'elle est très belle Very Happy
    Noruenu
    Noruenu
    FémininAge : 28Messages : 123

    Sam 20 Jan 2018 - 15:49

    Merci ! :ange:
    Contenu sponsorisé


      La date/heure actuelle est Ven 16 Avr 2021 - 3:50