AccueilFAQRechercherMembresGroupesS'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.


    Show me the meaning of being lonely

    Partagez
    A-Lice
    A-Lice
    FémininAge : 24Messages : 4939

    le Ven 13 Fév 2015 - 23:49


    Show me the meaning of being lonely


    Voici une page d'accueil avec transition pour le staff.

    Je précise que l'arrière plan gris correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www & au passage de la souris ~ Invision


    Et le code :
    HTML :
    Code:
    <div class="PA_fond"><div class="PA_titre02">Show me the meaning of being lonely ~</div><div class="PA_titre01">Contexte</div><div class="PA_contexte">Texte ici
    </div><div class="PA_titre01">Staff</div><div class="PA_staff"><div class="PA_staff02"><div class="PA_staff03">Pseudo - Rang - Fonction</div><img src="LIEN DE L'IMAGE" /></div>

    </div><div class="PA01"></div>
    <br />
    <div class="PA_titre01">What else ?</div><div class="PA_liens">Règlement<br />Contexte<br />Autres liens ~ 
    </div><div class="PA_titre01">News</div><div class="PA_news">00/00/00 : Cras volutpat at elit non aliquam.<br />

    </div><div class="PA01"></div>
    <div class="PA_titre01">Prédéfinis</div><div class="PA_predef"><img src="LIEN DE L'IMAGE" />

    </div>
    <a href="http://www.never-utopia.com" id="PA_alice">A-Lice | Never-Utopia</a>
    </div>


    CSS :
    Code:
    .PA01 {
    clear: both;
    }

    .PA_fond {
    width: 680px;
    height: 390px;
    padding: 10px;
    border-radius: 50px;
    border: solid 2px #b07865;
    margin: auto;
    background: #f6d7cd;
    color: #5B214F;
    font-size: 12px;
    }

    .PA_titre01 {
    text-indent: 70px;
    font-size: 20px;
    font-weight: bold;
    color: #b73d44;
    margin-top: -10px;
    }

    .PA_contexte {
    float: left;
    width: 270px;
    height: 150px;
    overflow: auto;
    background: #b07865;
    text-align: justify;
    padding: 5px;
    border-radius: 20px;
    margin-right: 20px;
    }

    .PA_titre02 {
    text-align: right;
    font-size: 35px;
    color: #d4457d;
    text-shadow: 1px 1px 0px #b07865;
    margin-top: -25px;
    margin-left: 270px;
    width: 400px;
    }

    .PA_staff {
    width: 350px;
    height: 140px;
    background: #b07865;
    text-align: justify;
    padding: 5px;
    float: right;
    overflow: auto;
    }

    div.PA_staff02 {
    width: 100px;
    height: 70px;
    overflow: hidden;
    display: inline-block;
    }

    .PA_staff02 img {
    width: 100px;
    height: 70px;
    position: relative;
    bottom: 50px;
    transition: 2s;
    }

    .PA_staff02:hover img {
    bottom: 140px;
    transition: 2s;
    }

    .PA_staff03 {
    padding: 5px;
    text-align: center;
    }

    .PA_liens {
    float: left;
    width: 270px;
    height: 80px;
    background: #b07865;
    text-align: center;
    padding: 5px;
    }

    .PA_news {
    float: right;
    width: 350px;
    height: 100px;
    background: #b07865;
    text-align: justify;
    padding: 5px;
    border-radius: 20px;
    }

    .PA_predef {
    width: 650px;
    height: 50px;
    padding: 5px;
    margin: auto;
    overflow: hidden;
    }

    #PA_alice {
    text-decoration: none;
    color: white;
    font-size: 11px;
    text-align: center;
    display: block;
    }

    Remarque : Pour une utilisation optimale, la taille des images pour le staff est de 100px par 70px, pour les prédéfinis elle est de 50px par 50px.

    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.

    Chèlha
    Chèlha
    FémininAge : 26Messages : 121

    le Dim 15 Mar 2015 - 16:51

    C'est super beau merci !
    Shuna
    Shuna
    FémininAge : 24Messages : 135

    le Dim 22 Mar 2015 - 19:15

    super sympa merciiii
    Cassisse
    Cassisse
    FémininAge : 26Messages : 121

    le Ven 24 Avr 2015 - 17:49

    Merci !!
    Ookami Shiroi
    Ookami Shiroi
    FémininAge : 27Messages : 78

    le Sam 25 Avr 2015 - 16:50

    Merci beaucoup ^^
    Draly
    Draly
    FémininAge : 26Messages : 109

    le Dim 26 Avr 2015 - 18:35

    Merci !^^
    Mariketa
    Mariketa
    FémininAge : 41Messages : 79

    le Mer 29 Avr 2015 - 16:16

    C'est trop cute merci :)
    Ryukaï
    Ryukaï
    MasculinAge : 20Messages : 625

    le Ven 1 Mai 2015 - 10:34

    Mercii :)



    Eshon
    Eshon
    FémininAge : 37Messages : 194

    le Mer 3 Juin 2015 - 19:38

    Merci !
    Lilynufare
    Lilynufare
    FémininAge : 28Messages : 341

    le Dim 21 Juin 2015 - 12:22

    sympa
    Tatia38
    Tatia38
    FémininAge : 29Messages : 308

    le Lun 29 Juin 2015 - 10:28

    J'aime beaucoup merci Very Happy
    Orange Sanguine
    Orange Sanguine
    FémininAge : 22Messages : 84

    le Lun 29 Juin 2015 - 18:03

    Merci *-*



    fraumali
    fraumali
    FémininAge : 38Messages : 122

    le Mer 5 Aoû 2015 - 18:43

    Bonjour et merci de ce codage
    Eshon
    Eshon
    FémininAge : 37Messages : 194

    le Jeu 6 Aoû 2015 - 2:19

    Merci !
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2017

    le Jeu 6 Aoû 2015 - 12:19

    Merci (((o(*゚▽゚*)o)))
    rosebleudu10
    rosebleudu10
    FémininAge : 28Messages : 189

    le Jeu 6 Aoû 2015 - 12:23

    merci
    Little-myrt
    Little-myrt
    FémininAge : 20Messages : 41

    le Sam 8 Aoû 2015 - 3:15

    Merci !
    petit lu
    petit lu
    FémininAge : 26Messages : 180

    le Jeu 20 Aoû 2015 - 19:12

    Merci du partage ♥
    Whit
    Whit
    FémininAge : 21Messages : 154

    le Ven 21 Aoû 2015 - 19:44

    Merci c'est super ! >w<
    Dreamyland
    Dreamyland
    FémininAge : 21Messages : 88

    le Ven 4 Sep 2015 - 23:17

    C'est superbe, merci *^*
    Lessien
    Lessien
    FémininAge : 36Messages : 163

    le Sam 30 Jan 2016 - 8:53

    Merci beaucoup !
    Yumeki
    Yumeki
    FémininAge : 26Messages : 138

    le Dim 31 Jan 2016 - 20:44

    Super sympa merci ^^
    Shide
    Shide
    FémininAge : 29Messages : 60

    le Lun 22 Fév 2016 - 14:58

    merci :)
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 26Messages : 64

    le Mer 23 Mar 2016 - 4:51

    superbe





    Mystigri
    Mystigri
    FémininAge : 16Messages : 97

    le Sam 23 Avr 2016 - 18:48

    Je la trouve banale, mais pratique !



    Contenu sponsorisé


      La date/heure actuelle est Jeu 24 Jan 2019 - 10:08