• 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 ๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜† โงพ ๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€ ๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜† ๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€ โช๐—ฐ๐—น๐—ผ๐˜€๐—ฒ๐—ฑโซ

[class=image]width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%;[/class] [class=number]width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s;[/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s;[/class] [class name=image state=hover]transition: 1s; filter: grayscale(100%);[/class] [class name=number state=hover]opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5);[/class] [class name=link state=hover]color: #5f53b5; transition: 1s;[/class]
constellation's code
[div class=image][div class=number]
04
Feyrie Feyrie ; you request is complete! i couldn't use the fonts that you asked for as they aren't on google fonts, so i went ahead and used a sans font but feel free to change them if you'd like. if you would like any changes, don't be afraid to private message me! i hope you like it
[/div][/div][/div]

[class=container]margin: auto; height: 400px; width: 450px;[/class] [class=leftborder]position: absolute; height: 400px; width: 55px; background-color: #5f6769; border-top-left-radius: 60px; border-bottom-left-radius: 60px;[/class] [class=homebutton]position: absolute; top: 150px; z-index: 50; background-color: white; height: 80px; width: 80px; border-radius: 100px; border: 15px solid #5f6769; line-height: 77px; font-size: 42px; text-align: center; text-shadow: 2px 2px #719192; color: #3c4245; transition: .5s;[/class] [class=main]position: absolute; margin-left: 55px; height: 400px; width: 345px; background-color: #719192;[/class] [class=tabs]position: absolute; margin-left: 400px; width: 40px; height: 160px; padding: 20px 0; background-color: #5f6769; border-top-right-radius: 25px; border-bottom-right-radius: 25px;[/class] [class=tab]height: 40px; width: 40px; line-height: 37px; color: #ffffff; text-align: center; transition: .5s;[/class] [class=chosentab]font-size: 20px; color: #dfcdc3; transition: .5s;[/class] [class=chosenhome]color: #dfcdc3; transition: .5s;[/class] [class=tape]position: absolute; z-index: 2; width: 100px; height: 20px; top: 40px; left: 45px; background-color: #dfcdc3; opacity: 0.7; transform: rotate(-40deg);[/class] [class=title]position: absolute; margin: 315px 0 0 75px; width: 250px; height: 50px; font-size: 40px; text-transform: uppercase; font-weight: 900; letter-spacing: -2px; color: #dfcdc3; text-shadow: 2px 2px #5f6769;[/class] [class=paper]position: absolute; margin: 30px 0 0 75px; width: 250px; height: 340px; background-color: white;[/class] [class=subtitle]padding: 8px; height: 33px; width: 120px; background-color: #3c4245; position: absolute; z-index: 2; top: 45px; left: 132px; font-size: 25px; line-height: 30px; text-align: center; color: #719192; font-weight: bold; line-height: 30px;[/class] [class=textbox]position: absolute; top: 79px; left: 16px; width: 220px; height: 246px; overflow: hidden; font-size: 12px; text-align: justify; line-height: 15px; padding-right: 5px; color: #3c4245;[/class] [class=scroll]width: calc(100% + 15px); height: 246px; overflow-y: scroll; padding-right: 15px; white-space: pre-line;[/class] [class=heading]font-size: 15px; font-weight: 700; color: #719192; display: inline; text-shadow: 2px 2px #dfcdc3;[/class] [class name=tab state=hover] color: #dfcdc3; font-size: 20px; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=homebutton state=hover] color: #dfcdc3; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab1 on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent1 addClass chosentab removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosenhome homebutton[/script] [script class=tab2 on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 hide tabsContent5 addClass chosentab fadeIn 1000 tabsContent2 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosenhome homebutton[/script] [script class=tab3 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent3 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 removeClass chosenhome homebutton[/script] [script class=tab4 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent5 fadeIn 1000 tabsContent4 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosenhome homebutton[/script] [script class=homebutton on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeIn 1000 tabsContent5 addClass chosenhome removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4[/script]
[div class=container][div class=leftborder][div class="homebutton chosenhome"]
[/div] [div class=main][div class="tabsContent tabsContent5"][div class=tape][/div]
[div class=title]TITLE HERE[/div][/div] [div class="tabsContent tabsContent1" style="display: none;"][div class=subtitle]the plot[/div][div class=paper][div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit. Proin tincidunt tellus sit amet sapien mollis varius. Etiam convallis lectus non ipsum ullamcorper convallis. Morbi eget sapien purus. Vivamus faucibus finibus nulla, sit amet finibus urna hendrerit eu. Pellentesque bibendum tortor suscipit varius condimentum.[/div][/div][/div][/div] [div class="tabsContent tabsContent2" style="display: none;"][div class=subtitle]the rules[/div][div class=paper][div class=textbox][div class=scroll][div class=heading]#1[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. [div class=heading]#2[/div] Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. [div class=heading]#3[/div] Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. [div class=heading]#4[/div] Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit.[/div][/div][/div][/div] [div class="tabsContent tabsContent3" style="display: none;"][div class=subtitle]the lore[/div][div class=paper][div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit. Proin tincidunt tellus sit amet sapien mollis varius. Etiam convallis lectus non ipsum ullamcorper convallis. Morbi eget sapien purus. Vivamus faucibus finibus nulla, sit amet finibus urna hendrerit eu. Pellentesque bibendum tortor suscipit varius condimentum.[/div][/div][/div][/div] [div class="tabsContent tabsContent4" style="display: none;"][div class=subtitle]the roles[/div][div class=paper][div class=textbox][div class=scroll][div class=heading]role here.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. [div class=heading]role here.[/div] Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. [div class=heading]role here.[/div] Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. [div class=heading]role here.[/div] Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit.[/div][/div][/div][/div][/div] [div class=tabs]
[div class="tab tab1"]
[div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div][/div][/div][/div]
coded by constellation constellation .
[/div]
 
constellation said:
[class=image]width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%;[/class] [class=number]width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s;[/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s;[/class] [class name=image state=hover]transition: 1s; filter: grayscale(100%);[/class] [class name=number state=hover]opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5);[/class] [class name=link state=hover]color: #5f53b5; transition: 1s;[/class]
constellation's code
[div class=image][div class=number]
04
Feyrie Feyrie ; you request is complete! i couldn't use the fonts that you asked for as they aren't on google fonts, so i went ahead and used a sans font but feel free to change them if you'd like. if you would like any changes, don't be afraid to private message me! i hope you like it
[/div][/div][/div]

[class=container]margin: auto; height: 400px; width: 450px;[/class] [class=leftborder]position: absolute; height: 400px; width: 55px; background-color: #5f6769; border-top-left-radius: 60px; border-bottom-left-radius: 60px;[/class] [class=homebutton]position: absolute; top: 150px; z-index: 50; background-color: white; height: 80px; width: 80px; border-radius: 100px; border: 15px solid #5f6769; line-height: 77px; font-size: 42px; text-align: center; text-shadow: 2px 2px #719192; color: #3c4245; transition: .5s;[/class] [class=main]position: absolute; margin-left: 55px; height: 400px; width: 345px; background-color: #719192;[/class] [class=tabs]position: absolute; margin-left: 400px; width: 40px; height: 160px; padding: 20px 0; background-color: #5f6769; border-top-right-radius: 25px; border-bottom-right-radius: 25px;[/class] [class=tab]height: 40px; width: 40px; line-height: 37px; color: #ffffff; text-align: center; transition: .5s;[/class] [class=chosentab]font-size: 20px; color: #dfcdc3; transition: .5s;[/class] [class=chosenhome]color: #dfcdc3; transition: .5s;[/class] [class=tape]position: absolute; z-index: 2; width: 100px; height: 20px; top: 40px; left: 45px; background-color: #dfcdc3; opacity: 0.7; transform: rotate(-40deg);[/class] [class=title]position: absolute; margin: 315px 0 0 75px; width: 250px; height: 50px; font-size: 40px; text-transform: uppercase; font-weight: 900; letter-spacing: -2px; color: #dfcdc3; text-shadow: 2px 2px #5f6769;[/class] [class=paper]position: absolute; margin: 30px 0 0 75px; width: 250px; height: 340px; background-color: white;[/class] [class=subtitle]padding: 8px; height: 33px; width: 120px; background-color: #3c4245; position: absolute; z-index: 2; top: 45px; left: 132px; font-size: 25px; line-height: 30px; text-align: center; color: #719192; font-weight: bold; line-height: 30px;[/class] [class=textbox]position: absolute; top: 79px; left: 16px; width: 220px; height: 246px; overflow: hidden; font-size: 12px; text-align: justify; line-height: 15px; padding-right: 5px; color: #3c4245;[/class] [class=scroll]width: calc(100% + 15px); height: 246px; overflow-y: scroll; padding-right: 15px; white-space: pre-line;[/class] [class=heading]font-size: 15px; font-weight: 700; color: #719192; display: inline; text-shadow: 2px 2px #dfcdc3;[/class] [class name=tab state=hover] color: #dfcdc3; font-size: 20px; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=homebutton state=hover] color: #dfcdc3; transition: all .5s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=tab1 on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent1 addClass chosentab removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosenhome homebutton[/script] [script class=tab2 on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 hide tabsContent5 addClass chosentab fadeIn 1000 tabsContent2 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 removeClass chosenhome homebutton[/script] [script class=tab3 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent3 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 removeClass chosenhome homebutton[/script] [script class=tab4 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent5 fadeIn 1000 tabsContent4 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosenhome homebutton[/script] [script class=homebutton on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeIn 1000 tabsContent5 addClass chosenhome removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4[/script]
[div class=container][div class=leftborder][div class="homebutton chosenhome"]
[/div] [div class=main][div class="tabsContent tabsContent5"][div class=tape][/div]
[div class=title]TITLE HERE[/div][/div] [div class="tabsContent tabsContent1" style="display: none;"][div class=subtitle]the plot[/div][div class=paper][div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit. Proin tincidunt tellus sit amet sapien mollis varius. Etiam convallis lectus non ipsum ullamcorper convallis. Morbi eget sapien purus. Vivamus faucibus finibus nulla, sit amet finibus urna hendrerit eu. Pellentesque bibendum tortor suscipit varius condimentum.[/div][/div][/div][/div] [div class="tabsContent tabsContent2" style="display: none;"][div class=subtitle]the rules[/div][div class=paper][div class=textbox][div class=scroll][div class=heading]#1[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. [div class=heading]#2[/div] Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. [div class=heading]#3[/div] Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. [div class=heading]#4[/div] Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit.[/div][/div][/div][/div] [div class="tabsContent tabsContent3" style="display: none;"][div class=subtitle]the lore[/div][div class=paper][div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit. Proin tincidunt tellus sit amet sapien mollis varius. Etiam convallis lectus non ipsum ullamcorper convallis. Morbi eget sapien purus. Vivamus faucibus finibus nulla, sit amet finibus urna hendrerit eu. Pellentesque bibendum tortor suscipit varius condimentum.[/div][/div][/div][/div] [div class="tabsContent tabsContent4" style="display: none;"][div class=subtitle]the roles[/div][div class=paper][div class=textbox][div class=scroll][div class=heading]role here.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec bibendum diam. [div class=heading]role here.[/div] Mauris commodo leo neque, ut placerat nisl tempus vitae. Quisque efficitur enim eget purus elementum eleifend. [div class=heading]role here.[/div] Integer luctus eleifend nibh ac rhoncus. Praesent nec dui gravida, pellentesque quam a, pellentesque turpis. [div class=heading]role here.[/div] Phasellus mollis, erat at ultricies maximus, lectus enim gravida augue, sed cursus purus lorem hendrerit elit.[/div][/div][/div][/div][/div] [div class=tabs]
[div class="tab tab1"]
[div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div][/div][/div][/div]
coded by constellation constellation .
[/div]
Click to expand...
omg!!!! Itโ€™s so pretty!! Thank you so much!!!
I love it :hearteyes::hearteyes:
 
โ†’ code type :: character sheet please!

โ†’ overall size :: medium - semilarge is fine!

โ†’ images :: good sized one in the front? maybe two small ones in each tab?

โ†’ colours :: this is a great palette

โ†’ fonts :: i really love the hoefler text, veranda, or any dainty cursive text

โ†’ any specific details :: ( inspo , inspo , inspo ) i'd like four tabs if possible: basics, looks, persona, bio. all that jazz. other than that, i'm not picky!

โ†’ coder :: either, you both are fantastic!
 
[class=image] width: 150px; height: 150px; background: url(https://i.pinimg.com/564x/ff/01/10/ff01106474b0c488d4671c6cb7699b80.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link2] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link2 state=hover] color: #5f53b5; transition: 1s; [/class]
christy's code
[div class=image][div class=number]
05
erised erised ; here is your code! i managed to stick to your colour palette (as much as i could, haha). i put in icons along with titles for the tabs, but you can remove those if you want to, or even change them if you want to, by google searching fa icons. you can also change the colour scheme if you want to, or any of the fonts used! you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask! click the link in the heading to be taken to the raw code and please remember not to remove the credit. hope you like it!
[/div][/div][/div]
[class=tag] color: #000; padding: 0px 4px 3px 4px; background: #fdf2ee; display: inline; [/class] [class=link] display: inline-block; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; font-size: 9px; font-family: Avenir; padding-top: 5px; color: #999; [/class] [class=tab] box-sizing: border-box; padding-top: 13px; width: 100%; height: 100%; color: #d9ac9c; text-align: center; transition: .7s all ease-in-out; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=heading] font-size: 35px; float: left; font-family: Montserrat-Bold; font-weight: bold; text-transform: lowercase; margin-left: -15px; margin-top: -28px; position: absolute; opacity: 0; transition: .7s all ease-in-out; [/class] [class name=tab state=hover] color: #0e1214; transition: .7s all ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] color: #0e1214; transition: .7s all ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: .7s all ease-in-out; width: 330px; font-size: 11px; line-height: 26px; background: #fff; color: #000; height: 440px; box-sizing: border-box; [/class] [class=show] opacity: 1; z-index: 1; transition: .7s all ease-in-out; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass show heading1 removeClass show heading2 removeClass show heading3 removeClass show heading4 removeClass show heading5 removeClass show heading6 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass show heading2 removeClass show heading1 removeClass show heading3 removeClass show heading4 removeClass show heading5 removeClass show heading6 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass show heading3 removeClass show heading2 removeClass show heading1 removeClass show heading4 removeClass show heading5 removeClass show heading6 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab4 on=click] addClass show tabContents04 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents05 removeClass show tabContents06 addClass show heading4 removeClass show heading2 removeClass show heading3 removeClass show heading1 removeClass show heading5 removeClass show heading6 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab5 on=click] addClass show tabContents05 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents06 addClass show heading5 removeClass show heading2 removeClass show heading3 removeClass show heading4 removeClass show heading1 removeClass show heading6 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab6 [/script] [script class=tab6 on=click] addClass show tabContents06 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass show heading6 removeClass show heading2 removeClass show heading3 removeClass show heading4 removeClass show heading1 removeClass show heading5 addClass selectedTab tab6 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script]
[div class="tab tab1"]
basics
[div class="tab tab2"]
looks
[div class="tab tab3"]
psyche
[div class="tab tab4"]
history
[div class="tab tab5"]
gallery
[div class="tab tab6"]
home
[/div] [/div] [/div]
[div class="heading heading6 show"]character name
[div class="heading heading1"]basics[/div] [div class="heading heading2"]looks[/div] [div class="heading heading3"]psyche[/div] [div class="heading heading4"]history[/div] [div class="heading heading5"]gallery[/div]
[div class="tabContents tabContents06 show"]
[div class="tabContents tabContents01"]
[div class=tag]name
info.
[div class=tag]nickname[/div] info.
[div class=tag]age[/div] info.
[div class=tag]sexuality[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents02"]
[div class=tag]height
info.
[div class=tag]weight[/div] info.
[div class=tag]eyes[/div] info.
[div class=tag]hair[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents03"]
[div class=tag]personality
info.
[div class=tag]likes[/div] info.
[div class=tag]dislikes[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents04"]
[div class=tag]background
info.
[div class=tag]misc[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents05"]
[/div] [/div]
some quote can go here if you want.
[/div] [/div][/div][/div] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div]
 
Last edited:
constellation
says:
yousmelldead yousmelldead ; thank you for requesting! your code will be with you in a couple days, please be patient c: really looking forward to making it hehe
 
constellation said:
constellation
says:
yousmelldead yousmelldead ; thank you for requesting! your code will be with you in a couple days, please be patient c: really looking forward to making it hehe
Click to expand...
take your time love!
i am so excited to see it! thank you again!
 
[class=image]width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%;[/class] [class=number]width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s;[/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s;[/class] [class name=image state=hover]transition: 1s; filter: grayscale(100%);[/class] [class name=number state=hover]opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5);[/class] [class name=link state=hover]color: #5f53b5; transition: 1s;[/class]
constellation's code
[div class=image][div class=number]
06
Ayama Ayama ; your request is complete! i tried to keep it simple, but gave it a little cool touch. i hope you like the crests and colours i used. i also couldn't use the font that you requested as it's not on google fonts, but feel free to change the one i put! please let me know if you want any changes, i'm only a private message away c: i hope you like it
[/div][/div][/div]
[class=container]height: 475px; width: 100%; background-color: #e0e0e0;[/class] [class=title]text-shadow: 0 0 7px black; width: 100%; text-align: center; position: absolute; margin-top: 30px; color: white; font-size: 60px; font-weight: 600;[/class] [class=banner]border-top: 10px solid black; width: 175px; height: 255px; box-sizing: content-box; position: relative; color: white; font-size: 11px; letter-spacing: 0.1em; background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png"); transition: 1s;[/class] [class=triangle]content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-bottom: 15px solid #e0e0e0; border-left: 87.5px solid transparent; border-right: 87.5px solid transparent;[/class] [class=textbox]width: calc(100% - 6px); height: 100%; opacity: 0; color: #fff; transition: 1s; padding: 0 0 0 6px; line-height: 13px; text-align: justify; overflow: hidden; white-space: pre-line;[/class] [class=scroll]width: calc(100% + 10px); height: 237px; overflow-y: scroll; padding-right: 15px;[/class] [class name=banner state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=textbox state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.7); [/class] [div class=container][div class=title]title here[/div]
[div class=banner style="background: #680001;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][div class=triangle][/div][/div] [div class=banner style="background: #013300;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][/div][div class=triangle][/div][/div] [div class=banner style="background: #CF9703;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][/div][div class=triangle][/div][/div] [div class=banner style="background: #002F5D;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][/div][div class=triangle][/div][/div][/div][/div]
coded by constellation constellation .
 
constellation said:
[class=image]width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%;[/class] [class=number]width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s;[/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s;[/class] [class name=image state=hover]transition: 1s; filter: grayscale(100%);[/class] [class name=number state=hover]opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5);[/class] [class name=link state=hover]color: #5f53b5; transition: 1s;[/class]
constellation's code
[div class=image][div class=number]
06
Ayama Ayama ; your request is complete! i tried to keep it simple, but gave it a little cool touch. i hope you like the crests and colours i used. i also couldn't use the font that you requested as it's not on google fonts, but feel free to change the one i put! please let me know if you want any changes, i'm only a private message away c: i hope you like it
[/div][/div][/div]
[class=container]height: 475px; width: 100%; background-color: #e0e0e0;[/class] [class=title]text-shadow: 0 0 7px black; width: 100%; text-align: center; position: absolute; margin-top: 30px; color: white; font-size: 60px; font-weight: 600;[/class] [class=banner]border-top: 10px solid black; width: 175px; height: 255px; box-sizing: content-box; position: relative; color: white; font-size: 11px; letter-spacing: 0.1em; background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png"); transition: 1s;[/class] [class=triangle]content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-bottom: 15px solid #e0e0e0; border-left: 87.5px solid transparent; border-right: 87.5px solid transparent;[/class] [class=textbox]width: calc(100% - 6px); height: 100%; opacity: 0; color: #fff; transition: 1s; padding: 0 0 0 6px; line-height: 13px; text-align: justify; overflow: hidden; white-space: pre-line;[/class] [class=scroll]width: calc(100% + 10px); height: 237px; overflow-y: scroll; padding-right: 15px;[/class] [class name=banner state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=textbox state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.7); [/class] [div class=container][div class=title]title here[/div]
[div class=banner style="background: #680001;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][div class=triangle][/div][/div] [div class=banner style="background: #013300;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][/div][div class=triangle][/div][/div] [div class=banner style="background: #CF9703;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][/div][div class=triangle][/div][/div] [div class=banner style="background: #002F5D;"]
[div class=textbox][div class=scroll]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium, elit a sollicitudin volutpat, ante lectus pellentesque urna, ut consectetur justo ligula eget neque. In in lacinia justo. Nulla bibendum ipsum nec libero pharetra tristique. Etiam sodales viverra egestas. Nulla consequat vitae ipsum id feugiat. Maecenas urna urna, accumsan ullamcorper porta nec, ullamcorper ut sapien. Vestibulum eget placerat nulla, egestas blandit purus.
[/div][/div][div class=triangle][/div][/div][/div][/div]
coded by constellation constellation .
Click to expand...
It's beautiful- thank you so much! >w< ​
 
โ†’ code type: character sheet

โ†’ overall size: medium

โ†’ images: one main photo for the front and two to three images for each tab

โ†’ colours: i adore pastel colours, so any pinks, purples, blues, greys, and whites are good with me! (here & here for some inspo)

โ†’ fonts: pretty, cursive fonts (like dancing script) are my go to for the main title. but i love verdana for in-text fonts and tab titles!

โ†’ any specific details: would it be possible to have both icons and titles for tabs? if not, just icons are great! and i'm not picky on the types of icons so feel free to run wild with that. i'm also totally cool with whatever layout! i would like five tabs if possible: basics, appearance, personality, history, and a home button to return to the "main page" kinda thing (: here's the inspo: one, two, three, four.

โ†’ coder: no preference whatsoever! whoever would like to tackle my request is great with me. thank you! xo
 
Hello again!

โ†’ code type: in character post

โ†’ overall size: medium sounds about right

โ†’ images: one main image with two smaller ones on either side

โ†’ colours: this is cute!

โ†’ fonts: if possible, could the name be in Satisfy and the rest in Avenir?

โ†’ any specific details: okay, so can the three images be at the top with the name/role underneath it, and can there can be a space for a quote below all of that? and then can there be a place for location/that type of stuff on the bottom of it, but not as part of the text space itself? does that make sense? oh lawdy and then, and you don't have to include this, but could the "main image" be a hover that reveals the place where the tags and @s go? I kinda think that'd be cool anyway, I believe that's it!

โ†’ coder: I wanna be fair to both of you, so constellation this time, please! I love both of your work! c:

Thank you so much!
<3
 
constellation
says:
AnimeGenork AnimeGenork ; eeeee thank you for requesting me! i'll get back to you with your request in a couple days, please bare with me c: i'll do my best to create what you specified
 
christy said:
[class=image] width: 150px; height: 150px; background: url(https://i.pinimg.com/564x/ff/01/10/ff01106474b0c488d4671c6cb7699b80.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link2] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link2 state=hover] color: #5f53b5; transition: 1s; [/class]
christy's code
[div class=image][div class=number]
05
erised erised ; here is your code! i managed to stick to your colour palette (as much as i could, haha). i put in icons along with titles for the tabs, but you can remove those if you want to, or even change them if you want to, by google searching fa icons. you can also change the colour scheme if you want to, or any of the fonts used! you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask! click the link in the heading to be taken to the raw code and please remember not to remove the credit. hope you like it!
[/div][/div][/div]
[class=tag] color: #000; padding: 0px 4px 3px 4px; background: #fdf2ee; display: inline; [/class] [class=link] display: inline-block; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; font-size: 9px; font-family: Avenir; padding-top: 5px; color: #999; [/class] [class=tab] box-sizing: border-box; padding-top: 13px; width: 100%; height: 100%; color: #d9ac9c; text-align: center; transition: .7s all ease-in-out; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=heading] font-size: 35px; float: left; font-family: Montserrat-Bold; font-weight: bold; text-transform: lowercase; margin-left: -15px; margin-top: -28px; position: absolute; opacity: 0; transition: .7s all ease-in-out; [/class] [class name=tab state=hover] color: #0e1214; transition: .7s all ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] color: #0e1214; transition: .7s all ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: .7s all ease-in-out; width: 330px; font-size: 11px; line-height: 26px; background: #fff; color: #000; height: 440px; box-sizing: border-box; [/class] [class=show] opacity: 1; z-index: 1; transition: .7s all ease-in-out; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass show heading1 removeClass show heading2 removeClass show heading3 removeClass show heading4 removeClass show heading5 removeClass show heading6 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass show heading2 removeClass show heading1 removeClass show heading3 removeClass show heading4 removeClass show heading5 removeClass show heading6 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 removeClass show tabContents05 removeClass show tabContents06 addClass show heading3 removeClass show heading2 removeClass show heading1 removeClass show heading4 removeClass show heading5 removeClass show heading6 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab4 on=click] addClass show tabContents04 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents05 removeClass show tabContents06 addClass show heading4 removeClass show heading2 removeClass show heading3 removeClass show heading1 removeClass show heading5 removeClass show heading6 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 removeClass selectedTab tab6 [/script] [script class=tab5 on=click] addClass show tabContents05 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents06 addClass show heading5 removeClass show heading2 removeClass show heading3 removeClass show heading4 removeClass show heading1 removeClass show heading6 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab6 [/script] [script class=tab6 on=click] addClass show tabContents06 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass show heading6 removeClass show heading2 removeClass show heading3 removeClass show heading4 removeClass show heading1 removeClass show heading5 addClass selectedTab tab6 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script]
[div class="tab tab1"]
basics
[div class="tab tab2"]
looks
[div class="tab tab3"]
psyche
[div class="tab tab4"]
history
[div class="tab tab5"]
gallery
[div class="tab tab6"]
home
[/div] [/div] [/div]
[div class="heading heading6 show"]character name
[div class="heading heading1"]basics[/div] [div class="heading heading2"]looks[/div] [div class="heading heading3"]psyche[/div] [div class="heading heading4"]history[/div] [div class="heading heading5"]gallery[/div]
[div class="tabContents tabContents06 show"]
[div class="tabContents tabContents01"]
[div class=tag]name
info.
[div class=tag]nickname[/div] info.
[div class=tag]age[/div] info.
[div class=tag]sexuality[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents02"]
[div class=tag]height
info.
[div class=tag]weight[/div] info.
[div class=tag]eyes[/div] info.
[div class=tag]hair[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents03"]
[div class=tag]personality
info.
[div class=tag]likes[/div] info.
[div class=tag]dislikes[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents04"]
[div class=tag]background
info.
[div class=tag]misc[/div] info.
[div class=tag]etc.[/div] info. [/div][/div] [div class="tabContents tabContents05"]
[/div] [/div]
some quote can go here if you want.
[/div] [/div][/div][/div] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div]
Click to expand...

oh my gosh this is amazing!! thank you so so much!
 
christy
says:
sereiin sereiin ; your request is accepted! i'll get started on it soon and get back to you in a bit with a code. please be patient!

thanks for requesting!
 
[class=image]width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%;[/class] [class=number]width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s;[/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s;[/class] [class name=image state=hover]transition: 1s; filter: grayscale(100%);[/class] [class name=number state=hover]opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5);[/class] [class name=link state=hover]color: #5f53b5; transition: 1s;[/class]
constellation's code
[div class=image][div class=number]
07
yousmelldead yousmelldead ; you request is complete! thank you for being patient. i couldn't use any of the fonts that you recommended as they aren't on google fonts but i went ahead and used one that looks similar to hoefler for the header and tabs. but, feel free to change any of them or the colours! c: i hope you like it and please don't remove the credit
[/div][/div][/div]
[class=container]height: 350px; width: 450px; background-color: #F5EDE2; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(129, 130, 132,.7);[/class] [class=tabs]position: absolute; top: 0; right: 0; width: 150px; height: 350px;[/class] [class=tab]display: inline-block; position: relative; left: 40px; width: 90px; height: 40px; border-radius: 10px; background-color: #F5EDE2; box-shadow: 0px 0px 4px 0px rgba(129, 130, 132,.7); line-height: 15px; text-align: center; color: #A87D8E; font-size: 20px; line-height: 36px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class=line]position: relative; margin-left: -40px; width: 40px; height: 2px; background-color: #818284; opacity: 0.7; top: 19px;[/class] [class=slab]position: absolute; left: 2px; top: 2px; z-index: 50; background-color: #F5EDE2; height: 36px; width: 87px; font-size: 15px; text-transform: uppercase; text-align: center; line-height: 36px; font-weight: 500; letter-spacing: 1px;[/class] [class=title]position: absolute; bottom: 5px; right: 185px; font-size: 50px; text-transform: uppercase; font-weight: 900; letter-spacing: -2px; color: #B88B85; text-shadow: 2px 2px #A87D8E;[/class] [class=textbox]padding: 10px; position: absolute; top: 30px; left: 190px; height: 270px; width: 210px; border-radius: 10px; font-size: 12px; background-color: white; overflow: hidden; padding-right: 5px; text-align: justify;[/class] [class=scroll]width: calc(100% + 12px); height: 270px; overflow-y: scroll; padding-right: 15px; white-space: pre-line; color: #948187;[/class] [class=tag]display: inline-block; line-height: 19px; height: 21px; padding-left: 3px; padding-right: 3px; background: #948187; color: #fff;[/class] [script class=tab1 on=mouseenter] fadeIn 500 slab1 hide slab2 hide slab3 hide slab4 hide slab5 [/script] [script class=tab1 on=mouseleave] fadeOut 500 slab1 [/script] [script class=tab2 on=mouseenter] fadeIn 500 slab2 hide slab1 hide slab3 hide slab4 hide slab5 [/script] [script class=tab2 on=mouseleave] fadeOut 500 slab2 [/script] [script class=tab3 on=mouseenter] fadeIn 500 slab3 hide slab1 hide slab2 hide slab4 hide slab5 [/script] [script class=tab3 on=mouseleave] fadeOut 500 slab3 [/script] [script class=tab4 on=mouseenter] fadeIn 500 slab4 hide slab1 hide slab2 hide slab3 hide slab5 [/script] [script class=tab4 on=mouseleave] fadeOut 500 slab4 [/script] [script class=tab5 on=mouseenter] fadeIn 500 slab5 hide slab1 hide slab2 hide slab3 hide slab4 [/script] [script class=tab5 on=mouseleave] fadeOut 500 slab5 [/script] [script class=tab1 on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent1[/script] [script class=tab2 on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent2[/script] [script class=tab3 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent3[/script] [script class=tab4 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent5 fadeIn 1000 tabsContent4[/script] [script class=tab5 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeIn 1000 tabsContent5[/script]
[div class=container][div class="tabsContent tabsContent5"]
[div class=title]name or role
[div class="tabsContent tabsContent1" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam in nisl consectetur, semper turpis iaculis, aliquam mauris. aenean porta cursus purus, vitae maximus ex. duis nibh, condimentum vitae ante eu, faucibus vulputate felis. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div] [div class="tabsContent tabsContent2" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div] [div class="tabsContent tabsContent3" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div] [div class="tabsContent tabsContent4" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div][/div] [div class=tabs style="font-family: EB Garamond;"]
[div class="tab tab1"][div class=line]
[div class="slab slab1" style="display: none;"]basics[/div][/div] [div class="tab tab2"][div class=line][/div] [div class="slab slab2" style="display: none;"]looks[/div][/div] [div class="tab tab3"][div class=line][/div] [div class="slab slab3" style="display: none;"]persona[/div][/div] [div class="tab tab4"][div class=line][/div] [div class="slab slab4" style="display: none;"]history[/div][/div] [div class="tab tab5"][div class=line][/div] [div class="slab slab5" style="display: none;"]return[/div][/div][/div][/div][/div]
coded by
constellation
.
[/div]
 
constellation said:
[class=image]width: 150px; height: 150px; background: url(https://cdn.discordapp.com/attachments/628281887613255680/632931907436412929/image1.jpg); background-size: cover; border-radius: 100% 100% 0% 100%;[/class] [class=number]width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s;[/class] [class=link] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s;[/class] [class name=image state=hover]transition: 1s; filter: grayscale(100%);[/class] [class name=number state=hover]opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5);[/class] [class name=link state=hover]color: #5f53b5; transition: 1s;[/class]
constellation's code
[div class=image][div class=number]
07
yousmelldead yousmelldead ; you request is complete! thank you for being patient. i couldn't use any of the fonts that you recommended as they aren't on google fonts but i went ahead and used one that looks similar to hoefler for the header and tabs. but, feel free to change any of them or the colours! c: i hope you like it and please don't remove the credit
[/div][/div][/div]
[class=container]height: 350px; width: 450px; background-color: #F5EDE2; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(129, 130, 132,.7);[/class] [class=tabs]position: absolute; top: 0; right: 0; width: 150px; height: 350px;[/class] [class=tab]display: inline-block; position: relative; left: 40px; width: 90px; height: 40px; border-radius: 10px; background-color: #F5EDE2; box-shadow: 0px 0px 4px 0px rgba(129, 130, 132,.7); line-height: 15px; text-align: center; color: #A87D8E; font-size: 20px; line-height: 36px; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;[/class] [class=line]position: relative; margin-left: -40px; width: 40px; height: 2px; background-color: #818284; opacity: 0.7; top: 19px;[/class] [class=slab]position: absolute; left: 2px; top: 2px; z-index: 50; background-color: #F5EDE2; height: 36px; width: 87px; font-size: 15px; text-transform: uppercase; text-align: center; line-height: 36px; font-weight: 500; letter-spacing: 1px;[/class] [class=title]position: absolute; bottom: 5px; right: 185px; font-size: 50px; text-transform: uppercase; font-weight: 900; letter-spacing: -2px; color: #B88B85; text-shadow: 2px 2px #A87D8E;[/class] [class=textbox]padding: 10px; position: absolute; top: 30px; left: 190px; height: 270px; width: 210px; border-radius: 10px; font-size: 12px; background-color: white; overflow: hidden; padding-right: 5px; text-align: justify;[/class] [class=scroll]width: calc(100% + 12px); height: 270px; overflow-y: scroll; padding-right: 15px; white-space: pre-line; color: #948187;[/class] [class=tag]display: inline-block; line-height: 19px; height: 21px; padding-left: 3px; padding-right: 3px; background: #948187; color: #fff;[/class] [script class=tab1 on=mouseenter] fadeIn 500 slab1 hide slab2 hide slab3 hide slab4 hide slab5 [/script] [script class=tab1 on=mouseleave] fadeOut 500 slab1 [/script] [script class=tab2 on=mouseenter] fadeIn 500 slab2 hide slab1 hide slab3 hide slab4 hide slab5 [/script] [script class=tab2 on=mouseleave] fadeOut 500 slab2 [/script] [script class=tab3 on=mouseenter] fadeIn 500 slab3 hide slab1 hide slab2 hide slab4 hide slab5 [/script] [script class=tab3 on=mouseleave] fadeOut 500 slab3 [/script] [script class=tab4 on=mouseenter] fadeIn 500 slab4 hide slab1 hide slab2 hide slab3 hide slab5 [/script] [script class=tab4 on=mouseleave] fadeOut 500 slab4 [/script] [script class=tab5 on=mouseenter] fadeIn 500 slab5 hide slab1 hide slab2 hide slab3 hide slab4 [/script] [script class=tab5 on=mouseleave] fadeOut 500 slab5 [/script] [script class=tab1 on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent1[/script] [script class=tab2 on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent2[/script] [script class=tab3 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent4 hide tabsContent5 fadeIn 1000 tabsContent3[/script] [script class=tab4 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent5 fadeIn 1000 tabsContent4[/script] [script class=tab5 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeIn 1000 tabsContent5[/script]
[div class=container][div class="tabsContent tabsContent5"]
[div class=title]name or role
[div class="tabsContent tabsContent1" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam in nisl consectetur, semper turpis iaculis, aliquam mauris. aenean porta cursus purus, vitae maximus ex. duis nibh, condimentum vitae ante eu, faucibus vulputate felis. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div] [div class="tabsContent tabsContent2" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div] [div class="tabsContent tabsContent3" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div] [div class="tabsContent tabsContent4" style="display: none;"]
[div class=textbox style="font-family: Lobster;"][div class=scroll][div class=tag]tag[/div] info. [div class=tag]tag[/div] info. [div class=tag]tag[/div] info.[/div][/div][/div][/div] [div class=tabs style="font-family: EB Garamond;"]
[div class="tab tab1"][div class=line]
[div class="slab slab1" style="display: none;"]basics[/div][/div] [div class="tab tab2"][div class=line][/div] [div class="slab slab2" style="display: none;"]looks[/div][/div] [div class="tab tab3"][div class=line][/div] [div class="slab slab3" style="display: none;"]persona[/div][/div] [div class="tab tab4"][div class=line][/div] [div class="slab slab4" style="display: none;"]history[/div][/div] [div class="tab tab5"][div class=line][/div] [div class="slab slab5" style="display: none;"]return[/div][/div][/div][/div][/div]
coded by
constellation
.
[/div]
Click to expand...
OHMYGOD
Thank you thank you thank you!
 
[class=image] width: 150px; height: 150px; background: url(https://i.pinimg.com/564x/ff/01/10/ff01106474b0c488d4671c6cb7699b80.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link2] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link2 state=hover] color: #5f53b5; transition: 1s; [/class]
christy's code
[div class=image][div class=number]
08
mattchampions mattchampions ; here is your code! i managed to stick to your colour palette as much as i could. i put icons that i felt were appropriate but you're free to change them, of course. you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask! click the link in the heading to be taken to the raw code and please remember not to remove the credit. hope you like it!
[/div][/div][/div]
[class=link] display: inline-block; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; font-size: 9px; font-family: Avenir; padding-top: 5px; color: #999; [/class] [class=tab] box-sizing: border-box; background: #3c4245; padding: 7px; width: 45px; height: 45px; border: 1px solid #3c4245; border-radius: 100%; color: #fff; text-align: center; margin: auto; transition: .7s; font-size: 18px; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] background: #5f6769; border: 1px solid #5f6769; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] background: #719192; border: 1px solid #719192; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .7s; width: 450px; font-size: 11px; line-height: 26px; background: #fff; color: #000; height: 400px; box-sizing: border-box; [/class] [class=show] opacity: 1; transition: all .7s; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 [/script]
[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[/div]
[div class="tabContents tabContents04 show"]
thread name
[div class="tabContents tabContents01"]
introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a pellentesque nulla. In et dolor nec neque congue auctor. In ac turpis id enim congue consequat nec vel ante. Morbi malesuada dignissim augue, eu eleifend arcu finibus vel. Cras auctor nisi vel gravida elementum. Curabitur et auctor tellus. Aliquam ac ultricies felis, vel fringilla ex. Maecenas congue mauris a purus sagittis molestie.

Integer neque libero, fringilla id felis ac, finibus suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tellus vel sapien tempor vulputate. In quis porttitor justo. Phasellus a nulla id nulla tincidunt elementum. Curabitur fringilla vulputate luctus. Cras eget turpis sit amet velit gravida tempor. Nam lorem felis, tincidunt non pulvinar vitae, tincidunt eu magna. Nunc non arcu eget elit sollicitudin iaculis. Vivamus rhoncus orci sem, at cursus nunc rutrum at. Pellentesque volutpat faucibus magna, sed ornare ipsum pharetra et. Nunc ipsum turpis, sollicitudin et elementum et, lacinia et dui. Praesent lobortis, magna id consectetur sodales, ligula nisi commodo erat, nec dignissim massa turpis sit amet tellus. Ut mollis venenatis magna, et placerat massa semper a.

Etiam pharetra egestas faucibus. Aliquam pharetra vestibulum lorem at luctus. Nunc pulvinar elit at ornare viverra. Nullam aliquet risus in accumsan scelerisque. Nullam mattis, sem nec ullamcorper tempus, massa orci pulvinar ex, eget porta lectus arcu at dolor. Sed placerat elit non est pharetra iaculis. Vivamus auctor eget lacus vitae sollicitudin. Mauris metus nibh, porta vitae lobortis vitae, maximus feugiat odio. Aliquam sit amet pharetra mauris, a malesuada ante. Praesent non mi ornare, iaculis ligula ut, vehicula eros.
[/div] [div class="tabContents tabContents02"]
expectations
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a pellentesque nulla. In et dolor nec neque congue auctor. In ac turpis id enim congue consequat nec vel ante. Morbi malesuada dignissim augue, eu eleifend arcu finibus vel. Cras auctor nisi vel gravida elementum. Curabitur et auctor tellus. Aliquam ac ultricies felis, vel fringilla ex. Maecenas congue mauris a purus sagittis molestie.

Integer neque libero, fringilla id felis ac, finibus suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tellus vel sapien tempor vulputate. In quis porttitor justo. Phasellus a nulla id nulla tincidunt elementum. Curabitur fringilla vulputate luctus. Cras eget turpis sit amet velit gravida tempor. Nam lorem felis, tincidunt non pulvinar vitae, tincidunt eu magna. Nunc non arcu eget elit sollicitudin iaculis. Vivamus rhoncus orci sem, at cursus nunc rutrum at. Pellentesque volutpat faucibus magna, sed ornare ipsum pharetra et. Nunc ipsum turpis, sollicitudin et elementum et, lacinia et dui. Praesent lobortis, magna id consectetur sodales, ligula nisi commodo erat, nec dignissim massa turpis sit amet tellus. Ut mollis venenatis magna, et placerat massa semper a.

Etiam pharetra egestas faucibus. Aliquam pharetra vestibulum lorem at luctus. Nunc pulvinar elit at ornare viverra. Nullam aliquet risus in accumsan scelerisque. Nullam mattis, sem nec ullamcorper tempus, massa orci pulvinar ex, eget porta lectus arcu at dolor. Sed placerat elit non est pharetra iaculis. Vivamus auctor eget lacus vitae sollicitudin. Mauris metus nibh, porta vitae lobortis vitae, maximus feugiat odio. Aliquam sit amet pharetra mauris, a malesuada ante. Praesent non mi ornare, iaculis ligula ut, vehicula eros.
[/div] [div class="tabContents tabContents03"]
plots & pairings
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a pellentesque nulla. In et dolor nec neque congue auctor. In ac turpis id enim congue consequat nec vel ante. Morbi malesuada dignissim augue, eu eleifend arcu finibus vel. Cras auctor nisi vel gravida elementum. Curabitur et auctor tellus. Aliquam ac ultricies felis, vel fringilla ex. Maecenas congue mauris a purus sagittis molestie.

Integer neque libero, fringilla id felis ac, finibus suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tellus vel sapien tempor vulputate. In quis porttitor justo. Phasellus a nulla id nulla tincidunt elementum. Curabitur fringilla vulputate luctus. Cras eget turpis sit amet velit gravida tempor. Nam lorem felis, tincidunt non pulvinar vitae, tincidunt eu magna. Nunc non arcu eget elit sollicitudin iaculis. Vivamus rhoncus orci sem, at cursus nunc rutrum at. Pellentesque volutpat faucibus magna, sed ornare ipsum pharetra et. Nunc ipsum turpis, sollicitudin et elementum et, lacinia et dui. Praesent lobortis, magna id consectetur sodales, ligula nisi commodo erat, nec dignissim massa turpis sit amet tellus. Ut mollis venenatis magna, et placerat massa semper a.

Etiam pharetra egestas faucibus. Aliquam pharetra vestibulum lorem at luctus. Nunc pulvinar elit at ornare viverra. Nullam aliquet risus in accumsan scelerisque. Nullam mattis, sem nec ullamcorper tempus, massa orci pulvinar ex, eget porta lectus arcu at dolor. Sed placerat elit non est pharetra iaculis. Vivamus auctor eget lacus vitae sollicitudin. Mauris metus nibh, porta vitae lobortis vitae, maximus feugiat odio. Aliquam sit amet pharetra mauris, a malesuada ante. Praesent non mi ornare, iaculis ligula ut, vehicula eros.
[/div] [/div] [/div][/div] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div]
 
Last edited:
christy said:
[class=image] width: 150px; height: 150px; background: url(https://i.pinimg.com/564x/ff/01/10/ff01106474b0c488d4671c6cb7699b80.jpg); background-size: cover; border-radius: 100% 100% 0% 100%; [/class] [class=number] width: 100%; height: 100%; border-radius: 100% 100% 0% 100%; opacity: 0; color: #fff; text-align: center; transition: 1s; [/class] [class=link2] display: inline-block; color: #a69deb; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; [/class] [class name=image state=hover] transition: 1s; filter: grayscale(100%); [/class] [class name=number state=hover] opacity: 1; transition: 1s; background-color: rgba(0,0,0,0.5); [/class] [class name=link2 state=hover] color: #5f53b5; transition: 1s; [/class]
christy's code
[div class=image][div class=number]
08
mattchampions mattchampions ; here is your code! i managed to stick to your colour palette as much as i could. i put icons that i felt were appropriate but you're free to change them, of course. you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask! click the link in the heading to be taken to the raw code and please remember not to remove the credit. hope you like it!
[/div][/div][/div]
[class=link] display: inline-block; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: 1s; font-size: 9px; font-family: Avenir; padding-top: 5px; color: #999; [/class] [class=tab] box-sizing: border-box; background: #3c4245; padding: 7px; width: 45px; height: 45px; border: 1px solid #3c4245; border-radius: 100%; color: #fff; text-align: center; margin: auto; transition: .7s; font-size: 18px; font-family: Avenir; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] background: #5f6769; border: 1px solid #5f6769; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] background: #719192; border: 1px solid #719192; transition: .7s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=tabContents] position: absolute; opacity: 0; transition: all .7s; width: 450px; font-size: 11px; line-height: 26px; background: #fff; color: #000; height: 400px; box-sizing: border-box; [/class] [class=show] opacity: 1; transition: all .7s; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 [/script]
[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[/div]
[div class="tabContents tabContents04 show"]
thread name
[div class="tabContents tabContents01"]
introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a pellentesque nulla. In et dolor nec neque congue auctor. In ac turpis id enim congue consequat nec vel ante. Morbi malesuada dignissim augue, eu eleifend arcu finibus vel. Cras auctor nisi vel gravida elementum. Curabitur et auctor tellus. Aliquam ac ultricies felis, vel fringilla ex. Maecenas congue mauris a purus sagittis molestie.

Integer neque libero, fringilla id felis ac, finibus suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tellus vel sapien tempor vulputate. In quis porttitor justo. Phasellus a nulla id nulla tincidunt elementum. Curabitur fringilla vulputate luctus. Cras eget turpis sit amet velit gravida tempor. Nam lorem felis, tincidunt non pulvinar vitae, tincidunt eu magna. Nunc non arcu eget elit sollicitudin iaculis. Vivamus rhoncus orci sem, at cursus nunc rutrum at. Pellentesque volutpat faucibus magna, sed ornare ipsum pharetra et. Nunc ipsum turpis, sollicitudin et elementum et, lacinia et dui. Praesent lobortis, magna id consectetur sodales, ligula nisi commodo erat, nec dignissim massa turpis sit amet tellus. Ut mollis venenatis magna, et placerat massa semper a.

Etiam pharetra egestas faucibus. Aliquam pharetra vestibulum lorem at luctus. Nunc pulvinar elit at ornare viverra. Nullam aliquet risus in accumsan scelerisque. Nullam mattis, sem nec ullamcorper tempus, massa orci pulvinar ex, eget porta lectus arcu at dolor. Sed placerat elit non est pharetra iaculis. Vivamus auctor eget lacus vitae sollicitudin. Mauris metus nibh, porta vitae lobortis vitae, maximus feugiat odio. Aliquam sit amet pharetra mauris, a malesuada ante. Praesent non mi ornare, iaculis ligula ut, vehicula eros.
[/div] [div class="tabContents tabContents02"]
expectations
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a pellentesque nulla. In et dolor nec neque congue auctor. In ac turpis id enim congue consequat nec vel ante. Morbi malesuada dignissim augue, eu eleifend arcu finibus vel. Cras auctor nisi vel gravida elementum. Curabitur et auctor tellus. Aliquam ac ultricies felis, vel fringilla ex. Maecenas congue mauris a purus sagittis molestie.

Integer neque libero, fringilla id felis ac, finibus suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tellus vel sapien tempor vulputate. In quis porttitor justo. Phasellus a nulla id nulla tincidunt elementum. Curabitur fringilla vulputate luctus. Cras eget turpis sit amet velit gravida tempor. Nam lorem felis, tincidunt non pulvinar vitae, tincidunt eu magna. Nunc non arcu eget elit sollicitudin iaculis. Vivamus rhoncus orci sem, at cursus nunc rutrum at. Pellentesque volutpat faucibus magna, sed ornare ipsum pharetra et. Nunc ipsum turpis, sollicitudin et elementum et, lacinia et dui. Praesent lobortis, magna id consectetur sodales, ligula nisi commodo erat, nec dignissim massa turpis sit amet tellus. Ut mollis venenatis magna, et placerat massa semper a.

Etiam pharetra egestas faucibus. Aliquam pharetra vestibulum lorem at luctus. Nunc pulvinar elit at ornare viverra. Nullam aliquet risus in accumsan scelerisque. Nullam mattis, sem nec ullamcorper tempus, massa orci pulvinar ex, eget porta lectus arcu at dolor. Sed placerat elit non est pharetra iaculis. Vivamus auctor eget lacus vitae sollicitudin. Mauris metus nibh, porta vitae lobortis vitae, maximus feugiat odio. Aliquam sit amet pharetra mauris, a malesuada ante. Praesent non mi ornare, iaculis ligula ut, vehicula eros.
[/div] [div class="tabContents tabContents03"]
plots & pairings
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a pellentesque nulla. In et dolor nec neque congue auctor. In ac turpis id enim congue consequat nec vel ante. Morbi malesuada dignissim augue, eu eleifend arcu finibus vel. Cras auctor nisi vel gravida elementum. Curabitur et auctor tellus. Aliquam ac ultricies felis, vel fringilla ex. Maecenas congue mauris a purus sagittis molestie.

Integer neque libero, fringilla id felis ac, finibus suscipit ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tellus vel sapien tempor vulputate. In quis porttitor justo. Phasellus a nulla id nulla tincidunt elementum. Curabitur fringilla vulputate luctus. Cras eget turpis sit amet velit gravida tempor. Nam lorem felis, tincidunt non pulvinar vitae, tincidunt eu magna. Nunc non arcu eget elit sollicitudin iaculis. Vivamus rhoncus orci sem, at cursus nunc rutrum at. Pellentesque volutpat faucibus magna, sed ornare ipsum pharetra et. Nunc ipsum turpis, sollicitudin et elementum et, lacinia et dui. Praesent lobortis, magna id consectetur sodales, ligula nisi commodo erat, nec dignissim massa turpis sit amet tellus. Ut mollis venenatis magna, et placerat massa semper a.

Etiam pharetra egestas faucibus. Aliquam pharetra vestibulum lorem at luctus. Nunc pulvinar elit at ornare viverra. Nullam aliquet risus in accumsan scelerisque. Nullam mattis, sem nec ullamcorper tempus, massa orci pulvinar ex, eget porta lectus arcu at dolor. Sed placerat elit non est pharetra iaculis. Vivamus auctor eget lacus vitae sollicitudin. Mauris metus nibh, porta vitae lobortis vitae, maximus feugiat odio. Aliquam sit amet pharetra mauris, a malesuada ante. Praesent non mi ornare, iaculis ligula ut, vehicula eros.
[/div] [/div] [/div][/div] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div]
Click to expand...
oh my god, this is beautiful! thank you so so so so much. <3
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 14 (members: 0, guests: 14)
Back
Top