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.

-32%
Le deal à ne pas rater :
-32% Gigabyte G5 MF – PC portable 15,6″ – GeForce RTX™ 4050
749.99 € 1099.99 €
Voir le deal
anipassion.com

    PA Casino

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Lun 11 Aoû 2014 - 11:28

    Rappel du premier message :


    PA Casino


    Suite à une demande de Joshua023 voici une PA Casino.

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

    HTML & CSS ~ Voici donc un aperçu : www


    Et le code :
    HTML :
    Code:
    <br/><div id="PA_fond"><div class="PA_titre">Bienvenue dans le casino, {USERNAME}</div>
    <div class="pouah"><div class="bloc1 PA_contexte">
    Contexte

    </div></div> <div class="pouah"><div class="bloc1 PA_staff">
    <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div> <div class="staff"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" alt="" class="PA_img_staff" /><div class="staff_infobulle"><img src="http://img15.hostingpics.net/pics/491685AvatarKProject.png" class="PA_img_staff2" /><br/>Profil - MP</div>NOM DU STAFF</div>
    </div></div>
    <br/><br/>
    <div class="pouah"><div class="bloc2 PA_image">
    <div class="PA_img" style="margin-top:-10px; margin-left:-10px;"><div class="PA_img2">Texte derrière l'image.

    </div><img src="http://img4.hostingpics.net/pics/824684PokerFace600368706.jpg" alt="" /></div>

    </div></div> <div class="pouah"><div class="bloc2 PA_predef">
    <marquee scrollamount="4" onMouseOver="this.stop();" onMouseOut="this.start();"><a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <br/><br/><a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> <a href="LIEN ICI DU PREDEF"><img src="http://img11.hostingpics.net/pics/5065735050.png" alt="" /></a> </marquee>

    </div></div>
    <br/><br/>
    <div class="pouah"><div class="bloc3 PA_partenaire">
    <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a> <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a> <a href="LIEN DU PARTENAIRE"><img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /></<a><br/>
    <a href="LIEN DU SUJET">Devenir partenaire ?</a> - <a href="LIEN SU SUJET">Nos partenaires</a>

    </div></div> <div class="pouah"><div class="bloc3 PA_liens">
    <a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/><a href="LIEN ICI">Liens utiles</a><br/>

    </div></div> <div class="pouah"><div class="bloc3 PA_crédit">
    <img src="http://img4.hostingpics.net/pics/6550819941.png" alt="" /><br/>Crédits

    </div></div>
    <br/><a href="http://www.never-utopia.com/" style="text-decoration:none; font-size:11px; color:white; text-align:center; display:block;">© A-Lice</a><br/>
    </div>


    CSS :
    Code:
    .pouah {
    display:inline-block;
    margin-right:10px;
    }

    .bloc1 {
    height:150px;
    padding:10px;
    }

    .bloc2 {
    height:120px;
    padding:10px;
    }

    .bloc3 {
    height:55px;
    padding:10px;
    }

    .staff {
    position: relative;
    height: 144px;
    width: 60px;
    overflow: visible;
    display:inline-block;
    background:white;
    padding:3px;
    font-size:11px;
    color:#5A0D17;
    }

    .staff .staff_infobulle {
    position: absolute;
    top: 70px;
    left: -60px;
    width: 120px;
    height: 200px;
    background-color: #C1BFBF;
    opacity: 0;
    visibility: hidden;
    font-size:16px;
    }

    .staff:hover .staff_infobulle {
    opacity: 1;
    visibility: visible;
    z-index: 99;
    }

    div.PA_img {
    width:300px;
    height:140px;
    overflow:hidden;
    display:inline-block;
    }
     
    div.PA_img2 {
    width:280px;
    height:120px;
    padding:10px;
    overflow:auto; 
    position:relative;
    color:white;
    text-align:justify;
    }

    .PA_img img {
        width:300px;
        height:140px; 
        position: relative; 
        bottom: 140px;
        transition: 0.5s; 
    }
    .PA_img:hover img { 
        bottom:280px;
        transition: 0.5s; 
    }

    #PA_fond {
    background:#ADA1A1;
    width:700px;
    color:white;
    }

    .PA_titre {
    font-size:30px;
    text-align:center;
    padding:10px;
    color:#5A0D17;
    }

    .PA_contexte {
    background:#1C644C;
    width:320px;
    overflow:auto;
    text-align:justify;
    }

    .PA_staff {
    background:#5A0D17;
    width:280px;
    position:relative;
    top:-15px;
    }

    .PA_img_staff {
    width:55px;
    height:120px;
    }

    .PA_img_staff2 {
    width:120px;
    height:180px;
    }

    .PA_image {
    background:#5A0D17;
    width:280px;
    }

    .PA_predef {
    background:#1C644C;
    width:320px;
    position:relative;
    top:-10px;
    }

    .PA_partenaire {
    background:#5A0D17;
    width:320px;
    font-size:11px;
    text-align:center;
    position:relative;
    top:-12px;
    }

    .PA_liens {
    background:#1C644C;
    width:130px;
    overflow:auto;
    }

    .PA_crédit {
    background:#5A0D17;
    width:110px;
    position:relative;
    top:-12px;
    }

    Précision : La classe "pouah" correspond à l'alignement de deux blocs sur une même ligne.

    /!\ En cas de problème, c'est ici que ça ce passe.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^


    Dernière édition par A-Lice le Lun 16 Fév 2015 - 13:16, édité 1 fois

    Loukoum
    Loukoum
    FémininAge : 30Messages : 1475

    Dim 23 Nov 2014 - 23:10

    Merci du partage *-*



    Xperience
    Xperience
    FémininAge : 27Messages : 156

    Dim 30 Nov 2014 - 16:28

    Merci !



    PA Casino - Page 2 1453390429-tumblr-lv1fbrkxzh1qlnpia
    Miyoko
    Miyoko
    FémininAge : 31Messages : 213

    Jeu 4 Déc 2014 - 18:06

    zolie :)



    PA Casino - Page 2 641359838739
    Anonymous
    Invité

    Sam 13 Déc 2014 - 2:13

    Merci ^.^
    Foxe
    Foxe
    FémininAge : 23Messages : 122

    Sam 13 Déc 2014 - 10:40

    Merci !



    PA Casino - Page 2 Wet_ha10
    Pein94
    Pein94
    Age : 30Messages : 59

    Dim 21 Déc 2014 - 21:36

    Thanks :)
    Nanachu ♥
    Nanachu ♥
    FémininAge : 27Messages : 108

    Dim 21 Déc 2014 - 23:26

    MERCIII ♥
    Mimio
    Mimio
    FémininAge : 29Messages : 191

    Mer 7 Jan 2015 - 6:14

    Merci *w*



    PA Casino - Page 2 134914Signazael2
    Vanity.
    Vanity.
    FémininAge : 29Messages : 44

    Ven 9 Jan 2015 - 13:01

    Merci beaucoup ! Simple, mais très classe cette PA :)



    PA Casino - Page 2 Signat10
    Arisu
    Arisu
    FémininAge : 35Messages : 119

    Sam 31 Jan 2015 - 18:05

    Merci !
    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Sam 14 Fév 2015 - 22:59

    merci



    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Mar 3 Mar 2015 - 18:24

    Merci : )
    Sweetdead
    Sweetdead
    FémininAge : 28Messages : 38

    Mar 10 Mar 2015 - 20:56

    Le code est super beau ! Merci beaucoup !
    Eirlys
    Eirlys
    FémininAge : 31Messages : 66

    Lun 20 Avr 2015 - 16:34

    Merci
    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Mar 5 Mai 2015 - 17:53

    merci !



    PA Casino - Page 2 Ye49
    pika-cerise
    pika-cerise
    FémininAge : 32Messages : 92

    Sam 6 Juin 2015 - 18:42

    merci
    Kira Hatsuki
    Kira Hatsuki
    FémininAge : 22Messages : 152

    Mar 9 Juin 2015 - 20:42

    Super, merci !
    avatar
    Hop80
    MasculinAge : 34Messages : 138

    Jeu 9 Juil 2015 - 1:45

    sympa merci
    Kenway Kioshi
    Kenway Kioshi
    MasculinAge : 28Messages : 64

    Jeu 9 Juil 2015 - 8:05

    Petite question bien simple ^^' Comment faire pour rendre les coins ronds ? :) Merci ! Très beau travail ! Au pire, si possible de me MP ^^'
    Argy
    Argy
    FémininAge : 26Messages : 98

    Lun 13 Juil 2015 - 19:20

    Merci beaucoup ^^
    J'aime tous tes codages de type casino ♥
    Nono-Chan
    Nono-Chan
    FémininAge : 26Messages : 273

    Mer 15 Juil 2015 - 15:04

    Très joli
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Lun 3 Aoû 2015 - 22:28

    merci
    ClaryF
    ClaryF
    FémininAge : 33Messages : 138

    Jeu 6 Aoû 2015 - 21:52

    Merci.
    Anonymous
    Invité

    Jeu 6 Aoû 2015 - 23:37

    Merci pour ce joli partage (^~^)
    Little-myrt
    Little-myrt
    FémininAge : 26Messages : 41

    Sam 8 Aoû 2015 - 3:17

    C'est super joli, j'adore, merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Juin 2024 - 8:44