• 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.

Accepting Requests cathartic.

→ name: evelina jamieson (if possible, could this be changeable? so i can use it for several rps? thanks!)
→ code type: ic
→ theme inspo: here and here and here and here
→ colour palette: pastel colours (baby blues, pale pinks, lavender purples), grey, white, black (minimal black)
→ fonts: for the ic text, verdana is perfect. for titles, i love capital letters (a font like 'playfair display' is great)
→ images: image; i'd love the single image off to the left of the ic textbox
→ tabs/buttons: would it at all be possible to have a cute little button/tab that shows a scroll box for location/interacts/mentions/tags? if not, no worries!
→ other: i would love the code to be laid out similar to the ic for starboy, with the image to the left, a space for the location/interacts/mentions/tags below the image, and the ic text off to the right of those. a spot for a little quote/mood statement would also be amazing if you can fit it in anywhere! as for the size of the ic, i like the size of starboy's codes!
→ deadline: no deadline! there's no rush on this. thanks again!
 
delivery.
Feyrie Feyrie here's your code! i went ahead and chose a font for the title and stuff and chose the second colour scheme you gave me! you can find the code here. hope you like it!


[class=tag] display: inline; margin-top: 10px; padding: 0px 0px 2px 4px; color: #085f63; font-size: 12px; font-family: Playfair Display; [/class] [class name=tab] box-sizing: border-box; width: 30px; height: 30px; text-align: center; font-family: Arial; font-size: 10px; color: #333; margin: 1px; padding-top: 7px; background: #f7f7f7; border-radius: 5px; border: 1px solid #e6e6e6; transition: all .5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedtab] box-sizing: border-box; width: 30px; height: 30px; text-align: center; font-family: Arial; font-size: 10px; color: #fff; margin: 1px; padding-top: 7px; background: #49beb7; border-radius: 5px; border: 1px solid #49beb7; transition: all .5s ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] border: 1px solid #49beb7; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=titleslide] font-family: Times New Roman; text-align: center; font-size: 30px; box-sizing: border-box; [/class] [script class=tab on=click] hide tabcontents hide titleslide removeClass selectedtab tab set currentTab (getText) if (eq ${currentTab} 01) (addClass selectedtab tabone) if (eq ${currentTab} 02) (addClass selectedtab tabtwo) if (eq ${currentTab} 03) (addClass selectedtab tabthree) if (eq ${currentTab} 04) (addClass selectedtab tabfour) if (eq ${currentTab} 01) (show tabcontentsone) if (eq ${currentTab} 02) (show tabcontentstwo) if (eq ${currentTab} 03) (show tabcontentsthree) if (eq ${currentTab} 04) (show tabcontentsfour) [/script]
the saint
[div class="tab tabone"]01
[div class="tab tabtwo"]02
[div class="tab tabthree"]03[/div] [div class="tab tabfour"]04[/div] [/div][/div]
character name
you could maybe put a quote here, if you like.
[div class="tabcontents tabcontentsone"]
[div class=tag]tag.
info.
[div class=tag]tag.
info.
[div class=tag]tag.
info.
[div class=tag]tag.
info.
[div class=tag]tag.
info.
[div class=tag]tag.[/div] info. [/div]
[/div][/div] [div class="tabcontents tabcontentstwo" style="display: none;"]
[div class=tag]tag.
info.
[div class=tag]tag.
info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info. [/div]
[/div][/div] [div class="tabcontents tabcontentsthree" style="display: none;"]
[div class=tag]tag.
info.
[div class=tag]tag.
info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info. [/div]
[/div][/div] [div class="tabcontents tabcontentsfour" style="display: none;"]
[div class=tag]tag.
info.
[div class=tag]tag.
info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info.
[div class=tag]tag.[/div] info. [/div]
[/div][/div][/div] [/div] [/div]
coded by luna.
 
delivery.
yousmelldead yousmelldead here's your code! feel free to change the colours and fonts if you like, but the font change may alter the positioning of things, so be careful with it. you can find the code here. hope you like it!


role here
maybe a quote here, or something.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet scelerisque pellentesque. Suspendisse ultricies urna euismod, porta ligula eu, venenatis erat. In posuere massa ac sapien interdum dapibus. Fusce porta velit et malesuada sodales. Nulla aliquet vestibulum interdum. Aliquam porttitor dolor a mi pulvinar aliquet. Etiam mollis, leo at mattis consectetur, sem enim luctus lectus, eget tristique ligula magna et lorem. Sed accumsan, nunc in accumsan condimentum, neque magna posuere libero, nec ultrices ex erat id nibh. Nam lacinia purus vitae ligula rutrum pellentesque. Quisque vestibulum vestibulum nisi, sed scelerisque tortor. Donec tincidunt placerat odio. Ut convallis non risus quis posuere.

Sed id suscipit enim. Quisque turpis velit, lobortis a lectus quis, pellentesque vulputate ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sodales urna consectetur dui pharetra vulputate. Aenean vitae magna mollis, bibendum dui ut, tincidunt massa. Vestibulum at metus metus. Donec sagittis ultricies placerat.
put your tags here || put your location here || put your mood/anything you want here cause this is scrollable
olive brook
coded by luna.
 
luna. said:
delivery.
yousmelldead yousmelldead here's your code! feel free to change the colours and fonts if you like, but the font change may alter the positioning of things, so be careful with it. you can find the code here. hope you like it!


role here
maybe a quote here, or something.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet scelerisque pellentesque. Suspendisse ultricies urna euismod, porta ligula eu, venenatis erat. In posuere massa ac sapien interdum dapibus. Fusce porta velit et malesuada sodales. Nulla aliquet vestibulum interdum. Aliquam porttitor dolor a mi pulvinar aliquet. Etiam mollis, leo at mattis consectetur, sem enim luctus lectus, eget tristique ligula magna et lorem. Sed accumsan, nunc in accumsan condimentum, neque magna posuere libero, nec ultrices ex erat id nibh. Nam lacinia purus vitae ligula rutrum pellentesque. Quisque vestibulum vestibulum nisi, sed scelerisque tortor. Donec tincidunt placerat odio. Ut convallis non risus quis posuere.

Sed id suscipit enim. Quisque turpis velit, lobortis a lectus quis, pellentesque vulputate ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sodales urna consectetur dui pharetra vulputate. Aenean vitae magna mollis, bibendum dui ut, tincidunt massa. Vestibulum at metus metus. Donec sagittis ultricies placerat.
put your tags here || put your location here || put your mood/anything you want here cause this is scrollable
olive brook
coded by luna.
Click to expand...
Oh my god I love it! Thank you so much!
 
delivery.
sereiin sereiin here's your code! i went with pastel purple as the main accent and i added a small button for tags/etc. feel free to change the colours and the fonts. if you need help changing the name of the tab, let me know! you can find the code here. hope you like it! ( oh! you'll also need to use [br][/br] in between paragraphs for paragraph/line breaks. )


[class=tag] display: inline; margin-top: 10px; padding: 0px 4px 2px 4px; background: #bfaae3; color: #fff; [/class] [class name=tab] box-sizing: border-box; margin-top: 10px; border: 1px solid #bfaae3; text-align: center; font-family: Montserrat; font-size: 10px; color: #bfaae3; padding: 4px; letter-spacing: 1px; text-transform: uppercase; transition: all .5s ease-in-out; opacity: .4; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedtab] box-sizing: border-box; margin-top: 10px; border: 1px solid #bfaae3; background: #bfaae3; text-align: center; font-family: Montserrat; font-size: 10px; color: #fff; padding: 4px; letter-spacing: 1px; text-transform: uppercase; transition: all .5s ease-in-out; opacity: 1; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] opacity: 1; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab on=click] hide tabcontents hide titleslide removeClass selectedtab tab set currentTab (getText) if (eq ${currentTab} tags) (addClass selectedtab tab) if (eq ${currentTab} tags) (show tabcontents) [/script]
[div class=tab]tags
[div class="tabcontents" style="display: none;"]
[div class=tag]mood
info.
[div class=tag]location
info.
[div class=tag]tags
info.
write as much as you want bc this is scrollable. [/div] [/div] [/div]
evelina jamieson
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet interdum est. Fusce malesuada feugiat enim, in dapibus urna tincidunt vitae. Curabitur fermentum euismod eleifend. Praesent blandit enim sed elementum sodales. Praesent scelerisque nisl dignissim feugiat scelerisque. Sed aliquam, enim id gravida vehicula, sapien eros suscipit neque, sed pretium massa nisl et dui. Aliquam ultricies aliquet tortor sit amet laoreet. Maecenas nec faucibus mauris.

Etiam eu sem non nunc posuere luctus non id libero. Nam mauris odio, blandit non vestibulum a, condimentum ut enim. Quisque malesuada libero a urna dignissim sodales. Ut sit amet sapien elit. Aliquam vestibulum lectus non risus iaculis maximus. Vivamus quis orci sit amet magna faucibus venenatis. Nulla facilisi. Aenean semper diam a lacus tincidunt viverra. Nam ultricies nulla nec mattis condimentum. In sollicitudin risus sit amet magna ornare imperdiet. Suspendisse potenti. Suspendisse massa eros, sollicitudin vel porttitor vitae, dapibus congue tortor. Duis in rutrum turpis. Vestibulum feugiat neque in quam tristique, ac eleifend tellus dapibus. Fusce pellentesque nunc quis sem fermentum, sit amet commodo magna pharetra.
[/div] [/div]
coded by luna.
 
→ name: olive brooks
→ code type: cs
→ theme inspo: this or this orthisssss
→ colour palette: here or hereeee
→ fonts: maybe some cursive? cutesy?
→ images: here you go! !
→ tabs/buttons: three tabs/buttons please! basic, persona, bio
→ deadline: no deadline love!
 
luna. said:
delivery.
sereiin sereiin here's your code! i went with pastel purple as the main accent and i added a small button for tags/etc. feel free to change the colours and the fonts. if you need help changing the name of the tab, let me know! you can find the code here. hope you like it! ( oh! you'll also need to use [br][/br] in between paragraphs for paragraph/line breaks. )


Click to expand...
i absolutely adore it, oh my goodness. it's beautiful!! thank you so much for doing that for me < 3
 
→ name: 'Those of Air'
→ code type: Group RP Interest Check !
→ code size: I'd say pretty large, so possibly filling the entire page? Whatever feels right to you, just on the bigger end!
→ theme inspo: click! (Also, I have a Pinterest board with the mood, if that'll help!
→ colour palette: this or this!
→ fonts: default RPN font, size 3/4 for the body! (Depending on how big the code ends up being.)
→ images: For the main image, this one! Then, if possible on one of the tabs, having around just eight or so image-placeholders? I'm not too sure how to phrase it, but it would be for roles in the RP. I've seen it a few times in some group interest checks, so I can provide some examples if needed.
→ tabs/buttons: Just four tabs, each labelled with their respective numbers.
→ other: It's for an almost mythical-type RP, including fae and other spooky stuff. So just in general an almost dark-whimsical theme? Probably a bit difficult to pull off, but that's the vibe I was going for!
→ deadline: No rush!
 
I'ma gonna try this

→ name: I'm gonna be real, I don't have a name yet; but can it be changeable?
→ code type: character sheet! (for our 1x1 hue hue)
→ code size: small and centered if you please < 3
→ theme inspo: one word--YOU
→ colour palette: how about this? (highly unlikely I'd change this)
→ fonts: How about RPN default size 3 (I got into the tiny words aesthetic), but with headers in Gochi Hand?
→ images: unsure what I want to include, but how about one main image, and then each tab has three little images lining the top or side (whichever you think looks coolest)
→ tabs/buttons: how about 5? headings: General, Appearance, Persona, Background, and Powers/Abilities--and I hope I read this right, but I do want different images in each tab (that I still don't know what they'll be, but...)
→ other: under the main image for the code, can there be space for a quote? and can there be quote spaces in each tab? so a total of about six quote spaces in all?
→ deadline: whenever you want, I can wait <3
 
AnimeGenork said:
I'ma gonna try this

→ name: I'm gonna be real, I don't have a name yet; but can it be changeable?
→ code type: character sheet! (for our 1x1 hue hue)
→ code size: small and centered if you please < 3
→ theme inspo: one word--YOU
→ colour palette: how about this? (highly unlikely I'd change this)
→ fonts: How about RPN default size 3 (I got into the tiny words aesthetic), but with headers in Gochi Hand?
→ images: unsure what I want to include, but how about one main image, and then each tab has three little images lining the top or side (whichever you think looks coolest)
→ tabs/buttons: how about 5? headings: General, Appearance, Persona, Background, and Powers/Abilities--and I hope I read this right, but I do want different images in each tab (that I still don't know what they'll be, but...)
→ other: under the main image for the code, can there be space for a quote? and can there be quote spaces in each tab? so a total of about six quote spaces in all?
→ deadline: whenever you want, I can wait <3
Click to expand...
hi! could you maybe link some tumblr themes for inspo please?
 
AnimeGenork said:
And this is where I'm honest again--I don't go on tumblr much, so I don't actually know what you mean? ><
Click to expand...
basically, if you google search tumblr themhunter it'll take you to a lot of pages with tumblr themes. a lot of the layouts can be used for coding inspiration!
 
delivery.
yousmelldead yousmelldead here's your code! feel free to change the colours and the names of the tab if you want, though changing the names may alter the size/shape of the tabs. you can find the code here. hope you like it! ( oh! you'll also need to use [br][/br] in between paragraphs for paragraph/line breaks. )


[class=tag] display: inline; padding: 0px 4px 2px 4px; margin-top: 10px; background: #ddb6c6; color: #fff; [/class] [class=tab] box-sizing: border-box; margin-top: 10px; display: inline-block; border-radius: 10px; border: 2px solid #fff; padding: 15px; background: #fff; color: #ddb6c6; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 12px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] box-sizing: border-box; margin-top: 10px; padding: 15px; border-radius: 10px; border: 2px solid #fff; background: #ddb6c6; color: #fff; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 12px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] border: 2px solid #ddb6c6; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedTab state=hover] border: 2px solid #fff; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .5s; width: 380px; background: #fff; color: #000; height: 300px; box-sizing: border-box; [/class] [class=show] opacity: 1; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=tab2 on=click] addClass show tabContents2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=tab3 on=click] addClass show tabContents3 removeClass show tabContents2 removeClass show tabContents1 removeClass show tabContents4 addClass selectedTab tab3 removeClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab4 [/script] [script class=tab4 on=click] addClass show tabContents4 removeClass show tabContents2 removeClass show tabContents1 removeClass show tabContents3 addClass selectedTab tab4 removeClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 [/script]
[div class="tab tab1"]01
[div class="tab tab2"]02
[div class="tab tab3"]03
[/div]
[div class="tabContents tabContents4 show"]
olive brooks
"some quote maybe."
[div class="tabContents tabContents1"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info. [/div] [/div] [div class="tabContents tabContents2"]
[div class=tag]height.
info.
[div class=tag]weight.[/div] info.
[div class=tag]appearance.[/div] info.
[div class=tag]features.[/div] info.
[div class=tag]ailments.[/div] info. [/div] [/div] [div class="tabContents tabContents3"]
[div class=tag]persona.
info.
[div class=tag]likes.[/div] info.
[div class=tag]dislikes.[/div] info.
[div class=tag]history.[/div] info.
[div class=tag]misc.[/div] info. [/div] [/div] [/div][/div] [/div] [/div]
coded by luna.
 
Brookflower said:
→ name: 'Those of Air'
→ code type: Group RP Interest Check !
→ code size: I'd say pretty large, so possibly filling the entire page? Whatever feels right to you, just on the bigger end!
→ theme inspo: click! (Also, I have a Pinterest board with the mood, if that'll help!
→ colour palette: this or this!
→ fonts: default RPN font, size 3/4 for the body! (Depending on how big the code ends up being.)
→ images: For the main image, this one! Then, if possible on one of the tabs, having around just eight or so image-placeholders? I'm not too sure how to phrase it, but it would be for roles in the RP. I've seen it a few times in some group interest checks, so I can provide some examples if needed.
→ tabs/buttons: Just four tabs, each labelled with their respective numbers.
→ other: It's for an almost mythical-type RP, including fae and other spooky stuff. So just in general an almost dark-whimsical theme? Probably a bit difficult to pull off, but that's the vibe I was going for!
→ deadline: No rush!
Click to expand...
hey love! i tried doing your request but unfortunately, i think i'm a little low on inspo for it and i'm not quite satisfied with anything i made, so i might have to decline your request. sorry!
 
luna. said:
delivery.
yousmelldead yousmelldead here's your code! feel free to change the colours and the names of the tab if you want, though changing the names may alter the size/shape of the tabs. you can find the code here. hope you like it! ( oh! you'll also need to use [br][/br] in between paragraphs for paragraph/line breaks. )


[class=tag] display: inline; padding: 0px 4px 2px 4px; margin-top: 10px; background: #ddb6c6; color: #fff; [/class] [class=tab] box-sizing: border-box; margin-top: 10px; display: inline-block; border-radius: 10px; border: 2px solid #fff; padding: 15px; background: #fff; color: #ddb6c6; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 12px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] box-sizing: border-box; margin-top: 10px; padding: 15px; border-radius: 10px; border: 2px solid #fff; background: #ddb6c6; color: #fff; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 12px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] border: 2px solid #ddb6c6; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=selectedTab state=hover] border: 2px solid #fff; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .5s; width: 380px; background: #fff; color: #000; height: 300px; box-sizing: border-box; [/class] [class=show] opacity: 1; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=tab2 on=click] addClass show tabContents2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=tab3 on=click] addClass show tabContents3 removeClass show tabContents2 removeClass show tabContents1 removeClass show tabContents4 addClass selectedTab tab3 removeClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab4 [/script] [script class=tab4 on=click] addClass show tabContents4 removeClass show tabContents2 removeClass show tabContents1 removeClass show tabContents3 addClass selectedTab tab4 removeClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 [/script]
[div class="tab tab1"]01
[div class="tab tab2"]02
[div class="tab tab3"]03
[/div]
[div class="tabContents tabContents4 show"]
olive brooks
"some quote maybe."
[div class="tabContents tabContents1"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info. [/div] [/div] [div class="tabContents tabContents2"]
[div class=tag]height.
info.
[div class=tag]weight.[/div] info.
[div class=tag]appearance.[/div] info.
[div class=tag]features.[/div] info.
[div class=tag]ailments.[/div] info. [/div] [/div] [div class="tabContents tabContents3"]
[div class=tag]persona.
info.
[div class=tag]likes.[/div] info.
[div class=tag]dislikes.[/div] info.
[div class=tag]history.[/div] info.
[div class=tag]misc.[/div] info. [/div] [/div] [/div][/div] [/div] [/div]
coded by luna.
Click to expand...
luna, you are a literal goddess! thank you so much!
 
delivery.
AnimeGenork AnimeGenork here's your code! i tried to incorporate a different code that changes under the main image for each tab. feel free to change the colours and the colour gradients (if you need help, just let me know!). pastebin wasn't working so the code is placed below. hope you like it! ( oh! you'll also need to use [br][/br] in between paragraphs for paragraph/line breaks. ) ( also, apologies bc it's a looong and slightly complicated code. )


[class=tag] display: inline; padding: 0px 4px 3px 4px; margin-top: 10px; background: linear-gradient(to right, #8bbabb, #c7f0db); color: #fff; [/class] [class=name] font-size: 20px; text-align: left; font-family: Raleway; position: absolute; transition: all .5s; background: linear-gradient(to right, #8bbabb, #c7f0db); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; color: #000; padding: 1px; [/class] [class=tab] box-sizing: border-box; display: inline-block; border-radius: 5px; padding: 0px 6px 0px 6px; border: 1px solid #f3f3f3; margin-left: 2px; color: #bbb; background: #f3f3f3; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 10px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] box-sizing: border-box; display: inline-block; border-radius: 5px; border: 1px solid #b1e0d8; margin-left: 2px; color: #fff; background: #b1e0d8; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 10px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] border: 1px solid #b1e0d8; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=homeTab] display: inline-block; box-sizing: border-box; background: #f4f4f4; width: 25px; height: 25px; border-radius: 5px; font-family: Avenir; color: #bbb; text-align: center; opacity: 0; transition: 0.5s; font-size: 15px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=homeTab state=hover] color: #b1e0d8; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .5s; width: 365px; font-size: 10px; line-height: 26px; color: #000; height: 269px; box-sizing: border-box; [/class] [class=quote] opacity: 0; position: absolute; transition: .5s; [/class] [class=show] opacity: 1; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents1 addClass show name1 addClass show homeTab addClass show quote1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass show tabContents6 removeClass show name5 removeClass show name2 removeClass show name3 removeClass show name4 removeClass show name6 removeClass show quote2 removeClass show quote5 removeClass show quote3 removeClass show quote4 removeClass show quote6 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab2 on=click] addClass show tabContents2 addClass show name2 addClass show homeTab addClass show quote2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass show tabContents6 removeClass show name1 removeClass show name5 removeClass show name3 removeClass show name4 removeClass show name6 removeClass show quote1 removeClass show quote5 removeClass show quote3 removeClass show quote4 removeClass show quote6 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab3 on=click] addClass show tabContents3 addClass show name3 addClass show homeTab addClass show quote3 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents4 removeClass show tabContents5 removeClass show tabContents6 removeClass show name1 removeClass show name5 removeClass show name2 removeClass show name4 removeClass show name6 removeClass show quote1 removeClass show quote5 removeClass show quote2 removeClass show quote4 removeClass show quote6 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab4 on=click] addClass show tabContents4 addClass show name4 addClass show homeTab addClass show quote4 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents5 removeClass show tabContents6 removeClass show name1 removeClass show name2 removeClass show name3 removeClass show name5 removeClass show name6 removeClass show quote1 removeClass show quote5 removeClass show quote2 removeClass show quote3 removeClass show quote6 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 [/script] [script class=tab5 on=click] addClass show tabContents5 addClass show name5 addClass show homeTab addClass show quote5 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents6 removeClass show name1 removeClass show name2 removeClass show name3 removeClass show name4 removeClass show name6 removeClass show quote1 removeClass show quote3 removeClass show quote2 removeClass show quote4 removeClass show quote6 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=homeTab on=click] addClass show tabContents6 addClass show name6 addClass show quote6 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass show name1 removeClass show name2 removeClass show name3 removeClass show name4 removeClass show name5 removeClass show homeTab removeClass show quote1 removeClass show quote5 removeClass show quote2 removeClass show quote4 removeClass show quote3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script]
[div class=homeTab]x
[div class="quote quote6 show"]
"some quote could probably come here if you want."
[div class="quote quote1"]
"quote number 1."
[div class="quote quote2"]
"quote number 2."
[div class="quote quote3"]
"quote number 3."
[div class="quote quote4"]
"quote number 4."
[/div] [div class="quote quote5"]
"quote number 5."
[/div] [/div]
[/div]
[div class="name name6 show"]character name
[div class="name name1"]general
[div class="name name2"]appearance
[div class="name name3"]persona[/div] [div class="name name4"]abilities[/div] [div class="name name5"]background[/div][/div]
[div class="tab tab1"]01
[div class="tab tab2"]02[/div] [div class="tab tab3"]03[/div] [div class="tab tab4"]04[/div] [div class="tab tab5"]05[/div] [/div] [/div]
[div class="tabContents tabContents6 show"]
you can put something here, if you want.
[div class="tabContents tabContents1"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info.
[div class=tag]p.o.b.[/div] info.
[div class=tag]ethnicity.[/div] info.
[div class=tag]appearance.[/div] info.
[div class=tag]dist. features.[/div] info.
[div class=tag]ailments.[/div] info.
[div class=tag]face claim.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents2"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents3"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents4"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info.
[div class=tag]p.o.b.[/div] info.
[div class=tag]ethnicity.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents5"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info.
[div class=tag]p.o.b.[/div] info. [/div]
[/div][/div] [/div][/div] [/div] [/div] [/div]
coded by luna.



Code: 
[nobr]

[class=tag]
    display: inline;
    padding: 0px 4px 3px 4px;
    margin-top: 10px;
    background: linear-gradient(to right, #8bbabb, #c7f0db);
    color: #fff;
[/class]

[class=name]
    font-size: 20px;
    text-align: left;
    font-family: Raleway;
    position: absolute;
    transition: all .5s;
    background: linear-gradient(to right, #8bbabb, #c7f0db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    color: #000;
    padding: 1px;
[/class]

[class=tab]
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    padding: 0px 6px 0px 6px;
    border: 1px solid #f3f3f3;
    margin-left: 2px;
    color: #bbb;
    background: #f3f3f3;
    text-align: center;
    transition: 0.5s;
    font-family: Avenir;
    font-size: 10px;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[class=selectedTab]
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #b1e0d8;
    margin-left: 2px;
    color: #fff;
    background: #b1e0d8;
    text-align: center;
    transition: 0.5s;
    font-family: Avenir;
    font-size: 10px;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[class name=tab state=hover]
    border: 1px solid #b1e0d8;
    transition: 0.5s;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[class=homeTab]
    display: inline-block;
    box-sizing: border-box;
    background: #f4f4f4;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    font-family: Avenir;
    color: #bbb;
    text-align: center;
    opacity: 0;
    transition: 0.5s;
    font-size: 15px;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[class name=homeTab state=hover]
    color: #b1e0d8;
    transition: 0.5s;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[class=tabContents]
    position: absolute;
    opacity: 0;
    transition: all .5s;
    width: 365px;
    font-size: 10px;
    line-height: 26px;
    color: #000;
    height: 269px;
    box-sizing: border-box;
[/class]

[class=quote]
    opacity: 0;
    position: absolute;
    transition: .5s;
[/class]

[class=show]
    opacity: 1;
    z-index: 1;
[/class]

[script class=tab1 on=click]
    addClass show tabContents1
    addClass show name1
    addClass show homeTab
    addClass show quote1
    removeClass show tabContents2
    removeClass show tabContents3
    removeClass show tabContents4
    removeClass show tabContents5
    removeClass show tabContents6

    removeClass show name5
    removeClass show name2
    removeClass show name3
    removeClass show name4
    removeClass show name6

    removeClass show quote2
    removeClass show quote5
    removeClass show quote3
    removeClass show quote4
    removeClass show quote6

    addClass selectedTab tab1
    removeClass selectedTab tab2
    removeClass selectedTab tab3
    removeClass selectedTab tab4
    removeClass selectedTab tab5
[/script]


[script class=tab2 on=click]
    addClass show tabContents2
    addClass show name2
    addClass show homeTab
    addClass show quote2
    removeClass show tabContents1
    removeClass show tabContents3
    removeClass show tabContents4
    removeClass show tabContents5
    removeClass show tabContents6

    removeClass show name1
    removeClass show name5
    removeClass show name3
    removeClass show name4
    removeClass show name6

    removeClass show quote1
    removeClass show quote5
    removeClass show quote3
    removeClass show quote4
    removeClass show quote6

    addClass selectedTab tab2
    removeClass selectedTab tab1
    removeClass selectedTab tab3
    removeClass selectedTab tab4
    removeClass selectedTab tab5
[/script]


[script class=tab3 on=click]
    addClass show tabContents3
    addClass show name3
    addClass show homeTab
    addClass show quote3
    removeClass show tabContents1
    removeClass show tabContents2
    removeClass show tabContents4
    removeClass show tabContents5
    removeClass show tabContents6

    removeClass show name1
    removeClass show name5
    removeClass show name2
    removeClass show name4
    removeClass show name6

    removeClass show quote1
    removeClass show quote5
    removeClass show quote2
    removeClass show quote4
    removeClass show quote6

    addClass selectedTab tab3
    removeClass selectedTab tab1
    removeClass selectedTab tab2
    removeClass selectedTab tab4
    removeClass selectedTab tab5
[/script]

[script class=tab4 on=click]
    addClass show tabContents4
    addClass show name4
    addClass show homeTab
    addClass show quote4
    removeClass show tabContents1
    removeClass show tabContents2
    removeClass show tabContents3
    removeClass show tabContents5
    removeClass show tabContents6

    removeClass show name1
    removeClass show name2
    removeClass show name3
    removeClass show name5
    removeClass show name6

    removeClass show quote1
    removeClass show quote5
    removeClass show quote2
    removeClass show quote3
    removeClass show quote6

    addClass selectedTab tab4
    removeClass selectedTab tab1
    removeClass selectedTab tab2
    removeClass selectedTab tab3
    removeClass selectedTab tab5
[/script]

[script class=tab5 on=click]
    addClass show tabContents5
    addClass show name5
    addClass show homeTab
    addClass show quote5
    removeClass show tabContents1
    removeClass show tabContents2
    removeClass show tabContents3
    removeClass show tabContents4
    removeClass show tabContents6

    removeClass show name1
    removeClass show name2
    removeClass show name3
    removeClass show name4
    removeClass show name6

    removeClass show quote1
    removeClass show quote3
    removeClass show quote2
    removeClass show quote4
    removeClass show quote6

    addClass selectedTab tab5
    removeClass selectedTab tab1
    removeClass selectedTab tab2
    removeClass selectedTab tab3
    removeClass selectedTab tab4
[/script]

[script class=homeTab on=click]
    addClass show tabContents6
    addClass show name6
    addClass show quote6
    removeClass show tabContents1
    removeClass show tabContents2
    removeClass show tabContents3
    removeClass show tabContents4
    removeClass show tabContents5

    removeClass show name1
    removeClass show name2
    removeClass show name3
    removeClass show name4
    removeClass show name5
    removeClass show homeTab

    removeClass show quote1
    removeClass show quote5
    removeClass show quote2
    removeClass show quote4
    removeClass show quote3

    removeClass selectedTab tab1
    removeClass selectedTab tab2
    removeClass selectedTab tab3
    removeClass selectedTab tab4
    removeClass selectedTab tab5
[/script]

[div=cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;]

[div=width: 600px; margin: auto;][div=float: right; margin-right: -18px; margin-top: -1px;][div class=homeTab]x[/div][/div][/div]
[div=width: 600px; border-radius: 5px; background: #f4f4f4; box-sizing: border-box; padding: 20px; margin: auto; font-size: 11px; line-height: 22px; text-align: justify; color: #000;]

[div=display: flex; flex-direction: row;]


[div=flex: 1; margin-right: 10px; background: #fff; box-sizing: border-box; border-radius: 4px;]
[div=background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; height: 180px; border-radius: 5px 5px 0px 0px;][/div]
[div=height: 156px; overflow-y: auto; background: #fff; font-size: 10px; border-left: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; border-radius: 0px 0px 5px 5px;]

[div class="quote quote6 show"][div=margin: 15px; background: #fff; width: 150px; height: 125px; box-sizing: border-box; padding-top: 20px; text-align: center; font-family: Raleway; overflow-y: auto; font-size: 12px; color: #000;]"some quote could probably come here if you want."[/div][/div]

[div class="quote quote1"][div=margin: 15px; background: #fff; width: 150px; height: 125px; box-sizing: border-box; padding-top: 20px; text-align: center; font-family: Raleway; overflow-y: auto; font-size: 12px; color: #000;]"quote number 1."[/div][/div]

[div class="quote quote2"][div=margin: 15px; background: #fff; width: 150px; height: 125px; box-sizing: border-box; padding-top: 20px; text-align: center; font-family: Raleway; overflow-y: auto; font-size: 12px; color: #000;]"quote number 2."[/div][/div]

[div class="quote quote3"][div=margin: 15px; background: #fff; width: 150px; height: 125px; box-sizing: border-box; padding-top: 20px; text-align: center; font-family: Raleway; overflow-y: auto; font-size: 12px; color: #000;]"quote number 3."[/div][/div]

[div class="quote quote4"][div=margin: 15px; background: #fff; width: 150px; height: 125px; box-sizing: border-box; padding-top: 20px; text-align: center; font-family: Raleway; overflow-y: auto; font-size: 12px; color: #000;]"quote number 4."[/div][/div]

[div class="quote quote5"][div=margin: 15px; background: #fff; width: 150px; height: 125px; box-sizing: border-box; padding-top: 20px; text-align: center; font-family: Raleway; overflow-y: auto; font-size: 12px; color: #000;]"quote number 5."[/div][/div]

[/div]
[div=height: 20px; width: 20px; background: #fff; transform: rotate(-45deg); margin: auto; margin-top: -165px;][/div][/div]


[div=flex: 2; background: #fff; box-sizing: border-box; border: 1px solid #e6e6e6; border-radius: 5px;]

[div=border-bottom: 1px solid #e6e6e6; padding: 10px; display: flex; flex-direction: row;]
[div=flex: 2;][div class="name name6 show"]character name[/div]
[div class="name name1"]general[/div]
[div class="name name2"]appearance[/div]
[div class="name name3"]persona[/div]
[div class="name name4"]abilities[/div]
[div class="name name5"]background[/div][/div]
[div=flex: 1.6; justify-content: space-evenly;]
[div class="tab tab1"]01[/div]
[div class="tab tab2"]02[/div]
[div class="tab tab3"]03[/div]
[div class="tab tab4"]04[/div]
[div class="tab tab5"]05[/div]
[/div]
[/div]

[div=height: 290px;]

[div class="tabContents tabContents6 show"]
[div=height: 245px; margin: 20px; background: #fff;][div=font-family: Raleway; color: #b1e0d8; font-size: 25px; line-height: 38px; text-align: center; padding-top: 80px;]

you can put something here, if you want.

[/div][/div][/div]


[div class="tabContents tabContents1"]
[div=height: 245px; margin: 20px; background: #fff; display: flex; flex-direction: row;]

[div=flex: 2; margin-right: 10px; overflow-y: auto;]
[div class=tag]name.[/div] info.
[br][/br]
[div class=tag]age.[/div] info.
[br][/br]
[div class=tag]d.o.b.[/div] info.
[br][/br]
[div class=tag]gender.[/div] info.
[br][/br]
[div class=tag]sexuality.[/div] info.
[br][/br]
[div class=tag]p.o.b.[/div] info.
[br][/br]
[div class=tag]ethnicity.[/div] info.
[br][/br]
[div class=tag]appearance.[/div] info.
[br][/br]
[div class=tag]dist. features.[/div] info.
[br][/br]
[div class=tag]ailments.[/div] info.
[br][/br]
[div class=tag]face claim.[/div] info.
[/div]

[div=flex: .55; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div]


[div class="tabContents tabContents2"]
[div=height: 245px; margin: 20px; background: #fff; display: flex; flex-direction: row;]

[div=flex: 2; margin-right: 10px; overflow-y: auto;]
[div class=tag]name.[/div] info.
[br][/br]
[div class=tag]age.[/div] info.
[br][/br]
[div class=tag]d.o.b.[/div] info.
[br][/br]
[div class=tag]gender.[/div] info.
[br][/br]
[div class=tag]sexuality.[/div] info.
[/div]

[div=flex: .55; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div]


[div class="tabContents tabContents3"]
[div=height: 245px; margin: 20px; background: #fff; display: flex; flex-direction: row;]

[div=flex: 2; margin-right: 10px; overflow-y: auto;]
[div class=tag]name.[/div] info.
[br][/br]
[div class=tag]age.[/div] info.
[br][/br]
[div class=tag]d.o.b.[/div] info.
[br][/br]
[div class=tag]gender.[/div] info.
[/div]

[div=flex: .55; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div]


[div class="tabContents tabContents4"]
[div=height: 245px; margin: 20px; background: #fff; display: flex; flex-direction: row;]

[div=flex: 2; margin-right: 10px; overflow-y: auto;]
[div class=tag]name.[/div] info.
[br][/br]
[div class=tag]age.[/div] info.
[br][/br]
[div class=tag]d.o.b.[/div] info.
[br][/br]
[div class=tag]gender.[/div] info.
[br][/br]
[div class=tag]sexuality.[/div] info.
[br][/br]
[div class=tag]p.o.b.[/div] info.
[br][/br]
[div class=tag]ethnicity.[/div] info.
[/div]

[div=flex: .55; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]

[/div][/div]


[div class="tabContents tabContents5"]
[div=height: 245px; margin: 20px; background: #fff; display: flex; flex-direction: row;]

[div=flex: 2; margin-right: 10px; overflow-y: auto;]
[div class=tag]name.[/div] info.
[br][/br]
[div class=tag]age.[/div] info.
[br][/br]
[div class=tag]d.o.b.[/div] info.
[br][/br]
[div class=tag]gender.[/div] info.
[br][/br]
[div class=tag]sexuality.[/div] info.
[br][/br]
[div class=tag]p.o.b.[/div] info.
[/div]

[div=flex: .55; display: flex; flex-direction: column;]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover; margin-bottom: 20px;][/div]
[div=flex: 1; background: url(https://dimensionmill.org/wp-content/uploads/2019/03/square-placeholder.jpg); background-size: cover;][/div]
[/div]


[/div][/div]


[/div][/div]


[/div]
[/div]
[/div]
[div=margin-top: 5px; font-size: 8px; text-align: center;]coded by luna.[/div]
[/nobr]
 
Last edited by a moderator:
luna. said:
delivery.
AnimeGenork AnimeGenork here's your code! i tried to incorporate a different code that changes under the main image for each tab. feel free to change the colours and the colour gradients (if you need help, just let me know!). pastebin wasn't working so the code is placed below. hope you like it! ( oh! you'll also need to use [br][/br] in between paragraphs for paragraph/line breaks. ) ( also, apologies bc it's a looong and slightly complicated code. )


[class=tag] display: inline; padding: 0px 4px 3px 4px; margin-top: 10px; background: linear-gradient(to right, #8bbabb, #c7f0db); color: #fff; [/class] [class=name] font-size: 20px; text-align: left; font-family: Raleway; position: absolute; transition: all .5s; background: linear-gradient(to right, #8bbabb, #c7f0db); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; color: #000; padding: 1px; [/class] [class=tab] box-sizing: border-box; display: inline-block; border-radius: 5px; padding: 0px 6px 0px 6px; border: 1px solid #f3f3f3; margin-left: 2px; color: #bbb; background: #f3f3f3; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 10px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] box-sizing: border-box; display: inline-block; border-radius: 5px; border: 1px solid #b1e0d8; margin-left: 2px; color: #fff; background: #b1e0d8; text-align: center; transition: 0.5s; font-family: Avenir; font-size: 10px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] border: 1px solid #b1e0d8; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=homeTab] display: inline-block; box-sizing: border-box; background: #f4f4f4; width: 25px; height: 25px; border-radius: 5px; font-family: Avenir; color: #bbb; text-align: center; opacity: 0; transition: 0.5s; font-size: 15px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=homeTab state=hover] color: #b1e0d8; transition: 0.5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .5s; width: 365px; font-size: 10px; line-height: 26px; color: #000; height: 269px; box-sizing: border-box; [/class] [class=quote] opacity: 0; position: absolute; transition: .5s; [/class] [class=show] opacity: 1; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents1 addClass show name1 addClass show homeTab addClass show quote1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass show tabContents6 removeClass show name5 removeClass show name2 removeClass show name3 removeClass show name4 removeClass show name6 removeClass show quote2 removeClass show quote5 removeClass show quote3 removeClass show quote4 removeClass show quote6 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab2 on=click] addClass show tabContents2 addClass show name2 addClass show homeTab addClass show quote2 removeClass show tabContents1 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass show tabContents6 removeClass show name1 removeClass show name5 removeClass show name3 removeClass show name4 removeClass show name6 removeClass show quote1 removeClass show quote5 removeClass show quote3 removeClass show quote4 removeClass show quote6 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab3 on=click] addClass show tabContents3 addClass show name3 addClass show homeTab addClass show quote3 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents4 removeClass show tabContents6 removeClass show name1 removeClass show name5 removeClass show name2 removeClass show name4 removeClass show name6 removeClass show quote1 removeClass show quote5 removeClass show quote2 removeClass show quote4 removeClass show quote6 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab4 on=click] addClass show tabContents4 addClass show name4 addClass show homeTab addClass show quote4 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents6 removeClass show name1 removeClass show name2 removeClass show name3 removeClass show name5 removeClass show name6 removeClass show quote1 removeClass show quote5 removeClass show quote2 removeClass show quote3 removeClass show quote6 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 [/script] [script class=tab5 on=click] addClass show tabContents5 addClass show name5 addClass show homeTab addClass show quote5 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents6 removeClass show name1 removeClass show name2 removeClass show name3 removeClass show name4 removeClass show name6 removeClass show quote1 removeClass show quote3 removeClass show quote2 removeClass show quote4 removeClass show quote6 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script] [script class=homeTab on=click] addClass show tabContents6 addClass show name6 addClass show quote6 removeClass show tabContents1 removeClass show tabContents2 removeClass show tabContents3 removeClass show tabContents4 removeClass show tabContents5 removeClass show name1 removeClass show name2 removeClass show name3 removeClass show name4 removeClass show name5 removeClass show homeTab removeClass show quote1 removeClass show quote5 removeClass show quote2 removeClass show quote4 removeClass show quote3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script]
[div class=homeTab]x
[div class="quote quote6 show"]
"some quote could probably come here if you want."
[div class="quote quote1"]
"quote number 1."
[div class="quote quote2"]
"quote number 2."
[div class="quote quote3"]
"quote number 3."
[div class="quote quote4"]
"quote number 4."
[/div] [div class="quote quote5"]
"quote number 5."
[/div] [/div]
[/div]
[div class="name name6 show"]character name
[div class="name name1"]general
[div class="name name2"]appearance
[div class="name name3"]persona[/div] [div class="name name4"]abilities[/div] [div class="name name5"]background[/div][/div]
[div class="tab tab1"]01
[div class="tab tab2"]02[/div] [div class="tab tab3"]03[/div] [div class="tab tab4"]04[/div] [div class="tab tab5"]05[/div] [/div] [/div]
[div class="tabContents tabContents6 show"]
you can put something here, if you want.
[div class="tabContents tabContents1"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info.
[div class=tag]p.o.b.[/div] info.
[div class=tag]ethnicity.[/div] info.
[div class=tag]appearance.[/div] info.
[div class=tag]dist. features.[/div] info.
[div class=tag]ailments.[/div] info.
[div class=tag]face claim.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents2"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents3"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents4"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info.
[div class=tag]p.o.b.[/div] info.
[div class=tag]ethnicity.[/div] info. [/div]
[/div][/div] [div class="tabContents tabContents5"]
[div class=tag]name.
info.
[div class=tag]age.
info.
[div class=tag]d.o.b.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info.
[div class=tag]p.o.b.[/div] info. [/div]
[/div][/div] [/div][/div] [/div] [/div] [/div]
Click to expand...

a;dlfjkalsdkjfalkj;sdlfjasljdf;adjsflkjdkja this is frakking amazing I love it so much
 
hi i came back
→ name: lilianne northwest
→ code type: ic
→ theme inspo: this or this or something similar to the cs works too
→ colour palette: this
→ fonts: default rpn font size 3 for body
→ images: one or two main images preferably on the left side
→ tabs/buttons: none
→ other: a space for location, mood, tags and a spot for the name too
→ deadline: none!
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 3 (members: 0, guests: 3)

Similar threads

Lumpkinz11
Help ISO Simple BBCode Character Sheet
Replies
0
Views
65
Lumpkinz11
Lumpkinz11
Back
Top