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.


    Mission#5 - Application cursus deuxième du nom [apprenti]

    Partagez
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Mer 2 Juil 2014 - 22:49

    Rappel du premier message :

    Mission#5 - Application cursus deuxième du nom [apprenti]


    Bonjour à tous !
    Pour la cinquième mission de la guilde des architectes, je vous propose de réaliser une en-tête de rp (et non pas un contenu de rp).

    Cependant, pour corser un peu le tout, je vais vous imposer quelques contraintes, la première sera de n'avoir strictement aucune image. La seconde sera de n'utiliser qu'une seule couleur, mais il est néanmoins possible de la décliner en toutes les nuances qui existent. Ce n'est pas très clair dit comme ça mais si vous prenez du bleu, vous n'être pas cantonné au bleu, vous pouvez utiliser également le bleu foncé, le clair, le turquoise etc. La troisième et dernière contrainte sera d'intégrer au moins deux polices différentes. Pour trouver votre bonheur je vous conseille de jeter un coup d'oeil sur ce site pour pouvoir les intégrer correctement.


    Pour réaliser cette mission, vous pouvez très largement consulter (d'ailleurs je vous le conseille) ce TP ainsi que de cette étape.


    Vous posterez vos résultats à la suite ainsi que le code correspondant entre les balises
    Code:
    [code][/code]
    .

    Sur ce ne soyez pas timide, aucune création n'est mal faite ou fausse, tout est juste du moment que vous proposez quelque chose !

    PS : Ne mettez pas votre création sous "hide", sinon vous ne pourrez pas avoir l'avis des autres membres. C'est dommage de passez à côté d'avis et/ou de conseil (: (Le code en revanche peut/doit être mis sous "hide").

    Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !


    Dernière édition par A-Lice le Dim 1 Fév 2015 - 11:07, édité 4 fois

    avatar
    Celte
    MasculinAge : 28Messages : 63

    le Mar 30 Sep 2014 - 12:43

    Bon voila, je fais un petit essai sans avoir regardé les autres pour pas piquer d'idée donc j'espère pas avoir fait pareil qu'un autre xD.




    N RP : Devenir un pirate N
    Viens suivre ta formation petit mousse

    Code:
    <link href='http://fonts.googleapis.com/css?family=Walter+Turncoat' rel='stylesheet' type='text/css'><span style="color:#BD5A03;"><span style="font-family:Wingdings; font-size:54px;">N</span> <span style="font-family:Walter Turncoat; font-weight:bold;"> RP : Devenir un pirate</span> <span style="font-family:Wingdings; font-size:54px;">N</span></span> <br /> <span style="font-style:italic; color:#E16C07;">Viens suivre ta formation petit mousse </span>



    avatar
    Sivmatt
    MasculinAge : 25Messages : 24

    le Ven 10 Oct 2014 - 15:07

    Voila , c'est un peu nul , mais j'avais pas d'idée xD



    toujours un truc



    random stamp



    Titre un peu long et chiant


    truc



    autre truc



    encore un truc






    Code:
    <div style="text-align : center; ">
    <div style="margin-right: 20%; margin-top: 30px; font-family: Segoe; font-style: italic;  font-size: 20px; transform: rotate(8deg); -moz-transform: rotate(8deg); -webkit-transform: rotate(8deg); -khtml-transform: rotate(8deg);">
    <span style="border: orange 2px double; border-radius: 5px;">toujours un truc
    </span>
    </div>
    <div style="margin-left: 20%; margin-top: -20px; font-family: Segoe; font-style: italic;  font-size: 20px; transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -khtml-transform: rotate(-5deg);">
    <span style="border: orange 2px double; border-radius: 5px;">random stamp
    </span>
    </div>
    <div style="font-family: Calibri; font-style: italic;  font-size: 35px; margin-top: -20px">
    Titre un peu long et chiant
    </div>
    <div style="font-family: Segoe; font-style: italic;  font-size: 20px; text-align: center; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -khtml-transform: rotate(-10deg);">
    <span style="border: orange 2px double; border-radius: 5px;">truc
    </span>
    </div>
    <div style="margin-left: 30%; margin-top: -40px; font-family: Segoe; font-style: italic;  font-size: 20px; transform: rotate(6deg); -moz-transform: rotate(6deg); -webkit-transform: rotate(6deg); -khtml-transform: rotate(6deg); ">
    <span style="border: orange 2px double; border-radius: 5px;">autre truc
    </span>
    </div>
    <div style="margin-right: 30%; margin-top: -60px; font-family: Segoe; font-style: italic;  font-size: 20px; transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -khtml-transform: rotate(-5deg); ">
    <span style="border: orange 2px double; border-radius: 5px;">encore un truc
    </span>
    </div>


    </div>
    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Jeu 23 Oct 2014 - 10:21

    Bon bon, je me lançe Very Happy



    Votre titre

    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mer 12 Nov 2014 - 7:51

    Bon, voilà mon essai parce que j'ai été prise d'une frénésie de lozanges...

    Titre du RPPetite citation



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Mer 12 Nov 2014 - 7:52

    Et un double post parce que croyez-le croyez-le pas, j'ai réussi à dépasser la limite de caractères XD
    Bref, un tantinet énormément trop lourd pour servir réellement d'en-tête XD

    Code:
    <link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css' /><div style="position: relative; width: 525px; height: 187px; margin: auto;"><div style="width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 495px;"></div></div><div style="width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 495px;"></div></div><div style="margin-top: -17px; margin-left: 18px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div></div><div style="margin-left: 17px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div></div><div style="margin-top: -17px; width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 495px;"></div></div><div style="width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 495px;"></div></div><div style="margin-top: -17px; margin-left: 18px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div></div><div style="margin-left: 17px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div></div><div style="margin-top: -17px; width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 495px;"></div></div><div style="width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 495px;"></div></div><div style="margin-top: -17px; margin-left: 18px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div></div><div style="margin-left: 17px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div></div><div style="margin-top: -17px; width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 495px;"></div></div><div style="width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 495px;"></div></div><div style="margin-top: -17px; margin-left: 18px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div></div><div style="margin-left: 17px; width: 490px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #650000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div></div><div style="margin-top: -17px; width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; top: 5px; left: 495px;"></div></div><div style="width: 525px; height: 18px; position: relative; overflow: hidden;"><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 5px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 40px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 75px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 110px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 145px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 180px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 215px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 250px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 285px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 320px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 355px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 390px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 425px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 460px;"></div><div style="transform: rotate(45deg); background: #3C0000; width: 25px; height: 25px; position: absolute; bottom: 5px; left: 495px;"></div></div><span style="position: absolute; top: 80px; right: 0; left: 0; margin: auto; width: 90%; text-align: center; display: block; font-family: monotype corsiva; font-size: 70px; color: #BE3939; text-shadow: 2px 2px 1px #2F0000;"><span style="color: #DF6161; font-weight: bold; font-size: 80px;">T</span>itre du RP</span><span style="position: absolute; top: 100px; right: 0; left: 0; margin: auto; width: 90%; text-align: center; color: #FF9A9A; font-style: italic; font-size: 20px; font-family: rancho; text-shadow: 2px 2px 1px #2F0000;">Petite citation</span></div>



    avatar
    Cruelly
    FémininAge : 24Messages : 2547

    le Dim 16 Nov 2014 - 0:19

    Voici ce que j'ai fais :)

    Le titre
    et même pas peur, j'mets un sous-titre!


    Code:
    <center><span style="font-family: Arial; color: #58A9A4; font-size: 40px; color: #4B35CA;
    "><span style="color: #3399ff; font-family:georgia; font-size: 50px; ">L</span><i>e titre</i></span><span style="color: #00ccff; text-shadow: 2px 1px 1px #4B35CA;"><br />et même pas peur, j'mets un sous-titre!</span></center>


    Dernière édition par Cruelly le Dim 23 Nov 2014 - 7:20, édité 1 fois
    avatar
    Manouille
    FémininAge : 17Messages : 9

    le Dim 16 Nov 2014 - 16:58

    Voilà mon essai (: Comme c'est ma première entête j'ai pas mal bidouillé, donc si vous avez des conseils pour améliorer le code, je suis preneuse ^^




    Un titre...
    ... et même un sous titre !






    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Lun 17 Nov 2014 - 7:45

    Cruelly :
    Joli! Si je peux me permettre un conseil, il ne faut pas mélanger le BBcode (les balises entre [ ] ) et le HTML (les balises entre < > ). Par exemple, tu as un [ i ] [ /i ] que tu devrais remplacer par < i > < /i >.



    Manouille :
    J'aime ♥ Ça a l'air simple, mais c'est magnifique ♥

    Pour ce qui est des conseils, n'oublies pas de fermer tes balises "link" ^^ Quand on prend le lien d'une police sur Google Font, ils nous donnent le lien sans fermer la balise, alors on doit le faire nous-même :
    Code:
    /*Donné par Google Font*/
    <link href='http://fonts.googleapis.com/css?family=Architects+Daughter|Gloria+Hallelujah' rel='stylesheet' type='text/css'>


    /*Fermé correctement*/
    <link href='http://fonts.googleapis.com/css?family=Architects+Daughter|Gloria+Hallelujah' rel='stylesheet' type='text/css' />


    Un autre petit conseil : Les balises "center" sont en train de devenir désuètes et sont le plus souvent remplacées par un "margin: auto;". Par exemple, dans ton cas, j'ai enlevé la balise "center" et ai mis un "margin: auto;" dans ton span de titre et dans ton span de sous-titre :
    Code:
    <span style="margin: auto; color: #7CC8FF; font-family: Gloria Hallelujah; font-size: 60px; text-shadow: #4A64FF 2px 2px 0px; border-bottom: 1px dotted #35B8D3; padding-bottom: 18px; display: block; width: 60%; text-align: left; padding-left: 15px;"> <span style="font-size: 90px; color: #4A64FF; text-shadow: #7CC8FF 3px 3px 0px;"> U</span>n titre... </span>
    <span style="margin: auto; width: 60%; text-align: right; display: block; margin-top: -17px; font-family: architects daughter; font-size: 18px; color: #86DDFF; text-shadow: #86DDFF 0px 0px 4px ">... et même un sous titre !</span>


    Un dernier conseil : Fais attention à bien mettre un point-virgule ";" pour séparer tes propriétés, même si c'est la dernière propriété :
    Code:
    /*Ton code*/
    <span style="margin: auto; width: 60%; text-align: right; display: block; margin-top: -17px; font-family: architects daughter; font-size: 18px; color: #86DDFF; text-shadow: #86DDFF 0px 0px 4px ">... et même un sous titre !</span>

    /*Ton code corrigé*/
    <span style="margin: auto; width: 60%; text-align: right; display: block; margin-top: -17px; font-family: architects daughter; font-size: 18px; color: #86DDFF; text-shadow: #86DDFF 0px 0px 4px;">... et même un sous titre !</span>



    avatar
    Scavenger
    MasculinAge : 25Messages : 1501

    le Lun 17 Nov 2014 - 17:33

    Hello,
    Moi j'aime bien tout ce que vous avez fait, et Onyx a déjà dis à peu près tout ce qu'il y avait à dire.. ><
    Donc moi je vais parler de la création d'Onyx. :3

    Pourquoi ne pas avoir utilisé des class pour tes losanges de fond ? Il me semble qu'inclure une balise
    Code:
    <style></style>
    serait moins dérangeant que de faire un gros paté dans ton code ? Pour le coup je ne saurais même pas où modifier ton texte. : /

    Après j'ai essayé de refaire ce que t'as fait sans absolute et placement "en dur", j'ai pas encore trouvé de solution. ><
    (ma quête d'optimisation n'est pas finie Cool , pis j'aime ce que t'as fait. xD)
    Si on avait accès au javascript, bha je l'aurais fait en JS, je crois. :hum:



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Lun 17 Nov 2014 - 21:49

    Scav' : T'as raison pour les balises, sauf que je m'étais donné comme défi de justement pas les utiliser, alors je me retrouve avec un truc impossible u_u

    Puis bon, parce que des carrés tournés sur le côté ne sont apparemment pas des lozanges selon les règles de la géo, je fais un deuxième essai (cette fois-ci avec les balises "style" ou je n'y serait pas arrivée u_u)

    PS: Et le texte est tout à la fin, je l'ai mis là justement pour le retrouver ^^

    Titre du RPPetite citation


    Code:
    <style>.rpo_1 {position: relative; margin: auto; width: 577px; height: 234px;} .rpo_2 {float: left; width: 25px; height: 40px; overflow: hidden; margin-left: -2px;} .rpo_3 {float: left; width: 25px; height: 40px; overflow: hidden;} .rpo_4 {transform: rotate(32deg); width: 50px; height: 80px; background: #3C0000; margin-left: 5px;} .rpo_5 {margin-left: -30px; transform: rotate(-32deg); width: 50px; height: 80px; background: #3C0000;} .rpo_6 {transform: rotate(-32deg); width: 50px; height: 80px; background: #3C0000; margin-top: -30px; margin-left: 12px;} .rpo_7 {margin-top: -30px; margin-left: -37px; transform: rotate(32deg); width: 50px; height: 80px; background: #3C0000;} .rpo_10 {transform: rotate(32deg); width: 50px; height: 80px; background: #650000; margin-left: 5px;} .rpo_11 {margin-left: -30px; transform: rotate(-32deg); width: 50px; height: 80px; background: #650000;} .rpo_12 {transform: rotate(-32deg); width: 50px; height: 80px; background: #650000; margin-top: -30px; margin-left: 12px;} .rpo_13 {margin-top: -30px; margin-left: -37px; transform: rotate(32deg); width: 50px; height: 80px; background: #650000;} .rpo_span_1 {position: absolute; top: 100px; right: 0; left: 0; margin: auto; width: 90%; text-align: center; display: block; font-family: monotype corsiva; font-size: 70px; color: #BE3939; text-shadow: 2px 2px 1px #2F0000;} .rpo_span_2 {color: #DF6161; font-weight: bold; font-size: 80px;} .rpo_span_3 {position: absolute; top: 122px; right: 0; left: 0; margin: auto; width: 90%; text-align: center; color: #FF9A9A; font-style: italic; font-size: 20px; font-family: rancho; text-shadow: 2px 2px 1px #2F0000;}</style><link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css' /><div class="rpo_1"><div style="position: absolute; top:0px; left: 1px;"><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div></div><div style="position: absolute; top: 39px; left: 25px;"><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div style="clear: both;"></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div></div><div style="position: absolute; top: 78px; left: 1px;"><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div style="clear: both;"></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div></div><div style="position: absolute; top: 117px; left: 25px;"><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div class="rpo_2"><div class="rpo_10"></div></div><div class="rpo_3"><div class="rpo_11"></div></div><div style="clear: both;"></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div><div class="rpo_2"><div class="rpo_12"></div></div><div class="rpo_3"><div class="rpo_13"></div></div></div><div style="position: absolute; top: 156px; left: 1px;"><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div class="rpo_2"><div class="rpo_4"></div></div><div class="rpo_3"><div class="rpo_5"></div></div><div style="clear: both;"></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div><div class="rpo_2"><div class="rpo_6"></div></div><div class="rpo_3"><div class="rpo_7"></div></div></div><span class="rpo_span_1"><span class="rpo_span_2">T</span>itre du RP</span><span class="rpo_span_3">Petite citation</span></div>



    avatar
    Skyleen
    FémininAge : 25Messages : 476

    le Jeu 20 Nov 2014 - 19:11

    Coucou voilà mon petit essai. c'est pas très beau mais c'est toujours ça =)


    Marry me... Love me... Need me...
    Or die, Darling... "


    Code:
    <link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'><center><div style="width: 600px; height: 40px; border-bottom: 3px #2E616E solid; text-align: center; font-family: Lobster Two, sans-serif; font-size: 20px;letter-spacing: 3.4pt; color:#2E616E; text-shadow: 0px 1px 0px #c7d5fa; padding-bottom: 5px;"><br><span style="font-size: 40px;">M</span>arry me... <span style="font-size: 40px;">L</span>ove me... <span style="font-size: 40px;">N</span>eed me...</div><span style="padding-top: 2px; font-family : Open Sans Condensed; font-size: 12px; color: #c7d5fa; text-transform: uppercase; text-align: center; letter-spacing: 3.4pt;"> Or die, Darling... "</span></center>



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    avatar
    Cruelly
    FémininAge : 24Messages : 2547

    le Dim 23 Nov 2014 - 7:23

    Joli! Si je peux me permettre un conseil, il ne faut pas mélanger le BBcode (les balises entre [ ] ) et le HTML (les balises entre < > ). Par exemple, tu as un [ i ] [ /i ] que tu devrais remplacer par < i > < /i >.


    Merci pour le conseil. J'ai modifier le point que tu as mentionner ^^ :)

    @Cruelly a écrit:Voici ce que j'ai fais :)

    Le titre
    et même pas peur, j'mets un sous-titre!


    Code:
    <center><span style="font-family: Arial; color: #58A9A4; font-size: 40px; color: #4B35CA;
    "><span style="color: #3399ff; font-family:georgia; font-size: 50px; ">L</span><i>e titre</i></span><span style="color: #00ccff; text-shadow: 2px 1px 1px #4B35CA;"><br />et même pas peur, j'mets un sous-titre!</span></center>
    avatar
    Alantlya
    MasculinAge : 23Messages : 30

    le Jeu 27 Nov 2014 - 15:17

    Bon, j'ai essayé quelque chose... Ça reste assez simpliste par rapport à ce que certains autres ont fait.

    Titre du RPSous-titre qui claque !


    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Dim 1 Fév 2015 - 11:05

    C'est un peu en retard que je vous remercie de votre participation Makuro, Lihuén, Ayfoth, Celte, Sivmatt, Merwyn Arehdel, Onyx, Cruelly, Manouille, Skyleen et Alantlya.
    J'ai regardé chacune de vos participation, certaines m'ont plu visuellement, comme celle de Makuro, d'autres par le code comme celui d'Onyx x) J'aime ta façon de te compliquer la vie !
    En général les consignes ont été respectées donc c'est super (:

    Néanmoins, Alantlya si je peux me permettre un conseil, fais attention à l'obsolescence de la balise
    Code:
    <center>

    Voilà, merci à tous d'avoir participé (:

    Cette mission est donc terminée, je suis contente qu'elle ait eu autant de succès et que vous ayez tous, initiés comme apprentis, pu proposer quelque chose.


    Dernière édition par A-Lice le Lun 2 Fév 2015 - 12:21, édité 1 fois

    avatar
    Alantlya
    MasculinAge : 23Messages : 30

    le Lun 2 Fév 2015 - 7:45

    Oh, d'accord, merci ^^" Je vais essayer de faire gaffe !
    Contenu sponsorisé


      La date/heure actuelle est Sam 18 Nov 2017 - 9:25