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.

-23%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS 44mm (plusieurs coloris)
199 € 259 €
Voir le deal

    Brun et doré ^^'

    Elricka
    Elricka
    MasculinAge : 33Messages : 77

    Lun 1 Juil 2013 - 19:28

    Nyaaaaaa tout le monde !
    Bon, voilà, j'ai décidé de poster ici les codes que je fait. En l’occurrence, ici c'est un modèle de PV que l'on retrouve. Par contre, vu que le code est long en lui-même (j'ai du le modifier pour le faire adapter ici, d'ailleurs), vous le retrouverez dans un second message divisé en deux parties : l'une qui ira dans votre cSS, et l'autre que vous posterez remplie tout simplement dans votre section Poste Vacant. Voilà voilà.

    Bon, vu que j'en suis à là, je précise plusieurs points ^^'. Déjà, le fait que l'image soit tournante, un tuto qui a déjà été présenté par un membre présent ici ^^'. Ensuite, que les titres qui sont au-dessus des cadres sont interactives, c'est à dire qu'ils bougent lorsque l'on passe la souris dessus. Si ici ça ne réagit pas, c'est juste que je n'ai pu placer la partie "hover" dans mon code ^^'.


    Nyaaaa nyaaaaaa tout le monde ^^'


    Blaise Elder
    Brun et doré ^^' C1b6cd516cfe48f1d96de5518ac9ca4d_large




    ©.Genesis & Never Utopia - Feat Penn Badgley - Négociable pour Adam Brody.
    Je suis libre


    Identité

    Nom Prénom :
    Âge :
    Profession :
    Force :
    Don :
    Faiblesse :
    Particularité :


    Histoire
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus odio, molestie et ultricies eget, volutpat nec eros. Nulla iaculis dui sit amet ante volutpat elementum. Mauris lacinia nulla vel lorem aliquam eu pharetra est suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis ligula lorem, et pharetra leo. Fusce sollicitudin cursus lacus, in semper quam consectetur vitae. Maecenas semper arcu vitae ligula consequat vel pretium mauris suscipit. Quisque semper purus ac eros pharetra sed tempor tortor condimentum. Sed eros felis, fermentum eget molestie at, dignissim vitae libero. Maecenas suscipit euismod vehicula. Aliquam sit amet felis et dui eleifend congue. Sed iaculis sapien ut diam placerat at pretium mi pulvinar. Nullam mauris nisi, tincidunt ac eleifend sit amet, pretium quis lacus. Nam sed ante ac nunc molestie condimentum at in turpis.

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel eros rutrum urna vehicula tempor. Suspendisse potenti. Praesent eget nulla vel diam consectetur aliquam vel sit amet ligula. Proin velit quam, scelerisque commodo tempor viverra, egestas in arcu. Phasellus feugiat interdum tempus. Vestibulum tellus sem, placerat ac porttitor nec, dictum nec sapien. Proin euismod, enim sed pharetra laoreet, augue est egestas est, id lacinia nisl magna non sem. Ut ipsum risus, tincidunt vitae dapibus ut, hendrerit at diam. Fusce posuere tristique tellus, in scelerisque felis aliquet sed. Vestibulum tempus libero enim, eget vulputate lectus. Proin et lorem ac sem sagittis euismod. Aenean eget sem sit amet sem ultrices cursus a vel purus. Curabitur sed turpis sed libero adipiscing dictum sit amet nec quam.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam justo mauris, interdum sit amet condimentum ut, varius id neque. Cras tincidunt mattis magna, non lobortis arcu egestas ut. Vivamus luctus, nisl eget pellentesque rutrum, libero nisl aliquam justo, feugiat scelerisque ligula tellus at nunc. Sed lorem tellus, pellentesque et egestas ac, malesuada in eros. Suspendisse convallis pulvinar ipsum, sit amet fermentum mauris sagittis cursus. Donec sit amet turpis a odio pulvinar condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent sollicitudin nisl pulvinar libero ullamcorper aliquet. Pellentesque tristique auctor arcu a venenatis. Suspendisse potenti.

    Vivamus quis nisl lectus. Nunc libero lectus, tincidunt accumsan congue eu, molestie ac massa. In semper nisi et tellus iaculis eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras tristique facilisis vestibulum. Nullam mollis vehicula sapien, vitae convallis neque vulputate vehicula. Phasellus sed dolor nunc. Sed blandit placerat mattis. Duis quis mi aliquet mi cursus pulvinar placerat faucibus mi. Vivamus non sodales diam.

    Sed varius fermentum posuere. Curabitur sodales neque a augue iaculis tincidunt. Cras orci nisl, mattis nec cursus a, vestibulum non elit. Mauris consequat, massa et varius eleifend, nisl mauris fermentum mauris, vel elementum mauris risus a justo. Vestibulum vel sollicitudin nulla. Donec ornare, dolor id rutrum viverra, magna dui molestie dui, vitae ornare lacus tortor sed quam. Cras nec nisi in justo aliquet sodales. Ut vestibulum fringilla pellentesque. Nulla ac accumsan nunc.


    Mes liens

    Nom du personnage feat Nom de la célébrité
    Lien lien Lien Lien...

    Nom du personnage feat Nom de la célébrité
    Lien lien Lien Lien...

    Nom du personnage feat Nom de la célébrité
    Lien lien Lien Lien...

    Nom du personnage feat Nom de la célébrité
    Lien lien Lien Lien...




    Dernière édition par Elricka le Lun 1 Juil 2013 - 20:55, édité 1 fois
    • Revenir en haut
    Elricka
    Elricka
    MasculinAge : 33Messages : 77

    Lun 1 Juil 2013 - 19:31

    Chose promise, chose due ^^' !

    Voilà donc la première partie du code, que vous placerez dans votre partie cSS, dans votre PA administrative ^^'.

    Code:
    .cadre_pv
    {
    background-color: #000000;
    width: 600px;
    height: auto;
    border-radius: 500px 500px 100px 100px/100px 100px 25px 25px;
    box-shadow: 0px 0px 4px #000000;
    border-top: 3px solid #e0ab61;
    border-bottom: 3px solid #e0ab61;
    }
        

    .avatar1 img
    {
    border-radius: 5px 5px 5px 5px;
    transform: rotate(-30deg);
    box-shadow: 1px 1px 1px #000000;
    -moz-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    -htm-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    }

    .avatar2 img
    {
    border-radius: 5px 5px 5px 5px;
    transform: rotate(30deg);
    box-shadow: 1px 1px 1px #000000;
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -htm-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    }

    .nom
    {
    font-size: 20px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px;
    font-family: Gabriola;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    -htm-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    }

    .nom:hover
    {
    letter-spacing: 4px;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }

    .cadre1, .cadre2
    {
    overflow: auto;
    height: 200px;
    width: 500px;
    text-align: justify;
    border-radius: 25px;
    padding: 10px 10px;
    background-color: rgb(38, 31, 22);
    border-left: 3px solid #1C1710;
    border-right: 3px solid #1C1710;
    }

    .cadre2
    {
    font-family: Gabriola;
    }

    Et le second, donc, que vous placerez pour avoir le PV ^^'.

    Code:
    <center><div class="cadre_pv"><br><span class="nom" style="color: #B2B8DE;">Blaise Elder</span>
    <span class="rotation2"> <img src="http://img0.ndsstatic.com/wallpapers/c1b6cd516cfe48f1d96de5518ac9ca4d_large.jpeg" alt="" / style="border-radius: 100px 100px 50px 50px/50px 50px 100px 100px;"></span>
    <select style="width: 150px" onchange="location = this.options
    [this.selectedIndex].value">
    <option selected="selected">
    Qualités & Défauts
    </option>
    <option>....</option>
    <option>....</option>
    <option>....</option>
    <option>....</option>
    <option>....</option></select>


    <div style="text-align: right; margin-right: 5px; font-style: italic; font-size: 9px;">
    ©.Genesis & [url=http://www.never-utopia.com/forum]Never Utopia[/url] - Feat Penn Badgley - Négociable pour Adam Brody.
    [color=green]Je suis libre[/color]</div>

    <span class="nom" style="color: #B2B8DE;">Identité</span><div class="cadre1">
    [b][color=#B2B8DE]Nom Prénom :[/color][/b]
    [b][color=#B2B8DE]Âge :[/color][/b]
    [b][color=#B2B8DE]Profession :[/color][/b]
    [b][color=#B2B8DE]Force :[/color][/b]
    [b][color=#B2B8DE]Don :[/color][/b]
    [b][color=#B2B8DE]Faiblesse :[/b][color=#B2B8DE][color=#B2B8DE][/color]
    [b][color=#B2B8DE]Particularité :[/b][color=#B2B8DE][color=#B2B8DE][/color]
    </div>

    <span class="nom" style="color: #B2B8DE;">Histoire</span><div class="cadre2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus odio, molestie et ultricies eget, volutpat nec eros. Nulla iaculis dui sit amet ante volutpat elementum. Mauris lacinia nulla vel lorem aliquam eu pharetra est suscipit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis ligula lorem, et pharetra leo. Fusce sollicitudin cursus lacus, in semper quam consectetur vitae. Maecenas semper arcu vitae ligula consequat vel pretium mauris suscipit. Quisque semper purus ac eros pharetra sed tempor tortor condimentum. Sed eros felis, fermentum eget molestie at, dignissim vitae libero. Maecenas suscipit euismod vehicula. Aliquam sit amet felis et dui eleifend congue. Sed iaculis sapien ut diam placerat at pretium mi pulvinar. Nullam mauris nisi, tincidunt ac eleifend sit amet, pretium quis lacus. Nam sed ante ac nunc molestie condimentum at in turpis.

    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel eros rutrum urna vehicula tempor. Suspendisse potenti. Praesent eget nulla vel diam consectetur aliquam vel sit amet ligula. Proin velit quam, scelerisque commodo tempor viverra, egestas in arcu. Phasellus feugiat interdum tempus. Vestibulum tellus sem, placerat ac porttitor nec, dictum nec sapien. Proin euismod, enim sed pharetra laoreet, augue est egestas est, id lacinia nisl magna non sem. Ut ipsum risus, tincidunt vitae dapibus ut, hendrerit at diam. Fusce posuere tristique tellus, in scelerisque felis aliquet sed. Vestibulum tempus libero enim, eget vulputate lectus. Proin et lorem ac sem sagittis euismod. Aenean eget sem sit amet sem ultrices cursus a vel purus. Curabitur sed turpis sed libero adipiscing dictum sit amet nec quam.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam justo mauris, interdum sit amet condimentum ut, varius id neque. Cras tincidunt mattis magna, non lobortis arcu egestas ut. Vivamus luctus, nisl eget pellentesque rutrum, libero nisl aliquam justo, feugiat scelerisque ligula tellus at nunc. Sed lorem tellus, pellentesque et egestas ac, malesuada in eros. Suspendisse convallis pulvinar ipsum, sit amet fermentum mauris sagittis cursus. Donec sit amet turpis a odio pulvinar condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent sollicitudin nisl pulvinar libero ullamcorper aliquet. Pellentesque tristique auctor arcu a venenatis. Suspendisse potenti.

    Vivamus quis nisl lectus. Nunc libero lectus, tincidunt accumsan congue eu, molestie ac massa. In semper nisi et tellus iaculis eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras tristique facilisis vestibulum. Nullam mollis vehicula sapien, vitae convallis neque vulputate vehicula. Phasellus sed dolor nunc. Sed blandit placerat mattis. Duis quis mi aliquet mi cursus pulvinar placerat faucibus mi. Vivamus non sodales diam.

    Sed varius fermentum posuere. Curabitur sodales neque a augue iaculis tincidunt. Cras orci nisl, mattis nec cursus a, vestibulum non elit. Mauris consequat, massa et varius eleifend, nisl mauris fermentum mauris, vel elementum mauris risus a justo. Vestibulum vel sollicitudin nulla. Donec ornare, dolor id rutrum viverra, magna dui molestie dui, vitae ornare lacus tortor sed quam. Cras nec nisi in justo aliquet sodales. Ut vestibulum fringilla pellentesque. Nulla ac accumsan nunc.</div>

    <span class="nom" style="color: #B2B8DE;">Mes liens</span><div class="cadre1">
    [b][color=#B2B8DE]Nom du personnage [i][size=9]feat Nom de la célébrité[/i][/size][/b][color=#B2B8DE][color=#B2B8DE][/color]
    Lien lien Lien Lien...

    [b][color=#B2B8DE]Nom du personnage [i][size=9]feat Nom de la célébrité[/i][/size][/b][color=#B2B8DE][color=#B2B8DE][/color]
    Lien lien Lien Lien...

    [b][color=#B2B8DE]Nom du personnage [i][size=9]feat Nom de la célébrité[/i][/size][/b][color=#B2B8DE][color=#B2B8DE][/color]
    Lien lien Lien Lien...

    [b][color=#B2B8DE]Nom du personnage [i][size=9]feat Nom de la célébrité[/i][/size][/b][color=#B2B8DE][color=#B2B8DE][/color]
    Lien lien Lien Lien...</div><br>
    </div>
    • Revenir en haut
    bibi0712
    bibi0712
    FémininAge : 46Messages : 66

    Lun 14 Avr 2014 - 22:39

    Elle est super jolie bravo et merci
    • Revenir en haut
    Kryystale
    Kryystale
    FémininAge : 30Messages : 4

    Lun 5 Mai 2014 - 2:19

    Merci beaucoup, c'est superbe !
    • Revenir en haut
    Elricka
    Elricka
    MasculinAge : 33Messages : 77

    Lun 5 Mai 2014 - 15:07

    Merci beaucoup, ceci me réchauffe le cœur ^^' !
    • Revenir en haut
    Alyssa.B50
    Alyssa.B50
    FémininAge : 30Messages : 42

    Ven 15 Aoû 2014 - 16:26

    Merci beaucoup pour cette fiche qui va servir à mes pvs :) par contre, peux-t-on, stp, changer les couleurs ?
    • Revenir en haut
    Nut's
    Nut's
    FémininAge : 37Messages : 4

    Dim 11 Jan 2015 - 15:54

    Merci pour ce code !
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 2:38