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 à ne pas rater :
Coffret Collection Poster Pokémon EV8.5 Évolutions Prismatiques : ...
Voir le deal

    Affaire classée - Demande de partenariat

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

    Sam 23 Aoû 2014 - 0:08




    Affaire classée


    Suite à une demande d'Angie Dalton voici une demande de partenariat Affaire classée.

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

    Voici donc un aperçu : www


    Et le code :
    HTML :
    Code:
    <div class="fiche_part"><div class="etiquette_part">Demande de partenariat</div><br/>
    <div class="fond1_part"><div class="fond2_part"><div class="fond3_part">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div class="txt_part"><span class="titre_part">Demande de partenariat</span>

    <div class="img_part"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
    <div class="bloc_part"><span class="titre2_part">Nom du forum</span>
    Texte ici
    </div>
    </div>
    </div></div></div><a href="http://www.never-utopia.com/" class="credit_part">© A-Lice | Never-Utopia</a></div>


    CSS :
    Code:
    .fiche_part {
    width:650px;
    background-color: firebrick;
    border:1px solid black;
    margin:auto;
    }
    .etiquette_part {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width:160px;
    background-color: firebrick;
    padding:5px; font-size:12px;
    color:black;
    border-top:solid 1px black;
    border-left:solid 1px black;
    border-right:1px solid black;
    text-align:center;
    transform:rotate(-90deg);
    position:relative;
    left:-100px;
    top:80px;
    }
    .fond1_part {
    width:93%;
    background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
    transform:rotate(-1deg);
    border: solid 1px black;
    margin-left:auto;
    margin-right:auto;
    margin-top:-50px;
    }
    .fond2_part {
    width:100%;
    background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
    transform:rotate(-1deg);
    border: solid 1px black;
    margin:auto;
    }
    .fond3_part {
    width:97%;
    background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
    margin:auto;
    padding:10px;
    transform:rotate(2deg);
    border: solid 1px black;
    text-align:center;
    }
    .txt_part {
    width:90%;
    text-align:justify;
    font-size:13px;
    color:black;
    padding:10px;
    margin:auto;
    }
    .titre_part {
    display:block;
    text-align:center;
    font-size:25px;
    color:black;
    }
    .img_part {
    width:580px;
    height:200px;
    margin-left:-25px;
    overflow:hidden;
    }
    .bloc_part {
    margin:auto;
    width:90%;
    padding:10px;
    text-align:justify;
    background-color:firebrick;
    color:white;
    border:black 1px solid;
    }
    .titre2_part {
    display:block;
    text-align:center;
    font-size:25px;
    color:BurlyWood;
    padding:10px;
    }
    a.credit_part {
    text-decoration:none;
    color:black;
    text-align:center;
    padding:5px;
    display:block;
    }


    Pour ceux qui désirent prendre l'ensemble du pack « Affaire classée », voici le CSS complet du pack, à ne copier qu'une seule fois pour toutes les fiches.


    CSS :
    Code:
    .g_fiche {
    width:600px;
    background-color: firebrick;
    border:1px solid black;
    margin:auto;
    }
    .g_etiquette {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width:80px;
    background-color: firebrick;
    padding:5px;
    font-size:12px;
    color:black;
    border-top:solid 1px black;
    border-left:solid 1px black;
    border-right:1px solid black;
    text-align:center;
    transform:rotate(-90deg);
    position:relative;
    left:-60px;
    top:40px;
    }
    .g_fond1 {
    width:90%;
    background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
    transform:rotate(-1deg);
    border: solid 1px black;
    margin-left:auto;
    margin-right:auto;
    margin-top:-50px;
    }
    .g_fond2 {
    width:100%;
    background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
    transform:rotate(-1deg);
    border: solid 1px black;
    margin:auto;
    }
    .g_fond3 {
    width:97%;
    background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
    margin:auto;
    padding:10px;
    transform:rotate(2deg);
    border: solid 1px black;
    text-align:center;
    }
    .g_texte {
    width:90%;
    text-align:justify;
    font-size:13px;
    color:black;
    padding:10px;
    margin:auto;
    }
    .g_titre {
    display:block;
    text-align:center;
    font-size:25px;
    color:black;
    }
    .g_soustitre {
    display:inline-block;
    text-indent:30px;
    font-size:16px;
    }
    a.g_credit {
    text-decoration:none;
    color:black;
    display:block;
    text-align:center;
    padding:5px;
    }
    .g_img_cont {
    width:100px;
    height:100px;
    padding:3px;
    }
    .g_img_cont2 {
    margin-left:-30px;
    width:565px;
    }
    .g_titre_lien {
    display:inline-block;
    text-align:right;
    font-size:18px;
    width:465px;
    }
    .g_bloc_lien {
    margin:auto;
    width:465px;
    background-color:firebrick;
    }
    .g_txt_lien {
    height:110px;
    display:inline-block;
    text-align:justify;
    color:black;
    overflow:auto;
    width:350px;
    padding-right:5px;
    padding-top:5px;
    }
    .g_img_lien {
    display:inline-block;
    float:left;
    padding:5px;
    }
    .g_titre_bord {
    display:inline-block;
    margin:auto;
    width:210px;
    text-align:center;
    font-size: 18px;
    padding:5px;
    color:black;
    }
    .g_txt_bord {
    display:inline-block;
    margin-left:10px;
    width:210px;
    height:300px;
    background-color:firebrick;
    border:solid 1px black;
    padding:5px;
    overflow:auto;
    color:white;
    }
    .g_txt_rp {
    margin:auto;
    width:90%;
    padding:10px;
    text-align:justify;
    background-color:firebrick;
    color:white;
    border:black 1px solid;
    }
    .g_titre_rp {
    display:block;
    text-align:center;
    font-size:25px;
    color:BurlyWood;
    font-family: 'Pacifico', cursive;
    padding:10px;
    }
    .g_soustitre_rp {
    display:block;
    text-align:right;
    color:burlywood;
    font-size:12px;
    border-bottom:dashed 2px burlywood;
    font-family: courrier new;
    padding:10px;
    text-shadow:1px 1px 3px white;
    }
    .g_parole_rp {
    display:inline-block;
    color:BurlyWood;
    text-indent:25px;
    font-style:italic;
    font-size:14px;
    }
    .g_img_part {
    width:580px;
    height:200px;
    margin-left:-25px;
    overflow:hidden;
    }


    Et le HTML qui y correspond :
    Code:
    <div class="g_fiche" style="width:650px;"><div class="g_etiquette" style="width:160px; position:relative; left:-100px; top:80px;">Demande de partenariat</div><br/>
    <div style="width:93%;" class="g_fond1"><div class="g_fond2"><div class="g_fond3">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div class="g_texte"><span class="g_titre">Demande de partenariat</span>

    <div class="g_img_part"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
    <div class="g_txt_rp"><span class="g_titre_rp">Nom du forum</span>
    Texte ici
    </div>
    </div>
    </div></div></div><a href="http://www.never-utopia.com/" class="g_credit">© A-Lice | Never-Utopia</a></div>

    Un petit commentaire (un avis ?) suffit pour voir le code.

    La suite de l'ensemble se trouve ici :


    Règlement
    Contexte
    Présentation
    Prédéfini
    Liens
    Récapitulatif
    Contenu RP
    Demande de Partenariat
    Pub

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


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

    Anonymous
    Invité

    Sam 23 Aoû 2014 - 11:55

    Merci ! \o/
    Ay.am.e
    Ay.am.e
    FémininAge : 26Messages : 123

    Mar 2 Sep 2014 - 3:34

    Merci !
    Vani
    Vani
    FémininAge : 40Messages : 154

    Lun 30 Mar 2015 - 18:00

    C'est joli *-*
    Staark
    Staark
    MasculinAge : 29Messages : 49

    Lun 6 Avr 2015 - 22:21

    Merci :3
    Araik
    Araik
    FémininAge : 29Messages : 250

    Ven 26 Juin 2015 - 18:13

    Parfait pour faire un dossier. J'adore



    Affaire classée - Demande de partenariat Signat15
    ludoloveisa
    ludoloveisa
    MasculinAge : 36Messages : 64

    Sam 19 Sep 2015 - 2:02

    Merci pour le partage
    Anonymous
    Invité

    Dim 20 Sep 2015 - 22:26

    Merci (*≧▽≦)
    Wolund
    Wolund
    MasculinAge : 26Messages : 53

    Sam 23 Juil 2016 - 14:09

    JE prends encore merci!
    avatar
    SinoJak
    MasculinAge : 23Messages : 44

    Dim 31 Juil 2016 - 14:25

    Vani a écrit:C'est joli *-*
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 30Messages : 156

    Sam 4 Fév 2017 - 13:49

    Merci pour le partage.
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Jeu 9 Fév 2017 - 2:35

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 8:47