2 résultats trouvés pour auteur_elfyqchan

Bonjour !

Je vous propose aujourd'hui un codage de fiche RP un peu futuriste inspiré de Cyberpunk, avec de jolis néons. J'espère qu'il fera quelques heureux !





Bien que le code soit en libre accès, n'hésitez pas à laisser un petit message sous celui-ci !

Code:

<link href="https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Quicksand&display=swap" rel="stylesheet"><style>.strct-cbrpnk{margin:auto;width:500px}.hdr-cbpnk{width:400px;height:150px;-moz-box-shadow:0 0 10px #D91AC0;-webkit-box-shadow:0 0 10px #D91AC0;box-shadow:0 0 15px #D91AC0}.ttl-cbrpnk{font-family:'Covered By Your Grace',cursive;color:#F0FE26;text-align:center;margin:50px;font-size:36px;text-shadow:0px 0px 8px #A3FDFD;line-height:30px}.bd-cbrpnk{text-align:justify;padding:30px;backdrop-filter:blur(3px);background-color:rgba(0, 0, 0, 0.4);color:white;font-size:13px;font-family:'Quicksand',sans-serif;-moz-box-shadow:0 0 10px #08BDA5;-webkit-box-shadow:0 0 10px #08BDA5;box-shadow:0 0 10px #08BDA5}.bckgrnd-cbpnk{padding:50px 50px 25px;background-image:url('https://i.servimg.com/u/f77/19/35/98/81/backgr10.jpg')} .dlg-cbpnk{margin: 20px 50px 0px; color:#F0FE26;} #crdts-cbpnk{text-align:center;margin:30px 0px 0px;color:#F0FE26;font-size:12px;font-variant:small-caps;text-shadow:0px 0px 4px #A3FDFD;font-family:'Quicksand',sans-serif}#NU-lnk-cbpnk{color:#F0FE26;text-decoration:none}</style><div class="strct-cbrpnk"><div class="bckgrnd-cbpnk"><img src="https://i.servimg.com/u/f77/19/35/98/81/sombra10.jpg" class="hdr-cbpnk"/><div class="ttl-cbrpnk">Cyberpunk</div><div class="bd-cbrpnk"> 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-cbpnk">- 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-cbpnk">@elfyqchan - <a id="NU-lnk-cbpnk" href="https://www.never-utopia.com" target="_blank">Never Utopia</a></div></div></div>

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.



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.



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

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>