AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-20%
Le deal à ne pas rater :
-100€ sur Roborock S5 Max Aspirateur Robot
399.99 € 499.99 €
Voir le deal

    Fiche RP - Sinister Blade

    elfyqchan
    elfyqchan
    FémininAge : 23Messages : 128

    le Jeu 2 Avr 2020 - 13:44


    Hello !

    Je vous propose le codage d'une fiche de RP que j'ai réalisé il y a quelques années pour mon propre compte. Comme je ne m'en sers plus, j'ai décidé de le partager ! Le LS est évidemment modifiable, notamment pour les couleurs et les images ! En revanche, merci de ne pas retirer les crédits. Wink

    L'aperçu est dispo ici !


    Le fond gris clair/bleu visible ne fait pas partie du codage. Le fond de l'entête, hors images, est donc transparent. Le codage a été testé sous Chrome, Firefox et Opera GX.

    Les trois images de l'entête sont de dimension 500px*90px


    PS. Bien que le codage soit visible par tous, un petit merci fait toujours plaisir ! :hug:

    Code:
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Jura:300|Architects+Daughter' rel='stylesheet' type='text/css'><style>.strct-snstr-bld{margin: auto; width: 500px;} .bd-snstr-bld{text-align: justify; padding: 30px; background-color: #232323; color: white; font-size: 14px; font-family: 'Roboto Condensed', sans-serif; font-weight: 300;} .bckgrnd-snstr-bld{background-color: #820909; padding: 50px 50px 75px;} .ttl-snstr-bld{margin: 20px auto; font-variant: small-caps; font-size: 34px; text-align: center; font-family: 'Jura', sans-serif; font-weight: 300; color: #232323;} .ft-ttl-snstr-bld{margin: 20px auto; font-size: 16px; text-align: center; font-family: 'Architects Daughter', cursive; line-height: 13px; color: #232323;} .dlg-snstr-bld{margin: 20px 50px 0px; color:#F17A60;} #crdts-snstr-bld{text-align: center; margin: 30px 0px -50px; color: white; font-size: 12px; font-variant: small-caps; font-family:Trebuchet MS, sans-serif;} #NU-lnk-snstr-bld{color: white; text-decoration: none;}</style><div class="strct-snstr-bld"><!-- IMAGES 500PX * 90PX--><img src="https://i.servimg.com/u/f77/19/35/98/81/kat110.jpg"/><div class="ttl-snstr-bld">The Sinister</div><img src="https://i.servimg.com/u/f77/19/35/98/81/kat210.jpg"/><div class="ttl-snstr-bld">Blade</div><img src="https://i.servimg.com/u/f77/19/35/98/81/kat310.jpg"/><div class="ft-ttl-snstr-bld">Feat.<br/>Machin, Bidule et truc</div><div class="bckgrnd-snstr-bld"><div class="bd-snstr-bld">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non faucibus nisl. Morbi suscipit viverra erat vel scelerisque. Ut ornare, est id egestas tempus, elit diam mollis magna, id malesuada turpis erat sed ex. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a libero ante. Vivamus a purus orci. Fusce vulputate nisi sit amet commodo convallis. Donec maximus mauris felis, quis cursus leo fringilla ac. Proin finibus lacus tortor, eu feugiat massa vulputate sit amet. Mauris varius velit tortor, quis vestibulum nisl lobortis sit amet. Nullam euismod ipsum sit amet mollis porttitor.
    <div class="dlg-snstr-bld">- Lorem ipsum dolor sit amet</div>
    Aliquam vel ipsum nulla. Mauris vestibulum risus a lacus sollicitudin molestie. Nullam leo sapien, tempus sit amet auctor consectetur, fermentum ultrices justo. Sed quam risus, gravida quis pretium consectetur, condimentum et metus. Pellentesque tempus diam in auctor sollicitudin. Cras condimentum augue id nulla sodales auctor. Quisque finibus mollis massa at feugiat. Fusce auctor tortor id sem scelerisque, quis dignissim nulla vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Donec in varius elit. Suspendisse potenti. Integer est odio, condimentum at erat sit amet, bibendum maximus purus. Fusce commodo mi nulla, sit amet congue nunc ultrices vitae. Fusce eros tortor, hendrerit id tortor eu, ullamcorper imperdiet lorem. Etiam erat mi, gravida ac massa eu, ultricies sollicitudin nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget porttitor nisl. Cras lacinia porta lectus, at elementum odio finibus sed. Nunc odio est, viverra fermentum arcu vitae, elementum finibus enim. Cras sed aliquet ligula, vitae laoreet leo. Proin dui tortor, vulputate in tellus sed, volutpat aliquam libero. Donec vehicula faucibus mauris in semper. Proin sodales nibh ac nibh posuere, ut pretium dui consequat. Praesent non nibh rutrum, condimentum mi eget, ultricies felis.

    Cras auctor faucibus elit, ut placerat tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed hendrerit ante nec ante sagittis lobortis. Vivamus sollicitudin vel orci dignissim vehicula. Curabitur posuere tellus a euismod accumsan. Curabitur vestibulum libero ac tortor gravida semper. Nulla maximus quis ante molestie aliquet. Morbi eget interdum diam, at fringilla elit.

    Cras id leo commodo, ultrices velit sed, placerat ex. Nullam sit amet neque at dui rhoncus consectetur ut at dui. Mauris sed erat ut est rhoncus blandit. Etiam iaculis porta faucibus. Quisque augue sapien, ultrices nec congue ac, tristique et erat. Praesent vel consequat metus. Maecenas fermentum dui elit, non fringilla ex commodo sit amet.</div><div id="crdts-snstr-bld">@elfyqchan - <a id="NU-lnk-snstr-bld" href="https://www.never-utopia.com" target="_blank">Never Utopia</a></div></div></div>


    Dernière édition par elfyqchan le Lun 27 Avr 2020 - 19:34, édité 1 fois



    Fiche RP - Sinister Blade Tumblr_p9lzpiYpDY1rh0thmo1_500
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 287

    le Lun 27 Avr 2020 - 18:53

    Hello !

    Déjà un grand merci pour ce LS, le rendu est sympa 😄

    Je viens juste avec quelques précisions :
    • Pourrais-tu mettre ton aperçu ailleurs ? Par exemple dans le bloc informatif ? Là il est un peu perdu dans le texte, on ne le voit pas. Tu as aussi parfaitement le droit d'afficher l'image sous spoiler 😄 Il faut juste qu'on le voit plus facilement !
    • Je n'ai pas grand chose à redire à ton code. Je te préviens seulement sur l'utilisation du blockquote. Il est utilisé pour faire des citations, et un forum peut lui mettre une mise en forme particulière qui peut casser ton rendu. En faisant le test sur mon forum test, sous certaines versions il y a ce cas de figure. Par exemple, c'est le cas avec ModernBB.


    Voilà, c'est tout ! Quand tu as corrigé ces deux petits points, je valide ton LS 😄



    elfyqchan
    elfyqchan
    FémininAge : 23Messages : 128

    le Lun 27 Avr 2020 - 19:39

    Coucou !

    J'ai mis l'aperçu dans un petit bloc à part, il se voit nettement mieux.

    J'ai aussi changé le blockquote en div avec quelques margin et color, effectivement ça posait problème dans certains cas.

    Voilà pour ce LS !



    Fiche RP - Sinister Blade Tumblr_p9lzpiYpDY1rh0thmo1_500
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 287

    le Mar 28 Avr 2020 - 0:45

    Ce LS est validé !Il va être déplacé et ajouté à l'index adéquat.

    N'oublie pas d'ajouter les XP correspondant sur ton profil.



    Kelalin
    Kelalin
    FémininAge : 27Messages : 2234

    le Mar 28 Avr 2020 - 21:51

    Merci pour le partage *_*
    Faïryna
    Faïryna
    FémininAge : 17Messages : 81

    le Sam 13 Juin 2020 - 23:59

    Merci pour le partage !! *^*
    Contenu sponsorisé


      La date/heure actuelle est Mer 5 Aoû 2020 - 3:07