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.

-39%
Le deal à ne pas rater :
Promo sur le Casque sans fil Sony WH-1000XM3
229.99 € 379 €
Voir le deal

    Affaire classée - Demande de partenariat

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

    le 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é

    le Sam 23 Aoû 2014 - 11:55

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

    le Mar 2 Sep 2014 - 3:34

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

    le Lun 30 Mar 2015 - 18:00

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

    le Lun 6 Avr 2015 - 22:21

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

    le Ven 26 Juin 2015 - 18:13

    Parfait pour faire un dossier. J'adore



    Affaire classée - Demande de partenariat Signat15
    ludoloveisa
    ludoloveisa
    MasculinAge : 32Messages : 62

    le Sam 19 Sep 2015 - 2:02

    Merci pour le partage
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2200

    le Dim 20 Sep 2015 - 22:26

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

    le Sam 23 Juil 2016 - 14:09

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

    le Dim 31 Juil 2016 - 14:25

    @Vani a écrit:C'est joli *-*
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 26Messages : 152

    le Sam 4 Fév 2017 - 13:49

    Merci pour le partage.
    Eshon
    Eshon
    FémininAge : 39Messages : 194

    le Jeu 9 Fév 2017 - 2:35

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 3 Juin 2020 - 20:56