Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Brun et doré ^^'

    Partagez
    MasculinAge : 25Message(s) : 77
    Elricka
    le 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





    ©.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
    MasculinAge : 25Message(s) : 77
    Elricka
    le 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>
    FémininAge : 38Message(s) : 66
    bibi0712
    le Lun 14 Avr 2014 - 22:39
    Elle est super jolie bravo et merci
    FémininAge : 22Message(s) : 4
    Kryystale
    le Lun 5 Mai 2014 - 2:19
    Merci beaucoup, c'est superbe !
    MasculinAge : 25Message(s) : 77
    Elricka
    le Lun 5 Mai 2014 - 15:07
    Merci beaucoup, ceci me réchauffe le cœur ^^' !
    FémininAge : 22Message(s) : 39
    Alyssa.B50
    le 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 ?
    FémininAge : 29Message(s) : 4
    Nut's
    le Dim 11 Jan 2015 - 15:54
    Merci pour ce code !
    Contenu sponsorisé
    Aujourd'hui à 12:38

      La date/heure actuelle est Sam 3 Déc 2016 - 12:38