• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Mountain Siren's Code Dump --Accepting!

Mountain Siren

Among the Pines
[class name=title] font-weight: bold; font-size: 30pt; letter-spacing: 5px; text-shadow: 0px 0px 2px #e4d1e9; position: relative; bottom: 39px; left: 5px; [/class] [class name=back] margin: auto; width: 300px; height: 300px; font-size: 10pt; background: url('https://images.unsplash.com/photo-1497704628914-8772bb97f450?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1886ee8844a0e5e06d323aa007c96f7c&w=1000&q=80') no-repeat; background-size: 100%; border: 1px solid #000000; [/class] [class name=cont] margin: auto; width: 280px; height: 280px; opacity: 0.27; position: relative; top: -55px; background: #d9c8d5; border: 1px solid #000000; [/class] [class name=cont2] margin: auto; width: 280px; height: 275px; position: relative; bottom: 332px; left: 10px; [/class] [class name=ScrollP] width: 280px; height: 275px; box-sizing: border-box; overflow: hidden; padding: 0px; padding-left: 0px; [/class] [class name=ScrollC] width: 280px; height: 100%; overflow-y: scroll; padding-right: 60px; [/class]
[div class=back][div class=title]Welcome[/div][div class=cont][/div][div class=cont2][div class=ScrollP][div class=ScrollC]
Hello! I just want to say right off the start that everyone in this center has been super duper helpful in understanding how to code pretty things, and maybe with lots and lots and lots and lots of practice I can maybe get on your level. That being said, I needed somewhere public to post my codes so that people would see them and maybe 1. help me out by giving me feedback/criticism/etc, and 2. let me know if they want me to make anything for them because honest to goodness I want all the practice I can get.
So, some things to be said: I don't know that anything is mobile friendly, because I only use my computer to make these things. So if they aren't, I'm sorry! If someone wanted to teach me how, that'd be awesome, but in the meantime, they really only work for sure (I think) on an actual computer. Secondly, if anyone wants to use something, feel free! Just PM me and I can adjust things for you to make it fit your purposes. Third, if anyone likes anything, please let me know! Like it, leave a comment, PM, whatever you want to do. I'm aware that there are MUCH better codes on this forum, so really any validation that I'm not making trash is really appreciated.

Thank you everyone for your consideration! (PS: none of these images are mine)


Requests:
What: Post template, Character Sheet, something else?
Color Scheme: Any images you want in there? Any specific colors?
Style: What kind of aesthetic do you want?
Elements: Any specific elements you want? Tabs, invisible scrolling, accordions, animations, that sort of thing?
[/div][/div][/div][/div]
 
Last edited:
[class name=tabPrac1] width: 410px; height: 450px; margin: auto; background: url('http://static.tumblr.com/dee7c70293ee688fe656fafc418b9f35/csoop8h/URsnsmlhc/tumblr_static_tumblr_static__focused_v3.jpg') no-repeat; background-sizing: 100%; padding: 10px; overflow: hidden; [/class] [class name=tabPrac1back] width: 380px; height: 430px; position: relative; left: 15px; top: 12px; background: white; opacity: 0.4; [/class] [class name=tab] position: relative; bottom: 400px; left: 20px; [/class] [class name=tabCover1] position: relative; bottom: 474px; right: 30px; background: url('http://static.tumblr.com/dee7c70293ee688fe656fafc418b9f35/csoop8h/URsnsmlhc/tumblr_static_tumblr_static__focused_v3.jpg'); width: 430px; height: 90px; pointer-events: none; [/class] [class name=tabCover2] position: relative; left: 25px; top: 18px; background: white; width: 380px; height: 70px; opacity: 0.4; border-bottom: 2px double #000000; [/class] [class name=tabScrollP] width: 380px; height: 360px; box-sizing: border-box; overflow: hidden; padding: 0px; padding-left: 0px; [/class] [class name=tabScrollC] width: 350px; height: 100%; overflow-y: scroll; padding-right: 70px; [/class] [class name=tabName] font-size: 23pt; font-weight: bolder; position: relative; left: 70px; bottom: 41px; color: #22263a; pointer-events: none; [/class] [class name=tabHeight] height: 365px; margin-right: 50px; line-height: 15px; [/class] [div class=tabPrac1][div class=tabPrac1back][/div][div class=tab]
  • [div class=tabHeight][div class=tabScrollP][div class=tabScrollC]This was me attempting to learn how to do invisible scrolling in tabs, so it's not as pretty as I'd like but I thought it was ok for a first try. Again, the background isn't mine. Anyway, each tab is clickable, but I'm not quite sure what I'd want to use it for to be honest.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.
    Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.
    Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.[/div][/div][/div]
[div class=tabCover1][div class=tabCover2][/div][div class=tabName]tab.....tab.....tab.....tab[/div][/div]
[/div][/div]
 
[class name=title] position: relative; bottom: 70px; left: 5px; text-shadow: 0px 0px 3px black; line-height: 15px; font-size: 15pt; letter-spacing: 5px; color: #e1ecf2; [/class] [class name=subtitle] position: relative; left: 70px; bottom: 18px; text-shadow: 0px 0px 3px black; line-height: 15px; font-size: 11pt; letter-spacing: 3px; color: #e1ecf2; [/class] [class name=back2] border: 1px solid black; margin: auto; width: 400px; height: 60px; position: relative; top: 40px; background: url('https://i.imgur.com/3sQ2Jwo.jpg') no-repeat; background-size: 100%; [/class] [class name=back3] width: 400px; height: 60px; position: relative; background: #97c2d0; opacity: 0.23; [/class] [class name=cont] margin: auto; width: 400px; height: 300px; font-size: 10pt; [/class] [class name=ScrollP] width: 400px; height: 300px; box-sizing: border-box; overflow: hidden; padding: 0px; padding-left: 0px; [/class] [class name=ScrollC] width: 400px; height: 100%; overflow-y: scroll; padding-right: 60px; [/class]

[div class=back2][div class=back3][/div][div class=title]CASSIOPEIA ENYEART[/div][div class=subtitle]'Til morning comes, let's tessellate[/div][/div]


[div class=cont][div class=ScrollP][div class=ScrollC]This is my second character post template, and if you couldn't tell, I really like having sort of floating titles, I like having the 3D effect (or at least the layered effect). Image doesn't belong to me.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
[/div][/div][/div]
 

[class name=portraitOne] margin: auto; position: relative; right: 200px; top: 85px; width: 195px; height: 195px; background: url('https://i.imgur.com/ypiPWVG.jpg') no-repeat; background size: 100%; border: 2px solid #830303; border-radius: 50%; [/class] [class name=portraitTwo] margin: auto; position: relative; bottom: 113px; width: 195px; height: 195px; background: url('https://i.imgur.com/CJrm5F7.jpg') no-repeat; background size: 100%; border: 2px solid #830303; border-radius: 50%; [/class] [class name=portraitThree] margin: auto; position: relative; bottom: 313px; left: 200px; width: 195px; height: 195px; background: url('https://i.imgur.com/uJxtGdc.jpg') no-repeat; background size: 100%; border: 2px solid #830303; border-radius: 50%; [/class] [class name=title] font-size: 30pt; color: #000000; text-shadow: 0px 0px 2px #830303; letter-spacing: 5px; margin: auto; position: relative; bottom: 100px; left: 10px; [/class] [class name=subtitle] font-size: 17pt; font-weight: bold; color: #000000; text-shadow: 0px 0px 2px #830303; letter-spacing: 1px; margin: auto; position: relative; top: 53px; left: 120px; [/class] [class name=credit] font-size: 8pt; color: #000000; opacity: 0.2; margin: auto; position: relative; left: 10px; top: 50px; [/class] [class name=cont] margin: auto; width: 603px; height: 250px; font-size: 10pt; [/class] [class name=ScrollP] width: 603px; height: 250px; box-sizing: border-box; overflow: hidden; padding: 0px; padding-left: 5px; [/class] [class name=ScrollC] width: 603px; height: 100%; overflow-y: scroll; padding-right: 60px; [/class]
[div class=portraitOne]
[div class=portraitTwo][/div][div class=portraitThree][/div][/div]
[div class=title]Izaak Stone
[div class=subtitle]Never underestimate the Force of Will[/div][div class=credit](c)Mountain Siren[/div][/div]
no slide
Power
[div class=cont][div class=ScrollP][div class=ScrollC]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
[/div][/div][/div]
History
[div class=cont][div class=ScrollP][div class=ScrollC]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
[/div][/div][/div]
Personality
[div class=cont][div class=ScrollP][div class=ScrollC]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
[/div][/div][/div]
[/div]
 

[class name=portraitOne] margin: auto; position: relative; right: 200px; top: 85px; width: 195px; height: 195px; background: url('https://i.imgur.com/ypiPWVG.jpg') no-repeat; background size: 100%; border: 2px solid #830303; border-radius: 50%; [/class] [class name=portraitTwo] margin: auto; position: relative; bottom: 113px; width: 195px; height: 195px; background: url('https://i.imgur.com/CJrm5F7.jpg') no-repeat; background size: 100%; border: 2px solid #830303; border-radius: 50%; [/class] [class name=portraitThree] margin: auto; position: relative; bottom: 313px; left: 200px; width: 195px; height: 195px; background: url('https://i.imgur.com/uJxtGdc.jpg') no-repeat; background size: 100%; border: 2px solid #830303; border-radius: 50%; [/class] [class name=title] font-size: 30pt; color: #000000; text-shadow: 0px 0px 2px #830303; letter-spacing: 5px; margin: auto; position: relative; bottom: 100px; left: 10px; [/class] [class name=subtitle] font-size: 17pt; font-weight: bold; color: #000000; text-shadow: 0px 0px 2px #830303; letter-spacing: 1px; margin: auto; position: relative; top: 53px; left: 120px; [/class] [class name=credit] font-size: 8pt; color: #000000; opacity: 0.2; margin: auto; position: relative; left: 10px; top: 50px; [/class] [class name=location] margin: auto; position: relative; top: -95px; left: 50px; font-size: 15pt; font-weight: bold; color: #000000; text-shadow: 0px 0px 8px #830303; opacity: 0; transition: opacity 1s ease-in-out; [/class] [class name=location state=hover] opacity: 1; [/class] [class name=with] position: relative; margin-top: auto; margin-bottom: auto; margin-left: auto; margin-right: 275px; top: -125px; left: 275px; font-size: 15pt; font-weight: bold; color: #000000; text-shadow: 0px 0px 8px #830303; opacity: 0; transition: opacity 1s ease-in-out; [/class] [class name=with state=hover] opacity: 1; [/class] [class name=tag] margin-top: auto; margin-left: auto; margin-right: 473px; margin-bottom: -155px; position: relative; top: -155px; left: 473px; font-size: 15pt; font-weight: bold; color: #000000; text-shadow: 0px 0px 8px #830303; opacity: 0; transition: opacity 1s ease-in-out; [/class] [class name=tag state=hover] opacity: 1; [/class] [class name=cont] margin-top: 100px; margin-left: auto; margin-right: auto; margin-bottom: auto; width: 603px; height: 250px; font-size: 10pt; border: 2px solid #830303; position: relative; [/class] [class name=ScrollP] width: 603px; height: 250px; box-sizing: border-box; overflow: hidden; padding: 0px; padding-left: 5px; [/class] [class name=ScrollC] width: 603px; height: 100%; overflow-y: scroll; padding-right: 60px; [/class]
[div class=portraitOne]
[div class=portraitTwo][/div][div class=portraitThree][/div][/div]
[div class=title]Izaak Stone
[div class=subtitle]Never underestimate the Force of Will[/div][div class=credit](c)Mountain Siren[/div][div class=location]LOCATION[/div][div class=with]WITH[/div][div class=tag]TAGS[/div][/div]
[div class=cont][div class=ScrollP][div class=ScrollC] This is the post template to match the CS above, for the same friend to use. The portraits have location/with/tags respectively, and appear when hovered. The text box itself has invisible scrolling because I'm addicted to that. Again, images aren't mine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
[/div][/div][/div]
 
[class name=bannerOne] background: url('https://i.imgur.com/pBSvK5M.jpg') no-repeat; background-size: 100%; margin: auto; width: 700px; height: 100px; border-bottom: 3px double #000000; [/class] [class name=bannerTwo] background: grey; opacity: 0.25; width: 700px; height: 50px; position: relative; top: 25px; margin: auto; [/class] [class name=title] font-size: 20pt; font-weight: bolder; opacity: 0.8; text-align: center; margin: auto; position: relative; bottom: 20px; left: 10px; [/class] [class name=cont] margin: auto; width: 390px; height: 400px; font-size: 10pt; border: 1px solid #000000; position: relative; bottom: 422px; left: 155px; [/class] [class name=ScrollP] width: 400px; height: 400px; box-sizing: border-box; overflow: hidden; padding: 0px; padding-left: 5px; [/class] [class name=ScrollC] width: 400px; height: 100%; overflow-y: scroll; padding-right: 60px; [/class] [class name=portrait] margin: auto; background: url('https://i.imgur.com/FRKrG54.gif') no-repeat; background-size: 100%; border: 1px solid #000000; position: relative; right: 199px; bottom: 20px; width: 300px; height: 400px; [/class] [class name=contTwo] opacity: 0; width: 300px; height: 60px; position: relative; top: 300px; margin: auto; transition: opacity 1s ease-in-out; [/class] [class name=contTwo state=hover] opacity: 1; [/class] [class name=tagBack] margin: auto; background: grey; width: 300px; height: 60px; opacity: 0.4; position: relative; border-top: 2px double #000000; border-bottom: 2px double #000000; [/class] [class name=tags] font-size: 12pt; letter-spacing: 3px; text-align: center; position: relative; top: -65px; margin: auto; color: #000000; text-shadow: 2px 2px 3px #0a0a0a; [/class] [class name=contThree] margin: auto; width: 700px; height: 400px; position: relative; [/class]

[div class=bannerOne][div class=bannerTwo][/div][div class=title]
Cassiopeia Enyeart
[/div][/div]
[div class=contThree][div class=portrait][div class=contTwo][div class=tagBack][/div][div class=tags]LOCATION
WITH
TAGS[/div][/div][/div][div class=cont][div class=ScrollP][div class=ScrollC]Ok, I realize the previous version of this code was terrible on other sized screens, so I rebuilt it from the ground up. It's still very simple, but I like the simple look to it. Hopefully this works on larger screens too. Like before, invisible scrolling because I'm a sucker for that aesthetically, and hovering over the bottom portion of the portrait reveals the location/with/tags. Images aren't mine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
[/div][/div][/div][/div]
 
[class name=bannerOne] margin: auto; background: url('https://i.imgur.com/jvmMcCW.jpg') no-repeat; background-size: 100%; width: 600px; height: 100px; border: 2px double #000000; [/class] [class name=bannerTwo] margin: auto; letter-spacing: 10px; font-size: 30pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; left: 5px; top: 20px; [/class] [class name=bannerTwoO] margin: auto; margin-top: 5px; width: 600px; height: 50px; position: relative; left: 5px; overflow: hidden; [/class] [class name=bannerThree] margin: auto; margin-top: -5px; letter-spacing: 10px; font-size: 30pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; left: 10px; bottom: 24px; [/class] [class name=bannerThreeO] margin: auto; width: 600px; height: 50px; position: relative; top: 5px; left: 5px; overflow: hidden; [/class] [class name=bannerOneA] margin: auto; opacity: 0; position: relative; bottom: 107px; right: 2px; background: url('https://i.imgur.com/jvmMcCW.jpg') no-repeat; background-size: 100%; width: 600px; height: 100px; border: 2px double #000000; transition: opacity 1.25s ease-in-out; [/class] [class name=bannerOneA state=hover] opacity: 1; [/class] [class name=bannerTwoA] margin: auto; text-align: center; letter-spacing: 10px; font-size: 40pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; left: 5px; top: 12px; [/class] [class name=bannerTwoOA] margin: auto; margin-top: 5px; width: 600px; height: 50px; position: relative; left: 5px; overflow: hidden; [/class] [class name=bannerThreeA] margin: auto; text-align: center; margin-top: -15px; letter-spacing: 10px; font-size: 40pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; left: 10px; bottom: 24px; [/class] [class name=bannerThreeOA] margin: auto; width: 600px; height: 50px; position: relative; top: 5px; left: 5px; overflow: hidden; [/class] [class name=tabBack] margin: auto; background: #2c274f; width: 600px; height: 400px; border: 2px double #000000; overflow: hidden; position: relative; bottom: 13px; [/class] [class name=tabCover] pointer-events: none; margin: auto; width: 600px; height: 70px; background: #2c274f; border-bottom: 2px double #000000; position: relative; bottom: 490px; [/class] [class name=tabHeight] margin: auto; width: 600px; height: 400px; [/class] [class name=cont] margin: auto; width: 580px; height: 380px; font-size: 10pt; position: relative; right: 10px; padding-top: 10px; padding-bottom: 8px; [/class] [class name=ScrollP] width: 580px; height: 380px; box-sizing: border-box; overflow: hidden; padding: 0px; [/class] [class name=ScrollC] width: 580px; height: 285px; overflow-y: scroll; padding-right: 80px; color: #cba59e; [/class] [class name=tabNameA] pointer-events: none; margin: auto; position: relative; bottom: 548px; left: 11px; font-weight: bolder; font-size: 20pt; text-shadow: 0px 0px 2px #ffb689; color: #212838; [/class] [class name=tabNameB] pointer-events: none; margin: auto; position: relative; bottom: 584px; left: 189px; font-weight: bolder; font-size: 20pt; text-shadow: 0px 0px 2px #ffb689; color: #212838; [/class] [class name=tabNameC] pointer-events: none; margin: auto; position: relative; bottom: 621px; left: 302px; font-weight: bolder; font-size: 20pt; text-shadow: 0px 0px 2px #ffb689; color: #212838; [/class] [class name=tabNameD] pointer-events: none; margin: auto; position: relative; bottom: 658px; left: 432px; font-weight: bolder; font-size: 20pt; text-shadow: 0px 0px 2px #ffb689; color: #212838; [/class] [class name=portraitA] margin: auto; position: relative; background: url('https://i.imgur.com/Xt33Roz.gif') no-repeat; background-size: 100%; border: 1px solid #000000; border-radius: 50%; width: 200px; height: 200px; [/class] [class name=credit] margin: auto; position: relative; top: 385px; left: 240px; color: #cba59e; font-size: 8pt; opacity: 0.1; [/class]

[div class=bannerOne][div class=bannerTwoO][div class=bannerTwo]Cassiopeia Enyeart[/div][/div][div class=bannerThreeO][div class=bannerThree]Cassiopeia Enyeart[/div][/div][div class=bannerOneA][div class=bannerTwoOA][div class=bannerTwoA]Supernova[/div][/div][div class=bannerThreeOA][div class=bannerThreeA]Supernova[/div][/div][/div][/div]
[div class=tabBack][div class=credit]code (c) Mountain Siren[/div]
  • [div class=tabHeight][div class=cont][div class=ScrollP][div class=ScrollC]
    [div class=portraitA]
    [/div]This is the CS I used for my own character in the same RP as my friend's. I haven't had a chance to check in on a bigger screen, but hopefully it's ok. And by the way, the split font isn't a text effect, I made it myself using two separate divs! Invisible scrolling, tabs, animation in the banner. As usual, images aren't mine.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

    Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
    [/div][/div][/div][/div]
[div class=tabCover][/div][div class=tabNameA]Biography[/div][div class=tabNameB]Power[/div][div class=tabNameC]History[/div][div class=tabNameD]Personality[/div][/div]
 
Last edited:
[class name=cont] width: 700px; height: 700px; margin: auto; margin-bottom: -220px; overflow: hidden; [/class] [class name=back] margin: auto; background: url('https://i.imgur.com/Kf2oToy.jpg') no-repeat; width: 500px; height: 500px; position: relative; border: 2px double #000000; box-shadow: -2px -2px #000000; [/class] [class name=contText] margin: auto; background: #2c274f; border: 2px double #000000; box-shadow: 2px 2px 0px #000000; width: 500px; height: 500px; font-size: 10pt; position: relative; left: 50px; top: 50px; [/class] [class name=ScrollP] width: 500px; height: 500px; box-sizing: border-box; overflow: hidden; padding: 10px; padding-bottom: 20px; [/class] [class name=ScrollC] width: 500px; height: 490px; overflow-y: scroll; padding-right: 80px; color: #cba59e; [/class] [class name=tags] magin: auto; margin-top: 355px; font-size: 20pt; font-weight: bolder; position: relative; right: 110px; bottom: 708px; transform: rotate(270deg); [/class] [class name=titleCont] background: transparent; margin: auto; width: 600px; height: 50px; position: relative; bottom: 505px; left: 58px; [/class] [class name=bannerTwo] margin: auto; letter-spacing: 8px; font-size: 25pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; top: 26px; [/class] [class name=bannerTwoO] margin: auto; width: 600px; height: 50px; position: relative; overflow: hidden; [/class] [class name=bannerThree] margin: auto; letter-spacing: 8px; font-size: 25pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; bottom: 25px; [/class] [class name=bannerThreeO] margin: auto; width: 600px; height: 50px; position: relative; top: 5px; left: 5px; overflow: hidden; [/class] [class name=titleContA] background: url('https://i.imgur.com/Kf2oToy.jpg') no-repeat; margin: auto; text-align: center; width: 500px; height: 45px; position: relative; bottom: 525px; opacity: 0; transition: opacity 1.25s ease-in-out; [/class] [class name=titleContA state=hover] opacity: 1; [/class] [class name=bannerTwoA] margin: auto; letter-spacing: 20px; font-size: 25pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; top: 26px; [/class] [class name=bannerTwoOA] margin: auto; width: 600px; height: 50px; position: relative; bottom: 30px; right: 45px; overflow: hidden; [/class] [class name=bannerThreeA] margin: auto; letter-spacing: 20px; font-size: 25pt; font-weight: bolder; color: #212838; text-shadow: 0px 0px 5px #ffb689; position: relative; bottom: 25px; [/class] [class name=bannerThreeOA] margin: auto; width: 600px; height: 50px; position: relative; top: -25px; right: 40px; overflow: hidden; [/class] [class name=portraitA] margin: auto; position: relative; background: url('https://i.imgur.com/Xt33Roz.gif') no-repeat; background-size: 100%; border: 1px solid #000000; border-radius: 50%; width: 200px; height: 200px; float: right; [/class] [class name=credit] margin: auto; text-align: center; width: 600px; height: 50px; font-size: 8px; position: relative; bottom: 533px; opacity: 0.1; color: #cba59e; [/class]

[div class=cont]
[div class=back][div class=contText][div class=op][div class=ScrollP][div class=ScrollC][div class=portraitA][/div]This is the matching post template for my character's CS. As usual, haven't been able to check it on a larger screen, but I'm hoping it's fine. Not as many elements in the post template, but the big thing for post templates in my opinion is the post content itself anyway. Invisible scrolling, animated name. None of the images are mine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu vel molestie consequat. Aliquam nec risus ut quam dapibus congue id quis magna. Phasellus id dapibus magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis ipsum at elit tristique, nec mollis elit gravida. Nunc vehicula, mauris non aliquet pretium, neque ex blandit nulla, sit amet varius nulla felis at magna. Quisque eget dignissim mi, non rhoncus sem. Aenean volutpat dolor auctor ultrices faucibus. Curabitur congue nulla quis lectus bibendum, eu mollis purus porttitor. Nulla sit amet enim ac arcu porttitor pretium. Praesent luctus, lorem ac sagittis pharetra, diam nunc accumsan nisl, ac rutrum ipsum lectus ut augue. Donec erat tellus, ultrices ut lectus non, semper euismod tortor.

Praesent aliquam, elit vel luctus bibendum, quam sem suscipit libero, vel consequat orci mi ac nibh. Pellentesque bibendum urna eu nulla fringilla finibus non vel felis. Cras nec ipsum sed enim pulvinar faucibus. Ut euismod magna nec metus placerat, quis facilisis mauris facilisis. Aliquam in leo a orci semper dignissim. Mauris sit amet aliquam erat. Donec posuere rutrum nunc a convallis. Vivamus vel egestas mauris, vitae molestie tortor.
[/div][/div][/div][/div][div class=tags]
LOCATION
.
WITH
.
TAGS
[/div]
[/div][/div]
[div class=titleCont][div class=bannerTwoO][div class=bannerTwo]Cassiopeia Enyeart[/div][/div][div class=bannerThreeO][div class=bannerThree]Cassiopeia Enyeart[/div][/div][/div][div class=titleContA][div class=bannerTwoOA][div class=bannerTwoA]Supernova[/div][/div][div class=bannerThreeOA][div class=bannerThreeA]Supernova[/div][/div][/div][div class=credit]code (c) Mountain Siren[/div]
 
[class name=tabPrac1] width: 410px; height: 450px; margin: auto; background: url('http://paperlief.com/images/ocean-water-tumblr-wallpaper-1.jpg') no-repeat; background-sizing: 100%; padding: 10px; overflow: hidden; [/class] [class name=tabPrac1back] width: 380px; height: 430px; position: relative; left: 15px; top: 12px; background: white; opacity: 0.4; [/class] [class name=tab] position: relative; bottom: 400px; left: 20px; [/class] [class name=tabCover1] position: relative; bottom: 474px; right: 30px; background: url('http://paperlief.com/images/ocean-water-tumblr-wallpaper-1.jpg'); width: 430px; height: 90px; pointer-events: none; [/class] [class name=tabCover2] position: relative; left: 25px; top: 18px; background: white; width: 380px; height: 70px; opacity: 0.4; border-bottom: 2px double #000000; [/class] [class name=tabScrollP] width: 380px; height: 360px; box-sizing: border-box; overflow: hidden; padding: 0px; padding-left: 0px; [/class] [class name=tabScrollC] width: 350px; height: 100%; overflow-y: scroll; padding-right: 70px; [/class] [class name=tabName] font-size: 20pt; font-weight: bolder; position: relative; left: 53px; bottom: 41px; color: #22263a; pointer-events: none; [/class] [class name=tabHeight] height: 365px; margin-right: 50px; line-height: 15px; [/class] [class name=portrait] width: 120px; height: 200px; border: 1px double #000000; background: url('https://i.imgur.com/kUgFiL4.jpg') no-repeat; background size: 100%; float: right; [/class] [div class=tabPrac1][div class=tabPrac1back][/div][div class=tab]
  • [div class=tabHeight][div class=tabScrollP][div class=tabScrollC] Here's an example of how the floral tabbed layout a couple posts up could be used as something and modified to fit those needs. For me, I needed to modify it to fit the format of a character sheet, and the aesthetic had to be changed to something aquatic for my siren character. As always, images aren't mine, and feedback is always appreciated!

    Name: Cassiopeia
    Species: Siren
    Sex: Female
    Age: 322
    DOB: unknown, but she likes to say it was October 31st
    Sexuality: Bisexual
    Height: Human: 5'5" | Siren: 6'3"
    Weight: Human: 120lb | Siren: 180lb
    Occupation: N/A
    Religion: Agnostic

    Some History on Sirens
    Sirens are one of the few creatures that, while previously unknown, have slipped out of the grasp of the humans. There are hunters, of course, but no hunter has become intelligent enough to seek out a siren when they come onto land. Clearly a siren under or in water, sirens have the ability to shapeshift into human forms completely free of scales, tails, and fins. The youngest sirens need to learn how to walk before they can become competent at disguising themselves as humans, but that is usually done on abandoned beaches, away from the possible danger of humans, and always in pairs. There is also a common misconception that sirens eat the humans they take: while this isn't true, it's not necessarily wrong, either. In the same way that humans eat food to replenish their energy and keep their bodies going, sirens must consume a human's soul to keep themselves from dying. If a siren can't or refuses to do so, they become seafoam as their body shuts down, unable to maintain itself. Unlike humans, however, sirens only need to do this every six months at a minimum, though there are some that enjoy the process and do it much more often, as often as they can. [/div][/div][/div]
[div class=tabCover1][div class=tabCover2][/div][div class=tabName]bio....looks....psyche....sample[/div][/div]
[/div][/div]
 
What: character sheet ~
Color Scheme: something more pastel? doesn't really matter.
Style: soft aesthetics
Elements: tabs and invisible scrolls, i would also like a few places for pictures.
 
What: Character Sheet (I have my own sheet in plain text, if it needs to be sent I can certainly send it.)
Color Scheme: Greys, blacks, and blues
Style: Vintage Grunge
Elements: Definitely tabs

(If it could be made mobile friendly I would really appreciate it, if not it's quite okay!)
 
Hmm... This is incredibly neat. Might add this to my reusable codes thing. I like to reuse good codes for different roleplays

What: Character Sheet
Colour Scheme: Blue and black/grey.
Style: Futuristic; think holographic. Files. That sort of thing.
Elements: Tabs. Invisible scrolling. Definitely pictures.

Something fit for superheroes.
 

Users who are viewing this thread

Back
Top