Accepting Requests 𝗰𝗵𝗿𝗶𝘀𝘁𝘆 ⧾ 𝗰𝗼𝗻𝘀𝘁𝗲𝗹𝗹𝗮𝘁𝗶𝗼𝗻′𝘀 𝗰𝗿𝗶𝘀𝗽𝘆 𝗰𝗼𝗱𝗲𝘀 ❪𝗰𝗹𝗼𝘀𝗲𝗱❫

t s u k i · Oct 31, 2019

christy said:
christy
says:

t s u k i ; your request is accepted! i'll get started on coding it soon, and i'll get back to you with it in a bit. please be patient!

thanks for requesting and thank you so much for the compliment!

Yay!!!! Thank you so much! Take your time and have a awesome day!

christy · Oct 31, 2019

[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]

12

sky high ; [div class=link2]code

https://pastebin.com/raw/Pef3WtgP

vesper. ; here is your code! i tried to stick to the colour scheme you gave me (as much as i could, at least). you're definitely free to change the colour scheme if you want to, or any of the fonts used! you were a little unclear about the number of tabs and pictures on each tab so i basically went with my gut. also note that you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask! click the 'code' 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=tag] color: #666; display: inline; letter-spacing: 1px; text-transform: uppercase; [/class] [class=tab] font-family: Avenir; text-transform: uppercase; color: #ccc; font-size: 10px; letter-spacing: 3px; transition: .7s all ease-in-out; text-align: center; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] transform: scale(1.2); color: #85b3d1ff; transition: .7s all ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] transform: scale(1.2); color: #85b3d1ff; 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: 405px; font-size: 11px; line-height: 26px; background: #fff; color: #999; height: 400px; box-sizing: border-box; font-family: Avenir; [/class] [class=show] opacity: 1; z-index: 1; [/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 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 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 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 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 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 selectedTab tab6 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script]

[div class="tab tab1"]general

[div class="tab tab2"]appearance

[div class="tab tab3"]persona

[div class="tab tab4"]relations

[div class="tab tab5"]gallery

[div class="tab tab6"]home[/div] [/div] [/div]

[div class="tabContents tabContents06 show"]

name/role

"a small quote here perhaps."

[div class="tabContents tabContents01"]

general

[div class=tag]name.

info.
[div class=tag]nicknames.

info.
[div class=tag]age.[/div] info.
[div class=tag]gender.[/div] info.
[div class=tag]sexuality.[/div] info.
[div class=tag]etc.[/div] info. [/div][/div][/div] [div class="tabContents tabContents02"]

appearance

[div class=tag]height.

info.
[div class=tag]weight.

info.
[div class=tag]hair.[/div] info.
[div class=tag]eyes.[/div] info.
[div class=tag]face claim.[/div] info.
[div class=tag]etc.[/div] info. [/div][/div][/div] [div class="tabContents tabContents03"]

persona

[div class=tag]personality.

info.
[div class=tag]likes.

info.
[div class=tag]dislikes.[/div] info.
[div class=tag]hobbies.[/div] info.
[div class=tag]fears.[/div] info.
[div class=tag]etc.[/div] info. [/div][/div][/div] [div class="tabContents tabContents04"]

relations

[div class=tag]mother.

info.
[div class=tag]father.

info.
[div class=tag]sibling.[/div] info.
[div class=tag]friend.[/div] info.
[div class=tag]enemy.[/div] info.
[div class=tag]etc.[/div] info. [/div][/div][/div] [div class="tabContents tabContents05"]

gallery

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

[div class=link]coded by christy.

https://www.rpnation.com/threads/𝗰𝗵𝗿𝗶𝘀𝘁𝘆-⧾-𝗰𝗼𝗻𝘀𝘁𝗲𝗹𝗹𝗮𝘁𝗶𝗼𝗻′𝘀-𝗰𝗿𝗶𝘀𝗽𝘆-𝗰𝗼𝗱𝗲𝘀.454487/post-9951524[/div]

christy

[/div]

vesper. · Oct 31, 2019

omg

christy ! you’re a real fucking goddess. thank you, the code looks spectacular!

christy · Oct 31, 2019

blem said:
omg christy ! you’re a real fucking goddess. thank you, the code looks spectacular!

ahhh i'm glad you like it!!

constellation · Oct 31, 2019

[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]

13

just beachy ; [div class=link]code

https://textuploader.com/1kyi1/raw

Colorless Spectrum ; your request has been complete! i tried my best to include what you specified (and had about 28842 mental breakdowns but we got there in the end). i couldn’t use the font laguna beach because it’s not on google fonts, but you can go ahead and change the alternative that i used, along with the colours. you didn’t specify anything for the last tab so i left it with a simple block text and title. thank you for being patient! i truly hope you like it

[/div][/div][/div]
[class=container]padding: 2vh; width: 650px; height: 450px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=holder]position: absolute; border: solid 1px #cecece; width: 650px; height: 450px; border-radius: 8px; overflow: hidden; background: #FEDDA3;[/class] [class=header]width: 650px; height: 20px; padding: 5px 15px 5px 15px; line-height: 20px; font-size: 30px; font-weight: bold; background-image: linear-gradient(#ebeaeb, #dbd5cd); border-bottom: 2px #000000 solid; border-bottom: 1px #cecece solid;[/class] [class=navbar]width: 650px; height: 65px; border-bottom: 1px #1E9EB9 solid; border-top: 1px #1E9EB9 solid; background-color: #59C2CF; background-image: url(https://www.transparenttextures.com/patterns/blizzard.png);[/class] [class=tab]height: 65px; width: 100px; text-align: center; line-height: 62px; border-left: 1px #1E9EB9 solid; text-transform: uppercase; font-size: 10px; color: #ffffff; font-family: 'Quicksand'; font-weight: 900; letter-spacing: 1px; transition: all .9s;[/class] [class=chosentab]background: #1E9EB9; font-size: 12px;[/class] [class=title]height: 65px; width: 225px; line-height: 62px; padding-left: 20px; font-size: 25px; color: #ffffff; font-family: 'Merienda';[/class] [class=mainbox]width: 650px; height: 337px; overflow: hidden; font-size: 12px; text-align: justify; line-height: 15px;[/class] [class=scroll]width: 100%; height: 100%; overflow-y: scroll; padding-right: 20px; font-family: 'Quicksand';[/class] [class=tabtitle]height: 150px; line-height: 150px; text-align: center; font-size: 50px; color: white; font-weight: 900; font-family: 'Merienda'; text-shadow: 0 0 15px #59C2CF;[/class] [class=tag]font-size: 15px; font-weight: 700; color: #FE7279; display: inline; text-shadow: 2px 2px #FFC0A4;[/class] [class=column1]width: 250px; float: left; margin-left: 50px; font-weight: 500;[/class] [class=column2]width: 250px; float: right; margin-right: 35px; font-weight: 500;[/class] [class=role]background: #FFC0A4; height: 90px; box-sizing: border-box; width: 250px; margin-bottom: 10px; white-space: pre-line;[/class] [class=homeicon]float: left; height: 90px; width: 90px; line-height: 90px; text-align: center; font-size: 30px; color: white; background: #FE7279;[/class] [class=rolename]float: right; height: 90px; line-height: 90px; text-align: left; width: 145px; font-size: 20px; color: white; padding-left: 15px; font-family: 'Merienda';[/class] [class=roleinfo]height: 80px; width: 150px; background: #59C2Cf; top: -90px; left: -15px; position: relative; z-index: 2; padding: 5px 0px 5px 8px; font-size: 12px; line-height: 16px; overflow: hidden;[/class] [class=scroll2]width: calc(100% + 8px); height: 100%; overflow-y: scroll; padding-right: 20px; font-family: 'Quicksand';[/class] [class name=tab state=hover] background: #1E9EB9; font-size: 12px; transition: all .9s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=role1 on=mouseenter] fadeIn 700 roleinfo1 [/script] [script class=role1 on=mouseleave] fadeOut 700 roleinfo1 [/script] [script class=role2 on=mouseenter] fadeIn 700 roleinfo2 [/script] [script class=role2 on=mouseleave] fadeOut 700 roleinfo2 [/script] [script class=role3 on=mouseenter] fadeIn 700 roleinfo3 [/script] [script class=role3 on=mouseleave] fadeOut 700 roleinfo3 [/script] [script class=role4 on=mouseenter] fadeIn 700 roleinfo4 [/script] [script class=role4 on=mouseleave] fadeOut 700 roleinfo4 [/script] [script class=role5 on=mouseenter] fadeIn 700 roleinfo5 [/script] [script class=role5 on=mouseleave] fadeOut 700 roleinfo5 [/script] [script class=role6 on=mouseenter] fadeIn 700 roleinfo6 [/script] [script class=role6 on=mouseleave] fadeOut 700 roleinfo6 [/script] [script class=tab1 on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeIn 1000 tabsContent1 addClass chosentab removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab2 on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 addClass chosentab fadeIn 1000 tabsContent2 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab3 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent4 fadeIn 1000 tabsContent3 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 [/script] [script class=tab4 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 fadeIn 1000 tabsContent4 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 [/script] [div class=container][div class=holder][div class=header]

•

[/div] [div class=navbar]

[div class=title]title here

[div class="tab tab1 chosentab"]home[/div] [div class="tab tab2"]about[/div] [div class="tab tab3"]reserve[/div] [div class="tab tab4"]contact us[/div][/div][/div] [div class="tabsContent tabsContent1"][div class=mainbox][div class=scroll]

[div class=tabtitle]title here

[/div]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim. Sed faucibus est non nunc commodo rutrum. Donec ultrices nulla ut nibh volutpat dignissim. Proin eget interdum elit. Etiam eget facilisis magna. Ut non erat orci. Mauris scelerisque congue velit. Suspendisse semper finibus urna. Vivamus pellentesque nunc nulla, eget lobortis nibh tincidunt ut. Duis mauris nisl, blandit a ipsum a, vehicula bibendum erat. In vel nisi dignissim, ullamcorper enim vitae, dapibus ex. Vestibulum pulvinar lectus ut arcu accumsan varius. Suspendisse vitae enim quis tortor auctor auctor. Sed posuere vel nibh a feugiat. Curabitur eu odio tempus, porta mauris at, porttitor felis. Duis eget consectetur lacus. Praesent vestibulum pharetra mauris ac vulputate. Fusce ullamcorper vitae nisl et blandit. Pellentesque sit amet blandit risus, sit amet semper nulla. Vivamus lacus ante, efficitur a diam quis, cursus sollicitudin odio.

[/div][/div][/div] [div class="tabsContent tabsContent2" style="display: none;"][div class=mainbox][div class=scroll]

[div class=tabtitle]title here

[/div]

[div class=tag]#01.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. [div class=tag]#02.[/div] Donec mi tortor, efficitur et enim et, pellentesque facilisis enim. Sed faucibus est non nunc commodo rutrum. [div class=tag]#03.[/div] Donec ultrices nulla ut nibh volutpat dignissim. Proin eget interdum elit. Etiam eget facilisis magna. [div class=tag]#04.[/div] Vivamus pellentesque nunc nulla, eget lobortis nibh tincidunt ut. Duis mauris nisl, blandit a ipsum a, vehicula bibendum erat. [div class=tag]#05.[/div] In vel nisi dignissim, ullamcorper enim vitae, dapibus ex. Vestibulum pulvinar lectus ut arcu accumsan varius. Suspendisse vitae enim quis tortor auctor auctor. [div class=tag]#06.[/div] Sed posuere vel nibh a feugiat. Curabitur eu odio tempus, porta mauris at, porttitor felis. Duis eget consectetur lacus. Ut non erat orci.[/div][/div][/div][/div] [div class="tabsContent tabsContent3" style="display: none;"][div class=mainbox][div class=scroll]

[div class=tabtitle]title here

[/div] [div class=column1][div class=role][div class=homeicon][/div] [div class="rolename role1"]role here. [div class="roleinfo roleinfo1" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role2"]role here. [div class="roleinfo roleinfo2" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role3"]role here. [div class="roleinfo roleinfo3" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div][/div] [div class=column2][div class=role][div class=homeicon][/div] [div class="rolename role4"]role here. [div class="roleinfo roleinfo4" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role5"]role here. [div class="roleinfo roleinfo5" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role6"]role here. [div class="roleinfo roleinfo6" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div][/div] [/div][/div][/div] [div class="tabsContent tabsContent4" style="display: none;"][div class=mainbox][div class=scroll]

[div class=tag style="font-size: 25px; margin-bottom: 10px;"]title here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim. Sed faucibus est non nunc commodo rutrum. Donec ultrices nulla ut nibh volutpat dignissim. Proin eget interdum elit. Etiam eget facilisis magna. Ut non erat orci. Mauris scelerisque congue velit. Suspendisse semper finibus urna. Vivamus pellentesque nunc nulla, eget lobortis nibh tincidunt ut. Duis mauris nisl, blandit a ipsum a, vehicula bibendum erat. In vel nisi dignissim, ullamcorper enim vitae, dapibus ex. Vestibulum pulvinar lectus ut arcu accumsan varius. Suspendisse vitae enim quis tortor auctor auctor. Sed posuere vel nibh a feugiat. Curabitur eu odio tempus, porta mauris at, porttitor felis. Duis eget consectetur lacus. Praesent vestibulum pharetra mauris ac vulputate. Fusce ullamcorper vitae nisl et blandit. Pellentesque sit amet blandit risus, sit amet semper nulla. Vivamus lacus ante, efficitur a diam quis, cursus sollicitudin odio.[/div][/div][/div][/div][/div][/div]

coded by

constellation

.

Colorless Spectrum · Nov 1, 2019

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]
13

just beachy ; [div class=link]code
https://pastebin.com/raw/eKpEFyZ9

Colorless Spectrum ; your request has been complete! i tried my best to include what you specified (and had about 28842 mental breakdowns but we got there in the end). i couldn’t use the font laguna beach because it’s not on google fonts, but you can go ahead and change the alternative that i used, along with the colours. you didn’t specify anything for the last tab so i left it with a simple block text and title. thank you for being patient! i truly hope you like it
[/div][/div][/div]
[class=container]padding: 2vh; width: 650px; height: 450px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=holder]position: absolute; border: solid 1px #cecece; width: 650px; height: 450px; border-radius: 8px; overflow: hidden; background: #FEDDA3;[/class] [class=header]width: 650px; height: 20px; padding: 5px 15px 5px 15px; line-height: 20px; font-size: 30px; font-weight: bold; background-image: linear-gradient(#ebeaeb, #dbd5cd); border-bottom: 2px #000000 solid; border-bottom: 1px #cecece solid;[/class] [class=navbar]width: 650px; height: 65px; border-bottom: 1px #1E9EB9 solid; border-top: 1px #1E9EB9 solid; background-color: #59C2CF; background-image: url(https://www.transparenttextures.com/patterns/blizzard.png);[/class] [class=tab]height: 65px; width: 100px; text-align: center; line-height: 62px; border-left: 1px #1E9EB9 solid; text-transform: uppercase; font-size: 10px; color: #ffffff; font-family: 'Quicksand'; font-weight: 900; letter-spacing: 1px; transition: all .9s;[/class] [class=chosentab]background: #1E9EB9; font-size: 12px;[/class] [class=title]height: 65px; width: 225px; line-height: 62px; padding-left: 20px; font-size: 25px; color: #ffffff; font-family: 'Merienda';[/class] [class=mainbox]width: 650px; height: 337px; overflow: hidden; font-size: 12px; text-align: justify; line-height: 15px;[/class] [class=scroll]width: 100%; height: 100%; overflow-y: scroll; padding-right: 20px; font-family: 'Quicksand';[/class] [class=tabtitle]height: 150px; line-height: 150px; text-align: center; font-size: 50px; color: white; font-weight: 900; font-family: 'Merienda'; text-shadow: 0 0 15px #59C2CF;[/class] [class=tag]font-size: 15px; font-weight: 700; color: #FE7279; display: inline; text-shadow: 2px 2px #FFC0A4;[/class] [class=column1]width: 250px; float: left; margin-left: 50px; font-weight: 500;[/class] [class=column2]width: 250px; float: right; margin-right: 35px; font-weight: 500;[/class] [class=role]background: #FFC0A4; height: 90px; box-sizing: border-box; width: 250px; margin-bottom: 10px; white-space: pre-line;[/class] [class=homeicon]float: left; height: 90px; width: 90px; line-height: 90px; text-align: center; font-size: 30px; color: white; background: #FE7279;[/class] [class=rolename]float: right; height: 90px; line-height: 90px; text-align: left; width: 145px; font-size: 20px; color: white; padding-left: 15px; font-family: 'Merienda';[/class] [class=roleinfo]height: 80px; width: 150px; background: #59C2Cf; top: -90px; left: -15px; position: relative; z-index: 2; padding: 5px 0px 5px 8px; font-size: 12px; line-height: 16px; overflow: hidden;[/class] [class=scroll2]width: calc(100% + 8px); height: 100%; overflow-y: scroll; padding-right: 20px; font-family: 'Quicksand';[/class] [class name=tab state=hover] background: #1E9EB9; font-size: 12px; transition: all .9s; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [script class=role1 on=mouseenter] fadeIn 700 roleinfo1 [/script] [script class=role1 on=mouseleave] fadeOut 700 roleinfo1 [/script] [script class=role2 on=mouseenter] fadeIn 700 roleinfo2 [/script] [script class=role2 on=mouseleave] fadeOut 700 roleinfo2 [/script] [script class=role3 on=mouseenter] fadeIn 700 roleinfo3 [/script] [script class=role3 on=mouseleave] fadeOut 700 roleinfo3 [/script] [script class=role4 on=mouseenter] fadeIn 700 roleinfo4 [/script] [script class=role4 on=mouseleave] fadeOut 700 roleinfo4 [/script] [script class=role5 on=mouseenter] fadeIn 700 roleinfo5 [/script] [script class=role5 on=mouseleave] fadeOut 700 roleinfo5 [/script] [script class=role6 on=mouseenter] fadeIn 700 roleinfo6 [/script] [script class=role6 on=mouseleave] fadeOut 700 roleinfo6 [/script] [script class=tab1 on=click] hide tabsContent2 hide tabsContent3 hide tabsContent4 fadeIn 1000 tabsContent1 addClass chosentab removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab2 on=click] hide tabsContent1 hide tabsContent3 hide tabsContent4 addClass chosentab fadeIn 1000 tabsContent2 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab3 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent4 fadeIn 1000 tabsContent3 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 [/script] [script class=tab4 on=click] hide tabsContent1 hide tabsContent2 hide tabsContent3 fadeIn 1000 tabsContent4 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 [/script] [div class=container][div class=holder][div class=header]
•
•
•
[/div] [div class=navbar]
[div class=title]title here
[div class="tab tab1 chosentab"]home[/div] [div class="tab tab2"]about[/div] [div class="tab tab3"]reserve[/div] [div class="tab tab4"]contact us[/div][/div][/div] [div class="tabsContent tabsContent1"][div class=mainbox][div class=scroll]
[div class=tabtitle]title here
[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim. Sed faucibus est non nunc commodo rutrum. Donec ultrices nulla ut nibh volutpat dignissim. Proin eget interdum elit. Etiam eget facilisis magna. Ut non erat orci. Mauris scelerisque congue velit. Suspendisse semper finibus urna. Vivamus pellentesque nunc nulla, eget lobortis nibh tincidunt ut. Duis mauris nisl, blandit a ipsum a, vehicula bibendum erat. In vel nisi dignissim, ullamcorper enim vitae, dapibus ex. Vestibulum pulvinar lectus ut arcu accumsan varius. Suspendisse vitae enim quis tortor auctor auctor. Sed posuere vel nibh a feugiat. Curabitur eu odio tempus, porta mauris at, porttitor felis. Duis eget consectetur lacus. Praesent vestibulum pharetra mauris ac vulputate. Fusce ullamcorper vitae nisl et blandit. Pellentesque sit amet blandit risus, sit amet semper nulla. Vivamus lacus ante, efficitur a diam quis, cursus sollicitudin odio.

[/div][/div][/div] [div class="tabsContent tabsContent2" style="display: none;"][div class=mainbox][div class=scroll]
[div class=tabtitle]title here
[/div]

[div class=tag]#01.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. [div class=tag]#02.[/div] Donec mi tortor, efficitur et enim et, pellentesque facilisis enim. Sed faucibus est non nunc commodo rutrum. [div class=tag]#03.[/div] Donec ultrices nulla ut nibh volutpat dignissim. Proin eget interdum elit. Etiam eget facilisis magna. [div class=tag]#04.[/div] Vivamus pellentesque nunc nulla, eget lobortis nibh tincidunt ut. Duis mauris nisl, blandit a ipsum a, vehicula bibendum erat. [div class=tag]#05.[/div] In vel nisi dignissim, ullamcorper enim vitae, dapibus ex. Vestibulum pulvinar lectus ut arcu accumsan varius. Suspendisse vitae enim quis tortor auctor auctor. [div class=tag]#06.[/div] Sed posuere vel nibh a feugiat. Curabitur eu odio tempus, porta mauris at, porttitor felis. Duis eget consectetur lacus. Ut non erat orci.[/div][/div][/div][/div] [div class="tabsContent tabsContent3" style="display: none;"][div class=mainbox][div class=scroll]
[div class=tabtitle]title here
[/div] [div class=column1][div class=role][div class=homeicon][/div] [div class="rolename role1"]role here. [div class="roleinfo roleinfo1" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role2"]role here. [div class="roleinfo roleinfo2" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role3"]role here. [div class="roleinfo roleinfo3" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div][/div] [div class=column2][div class=role][div class=homeicon][/div] [div class="rolename role4"]role here. [div class="roleinfo roleinfo4" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role5"]role here. [div class="roleinfo roleinfo5" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div] [div class=role][div class=homeicon][/div] [div class="rolename role6"]role here. [div class="roleinfo roleinfo6" style="display: none;"][div class=scroll2]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim.[/div][/div][/div][/div][/div] [/div][/div][/div] [div class="tabsContent tabsContent4" style="display: none;"][div class=mainbox][div class=scroll]
[div class=tag style="font-size: 25px; margin-bottom: 10px;"]title here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate purus, vel imperdiet risus. Donec mi tortor, efficitur et enim et, pellentesque facilisis enim. Sed faucibus est non nunc commodo rutrum. Donec ultrices nulla ut nibh volutpat dignissim. Proin eget interdum elit. Etiam eget facilisis magna. Ut non erat orci. Mauris scelerisque congue velit. Suspendisse semper finibus urna. Vivamus pellentesque nunc nulla, eget lobortis nibh tincidunt ut. Duis mauris nisl, blandit a ipsum a, vehicula bibendum erat. In vel nisi dignissim, ullamcorper enim vitae, dapibus ex. Vestibulum pulvinar lectus ut arcu accumsan varius. Suspendisse vitae enim quis tortor auctor auctor. Sed posuere vel nibh a feugiat. Curabitur eu odio tempus, porta mauris at, porttitor felis. Duis eget consectetur lacus. Praesent vestibulum pharetra mauris ac vulputate. Fusce ullamcorper vitae nisl et blandit. Pellentesque sit amet blandit risus, sit amet semper nulla. Vivamus lacus ante, efficitur a diam quis, cursus sollicitudin odio.[/div][/div][/div][/div][/div][/div]
coded by
constellation
.

AAAAHHHH THANK YOU THANK YOU SO MUCH. I didn't know that it has been posted because I didn't receive a notif. But it is lovely. I can't stop smiling right now.

I was sure I got the code o google font, but no biggie. Also, gosh I'm sorry for the mental breakdown it caused you.

constellation · Nov 2, 2019

Colorless Spectrum said:
AAAAHHHH THANK YOU THANK YOU SO MUCH. I didn't know that it has been posted because I didn't receive a notif. But it is lovely. I can't stop smiling right now.

I was sure I got the code o google font, but no biggie. Also, gosh I'm sorry for the mental breakdown it caused you.

eeee i didn't receive a notification either for this, so it's no biggy! i'm glad that you like it
also, i think because laguna beach is actually an external font on google fonts is why i can't use it but feel free to change the one i used!

constellation · Nov 5, 2019

[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]

14

blue delphinium ; [div class=link]code

https://textuploader.com/1kyif/raw

note to all - please do not steal this code or rip any parts of it as i spent quite some time on it, but you are however free to use it as a freebie as long as the credit is visible. thank you!

Azerothii ; your request has been completed and i am so incredibly sorry for the long wait, i appreciate you being so patient! i hope i managed to get every aspect of the details and blueprint you provided, which by the way was super helpful. feel free to change colours, fonts and icons to your liking. hover over the word 'code' in the title to be taken to the code. again, thank you for waiting

[/div][/div][/div]
[class=outline]padding: 2vh; width: 518px; height: 368px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=container]position: absolute; overflow: hidden; margin: 9px 0px 0px 9px; width: 500px; height: 350px; border-radius: 8px; border-bottom-left-radius: 8px; background: #4886af;[/class] [class=leftcontainer]position: absolute; z-index: 2; width: 250px; height: 350px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background: #4886af; background-image: url(https://www.transparenttextures.com/patterns/brushed-alum.png);[/class] [class=rightcontainer]position: absolute; z-index: 2; margin-left: 250px; width: 250px; height: 350px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; background: #4886af; background-image: url(https://www.transparenttextures.com/patterns/brushed-alum.png);[/class] [class=charname]position: absolute; height: 350px; width: 246px; line-height: 330px; font-size: 50px; font-family: 'Raleway'; text-transform: uppercase; color: #073245; font-weight: 500;[/class] [class=role]position: absolute; top: 0%; left: 0%; height: 350px; width: 247px; line-height: 400px; font-size: 30px; font-family: 'Raleway'; text-transform: uppercase; color: #073245; font-weight: 500;[/class] [class=mainbox]position: absolute; bottom: 15px; right: 50px; width: 370px; height: 280px; background: #a3ccf4; border-radius: 8px;[/class] [class=tabs]position: absolute; z-index: 1; right: 15px; bottom: 25px; width: 50px; height: 220px;[/class] [class=tab]height: 20px; width: 30px; padding: 5px 10px 5px 5px; background-color: #bebcc1; line-height: 20px; font-size: 15px; text-align: right; color: #073245; transition: 1s; border-top-right-radius: 4px; border-bottom-right-radius: 4px;[/class] [class=chosentab]width: 40px; background-color: #c7bab1; color: #073245;[/class] [class=border]position: absolute; height: 270px; width: 310px; left: 40px; top: 5px; font-size: 11px;[/class] [class=text]width: 190px; height: 270px; overflow: hidden; white-space: pre-line; text-align: justify; color: #073245;[/class] [class=scroll]width: 100%; height: 100%; overflow-y: scroll; padding-right: 20px; font-family: 'Raleway';[/class] [class=tag]background: #073245; padding: 1px 4px 1px 4px; color: #fff; display: inline; border-radius: 4px;[/class] [class name="tab" state="hover"] cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; width: 40px; background-color: #c7bab1; transition: 1s; [/class] [script class=tab1 on=click] hide tabContents02 hide tabContents03 hide tabContents04 fadeIn 1000 tabContents01 addClass chosentab removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab2 on=click] hide tabContents01 hide tabContents03 hide tabContents04 fadeIn 1000 tabContents02 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab3 on=click] hide tabContents01 hide tabContents02 hide tabContents04 fadeIn 1000 tabContents03 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 [/script] [script class=tab4 on=click] hide tabContents01 hide tabContents02 hide tabContents03 fadeIn 1000 tabContents04 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 [/script] [script class=tab5 on=click] addClass slideleftreturn leftcontainer addClass sliderightreturn rightcontainer [/script] [script class=container on=click] addClass slideleft leftcontainer addClass slideright rightcontainer [/script] [class=slideleft] animation-name: {post_id}slideleft; animation-duration: 3s; animation-fill-mode: both; [/class] [class=slideleftreturn] animation-name: {post_id}slideleftreturn; animation-duration: 3s; animation-fill-mode: forwards; [/class] [class=slideright] animation-name: {post_id}slideright; animation-duration: 3s; animation-fill-mode: forwards; [/class] [class=sliderightreturn] animation-name: {post_id}sliderightreturn; animation-duration: 3s; animation-fill-mode: forwards; [/class] [animation=slideleft] [keyframe=0] transform:translateX(0px); [/keyframe] [keyframe=100] transform:translateX(-250px); [/keyframe] [/animation] [animation=slideleftreturn] [keyframe=0] transform:translateX(-250px); [/keyframe] [keyframe=100] transform:translateX(0px); [/keyframe] [/animation] [animation=slideright] [keyframe=0] transform:translateX(0px); [/keyframe] [keyframe=100] transform:translateX(250px); [/keyframe] [/animation] [animation=sliderightreturn] [keyframe=0] transform:translateX(250px); [/keyframe] [keyframe=100] transform:translateX(0px); [/keyframe] [/animation] [div class=outline]

[div class=container][div class=leftcontainer][div class=charname style="text-align: right; padding-right: 4px;"]first

[div class=role style="text-align: right; padding-right: 3px;"]title[/div][/div][div class=rightcontainer][div class=charname style="text-align: left; padding-left: 4px;"]last[/div] [div class=role style="text-align: left; padding-left: 3px;"]role[/div][/div]

[div class=mainbox][div class=border][div class="tabContents tabContents01"]

[div class=text][div class=scroll][div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info.[/div][/div][/div] [div class="tabContents tabContents02" style="display: none;"]

[div class=text][div class=scroll][div class=tag]here.[/div] this section has hidden scrolls, so don't be afraid to write plenty. [div class=tag]here.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a odio placerat, ultrices tortor ultricies, maximus lectus. Integer aliquet in urna a rhoncus. Sed tempus non mi ac dictum. Maecenas at velit sodales, scelerisque velit ornare, viverra ante. Fusce dignissim malesuada dolor nec efficitur. Suspendisse cursus augue quis sapien semper semper. Phasellus eget tempus arcu. Donec id leo sit amet mauris ornare venenatis eget in lorem. Nullam cursus nibh et nibh consectetur pellentesque in at mi. Proin a turpis venenatis, posuere nibh at, hendrerit sem. In hac habitasse platea dictumst.[/div][/div][/div] [div class="tabContents tabContents03" style="display: none;"]

[div class=text][div class=scroll][div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info.[/div][/div][/div] [div class="tabContents tabContents04" style="display: none;"]

[div class=text][div class=scroll][div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info.[/div][/div][/div][/div][/div] [div class=tabs]

[div class="tab tab1 chosentab"]

[div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div] [div class="tab tab5"][/div][/div][/div][/div][/div][/div]

press for a surprise ; coded by

constellation

.

christy · Nov 5, 2019

[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]

15

orion ; [div class=link2]code

https://pastebin.com/raw/tEKATBga

jasmyn ; here is your code! sorry for the wait. i tried to stick to the colour scheme you gave me (using mainly the blues), but you're definitely free to change the colour scheme if you want to, or any of the fonts used! also note that you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask!

click the 'code' link in the heading to be taken to the raw code and please remember (for those using this as a freebie as well) not to remove the credit or to alter any parts of the code to pass it off as your own.

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]

character name

location

location here.

outfit

outfit here.

interactions

interactions here.

tags

tags here.

❛

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at magna magna. Donec lacus elit, sodales et laoreet eu, commodo eget dolor. Morbi sodales, ligula dignissim vehicula bibendum, dui erat lobortis nibh, in suscipit tortor tellus id ligula. Morbi sit amet velit elit. Vivamus ex eros, ultricies a ornare eu, feugiat eget purus. Suspendisse at accumsan sem, at commodo enim. Praesent aliquet metus purus, a placerat est ultrices fringilla.

Donec id ante sit amet odio volutpat elementum. Maecenas fermentum magna et ante aliquet, eu vestibulum lacus suscipit. Etiam a ornare quam. Nam sit amet enim sed sapien dictum rhoncus. Suspendisse euismod hendrerit nulla a scelerisque. Nunc quis semper eros, id laoreet metus. Etiam finibus mauris nibh, dictum eleifend ante fermentum sit amet. Suspendisse varius leo commodo luctus bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc at condimentum libero, non vestibulum ex. Duis tempor, lectus non varius laoreet, turpis lacus sollicitudin lacus, id fringilla risus turpis vitae purus. Nulla convallis auctor urna nec volutpat.

❜

[div class=link]coded by christy.

https://www.rpnation.com/threads/𝗰𝗵𝗿𝗶𝘀𝘁𝘆-⧾-𝗰𝗼𝗻𝘀𝘁𝗲𝗹𝗹𝗮𝘁𝗶𝗼𝗻′𝘀-𝗰𝗿𝗶𝘀𝗽𝘆-𝗰𝗼𝗱𝗲𝘀.454487/post-9951524[/div]

christy

jasmyn · Nov 5, 2019

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]
15

orion ; [div class=link2]code
https://pastebin.com/raw/Vv6ZJW5C

jasmyn ; here is your code! sorry for the wait. i tried to stick to the colour scheme you gave me (using mainly the blues), but you're definitely free to change the colour scheme if you want to, or any of the fonts used! also note that you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask!

click the 'code' link in the heading to be taken to the raw code and please remember (for those using this as a freebie as well) not to remove the credit or to alter any parts of the code to pass it off as your own.

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]

character name

location
location here.

outfit
outfit here.

interactions
interactions here.

tags
tags here.

❛

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at magna magna. Donec lacus elit, sodales et laoreet eu, commodo eget dolor. Morbi sodales, ligula dignissim vehicula bibendum, dui erat lobortis nibh, in suscipit tortor tellus id ligula. Morbi sit amet velit elit. Vivamus ex eros, ultricies a ornare eu, feugiat eget purus. Suspendisse at accumsan sem, at commodo enim. Praesent aliquet metus purus, a placerat est ultrices fringilla.

Donec id ante sit amet odio volutpat elementum. Maecenas fermentum magna et ante aliquet, eu vestibulum lacus suscipit. Etiam a ornare quam. Nam sit amet enim sed sapien dictum rhoncus. Suspendisse euismod hendrerit nulla a scelerisque. Nunc quis semper eros, id laoreet metus. Etiam finibus mauris nibh, dictum eleifend ante fermentum sit amet. Suspendisse varius leo commodo luctus bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc at condimentum libero, non vestibulum ex. Duis tempor, lectus non varius laoreet, turpis lacus sollicitudin lacus, id fringilla risus turpis vitae purus. Nulla convallis auctor urna nec volutpat.

❜

[div class=link]coded by christy.
https://www.rpnation.com/threads/𝗰𝗵𝗿𝗶𝘀𝘁𝘆-⧾-𝗰𝗼𝗻𝘀𝘁𝗲𝗹𝗹𝗮𝘁𝗶𝗼𝗻′𝘀-𝗰𝗿𝗶𝘀𝗽𝘆-𝗰𝗼𝗱𝗲𝘀.454487/post-9951524[/div]

I absolutely love it!!! Thank you so much for taking the time to create this! (:

christy · Nov 5, 2019

jasmichelle said:
I absolutely love it!!! Thank you so much for taking the time to create this! (:

glad you like it!

Azerothii · Nov 5, 2019

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]
14

blue delphinium ; [div class=link]code
https://textuploader.com/1kyif/raw

note to all - please do not steal this code or rip any parts of it as i spent quite some time on it, but you are however free to use it as a freebie as long as the credit is visible. thank you! Azerothii ; your request has been completed and i am so incredibly sorry for the long wait, i appreciate you being so patient! i hope i managed to get every aspect of the details and blueprint you provided, which by the way was super helpful. feel free to change colours, fonts and icons to your liking. hover over the word 'code' in the title to be taken to the code. again, thank you for waiting
[/div][/div][/div]
[class=outline]padding: 2vh; width: 518px; height: 368px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=container]position: absolute; overflow: hidden; margin: 9px 0px 0px 9px; width: 500px; height: 350px; border-radius: 8px; border-bottom-left-radius: 8px; background: #4886af;[/class] [class=leftcontainer]position: absolute; z-index: 2; width: 250px; height: 350px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; background: #4886af; background-image: url(https://www.transparenttextures.com/patterns/brushed-alum.png);[/class] [class=rightcontainer]position: absolute; z-index: 2; margin-left: 250px; width: 250px; height: 350px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; background: #4886af; background-image: url(https://www.transparenttextures.com/patterns/brushed-alum.png);[/class] [class=charname]position: absolute; height: 350px; width: 246px; line-height: 330px; font-size: 50px; font-family: 'Raleway'; text-transform: uppercase; color: #073245; font-weight: 500;[/class] [class=role]position: absolute; top: 0%; left: 0%; height: 350px; width: 247px; line-height: 400px; font-size: 30px; font-family: 'Raleway'; text-transform: uppercase; color: #073245; font-weight: 500;[/class] [class=mainbox]position: absolute; bottom: 15px; right: 50px; width: 370px; height: 280px; background: #a3ccf4; border-radius: 8px;[/class] [class=tabs]position: absolute; z-index: 1; right: 15px; bottom: 25px; width: 50px; height: 220px;[/class] [class=tab]height: 20px; width: 30px; padding: 5px 10px 5px 5px; background-color: #bebcc1; line-height: 20px; font-size: 15px; text-align: right; color: #073245; transition: 1s; border-top-right-radius: 4px; border-bottom-right-radius: 4px;[/class] [class=chosentab]width: 40px; background-color: #c7bab1; color: #073245;[/class] [class=border]position: absolute; height: 270px; width: 310px; left: 40px; top: 5px; font-size: 11px;[/class] [class=text]width: 190px; height: 270px; overflow: hidden; white-space: pre-line; text-align: justify; color: #073245;[/class] [class=scroll]width: 100%; height: 100%; overflow-y: scroll; padding-right: 20px; font-family: 'Raleway';[/class] [class=tag]background: #073245; padding: 1px 4px 1px 4px; color: #fff; display: inline; border-radius: 4px;[/class] [class name="tab" state="hover"] cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; width: 40px; background-color: #c7bab1; transition: 1s; [/class] [script class=tab1 on=click] hide tabContents02 hide tabContents03 hide tabContents04 fadeIn 1000 tabContents01 addClass chosentab removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab2 on=click] hide tabContents01 hide tabContents03 hide tabContents04 fadeIn 1000 tabContents02 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 [/script] [script class=tab3 on=click] hide tabContents01 hide tabContents02 hide tabContents04 fadeIn 1000 tabContents03 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 [/script] [script class=tab4 on=click] hide tabContents01 hide tabContents02 hide tabContents03 fadeIn 1000 tabContents04 addClass chosentab removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 [/script] [script class=tab5 on=click] addClass slideleftreturn leftcontainer addClass sliderightreturn rightcontainer [/script] [script class=container on=click] addClass slideleft leftcontainer addClass slideright rightcontainer [/script] [class=slideleft] animation-name: {post_id}slideleft; animation-duration: 3s; animation-fill-mode: both; [/class] [class=slideleftreturn] animation-name: {post_id}slideleftreturn; animation-duration: 3s; animation-fill-mode: forwards; [/class] [class=slideright] animation-name: {post_id}slideright; animation-duration: 3s; animation-fill-mode: forwards; [/class] [class=sliderightreturn] animation-name: {post_id}sliderightreturn; animation-duration: 3s; animation-fill-mode: forwards; [/class] [animation=slideleft] [keyframe=0] transform:translateX(0px); [/keyframe] [keyframe=100] transform:translateX(-250px); [/keyframe] [/animation] [animation=slideleftreturn] [keyframe=0] transform:translateX(-250px); [/keyframe] [keyframe=100] transform:translateX(0px); [/keyframe] [/animation] [animation=slideright] [keyframe=0] transform:translateX(0px); [/keyframe] [keyframe=100] transform:translateX(250px); [/keyframe] [/animation] [animation=sliderightreturn] [keyframe=0] transform:translateX(250px); [/keyframe] [keyframe=100] transform:translateX(0px); [/keyframe] [/animation] [div class=outline]
[div class=container][div class=leftcontainer][div class=charname style="text-align: right; padding-right: 4px;"]first
[div class=role style="text-align: right; padding-right: 3px;"]title[/div][/div][div class=rightcontainer][div class=charname style="text-align: left; padding-left: 4px;"]last[/div] [div class=role style="text-align: left; padding-left: 3px;"]role[/div][/div]
[div class=mainbox][div class=border][div class="tabContents tabContents01"]
[div class=text][div class=scroll][div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info.[/div][/div][/div] [div class="tabContents tabContents02" style="display: none;"]

[div class=text][div class=scroll][div class=tag]here.[/div] this section has hidden scrolls, so don't be afraid to write plenty. [div class=tag]here.[/div] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a odio placerat, ultrices tortor ultricies, maximus lectus. Integer aliquet in urna a rhoncus. Sed tempus non mi ac dictum. Maecenas at velit sodales, scelerisque velit ornare, viverra ante. Fusce dignissim malesuada dolor nec efficitur. Suspendisse cursus augue quis sapien semper semper. Phasellus eget tempus arcu. Donec id leo sit amet mauris ornare venenatis eget in lorem. Nullam cursus nibh et nibh consectetur pellentesque in at mi. Proin a turpis venenatis, posuere nibh at, hendrerit sem. In hac habitasse platea dictumst.[/div][/div][/div] [div class="tabContents tabContents03" style="display: none;"]

[div class=text][div class=scroll][div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info.[/div][/div][/div] [div class="tabContents tabContents04" style="display: none;"]

[div class=text][div class=scroll][div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info. [div class=tag]here.[/div] info.[/div][/div][/div][/div][/div] [div class=tabs]
[div class="tab tab1 chosentab"]
[div class="tab tab2"][/div] [div class="tab tab3"][/div] [div class="tab tab4"][/div] [div class="tab tab5"][/div][/div][/div][/div][/div][/div]
press for a surprise ; coded by
constellation
.

Ahahahahahaha! It's Perfect! asdfghjk- Thank you so much!!

DDD

constellation

constellation · Nov 5, 2019

Azerothii said:
Ahahahahahaha! It's Perfect! asdfghjk- Thank you so much!! DDD constellation

i’m glad you like it! it’s no problem at all hehe c:

Ayama · Nov 5, 2019

Aaaand I'm back ;P I hope this request won't be too annoying- it's kinda super specific ^^"

→ code type character sheet

→ overall size filling the whole page please

→ images one placeholder (100px by 100px) that I can replace with a faceclaim

→ colours Would it be possible to make all border and text colors editable with BBCode?

→ fonts Merriweather~

→ any specific details I'd like everything centered and aligned (not how it is in my terrible template xD ), and for the rose to be the template background. If possible, I'd like to be able to select a background color for each tab that only appears when the tab is selected (so when unselected the tabs have a transparent background). And can the content section please have an invisible scrollbar? :3

→ coder constellation please ^^

I hope this request is okay- please let me know if there's anything that's unclear- I'm not super used to this ^^" !

constellation · Nov 5, 2019

constellation

says:

Ayama ; thank you for requesting me, i will try my best to include every detail you specified! i just wanted to note that you should be able to edit the border and text colours in the code, and i will add little comments to help you identify where. c: looking forward to creating your request

Ayama · Nov 5, 2019

constellation said:
constellation
says:

Ayama ; thank you for requesting me, i will try my best to include every detail you specified! i just wanted to note that you should be able to edit the border and text colours in the code, and i will add little comments to help you identify where. c: looking forward to creating your request

Thank you so much! >w<

Luxura · Nov 7, 2019

constellation

christy

Hi guys! I'm new to this type of BBCoding, so I will likely be putting in an order to two soon!

Just wondering though, if I provided you with a graphic, would you be able to add Code to it (ie, buttons/tabs and etc.)?

Thanks so much!

constellation · Nov 7, 2019

Luxura said:
constellation
christy

Hi guys! I'm new to this type of BBCoding, so I will likely be putting in an order to two soon!
Just wondering though, if I provided you with a graphic, would you be able to add Code to it (ie, buttons/tabs and etc.)?

Thanks so much!

hi there! looking forward to seeing your request. c:
i think it entirely depends on what kind of graphic, but i think we would be able to do so.

Luxura · Nov 7, 2019

constellation said:
hi there! looking forward to seeing your request. c:
i think it entirely depends on what kind of graphic, but i think we would be able to do so.

Thank you! Keep you posted!
If/when I have a graphic, should I just PM you with it just to see if it's possible?

constellation · Nov 7, 2019

Luxura said:
Thank you! Keep you posted!
If/when I have a graphic, should I just PM you with it just to see if it's possible?

of course, you can definitely do that! (:

Luxura · Nov 7, 2019

constellation said:
of course, you can definitely do that! (:

Amazing!

I appreciate your help!

constellation · Nov 7, 2019

Luxura said:
Amazing! I appreciate your help!

of course hehe, that's what i'm here for!

constellation · Nov 7, 2019

[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]

16

écailles ; [div class=link]code

https://textuploader.com/1ke4c/raw

milkiifox ; your request has been complete! thank you for being patient with me and i hope you like it. feel free to change any fonts, colours or icons if you'd like. hover over the 'code' in the title to access the code and please do not remove the credit, thank you

[/div][/div][/div]
[class=outline]padding: 2vh; width: 500px; height: 300px; margin: auto; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;[/class] [class=border]position: relative; height: 300px; width: 500px; background-color: #ecf5ed; background-image: url(https://www.transparenttextures.com/patterns/ecailles.png);[/class] [class=sideinfo]position: absolute; top: 167.5px; left: 30.5px; height: 131px; width: 110px; letter-spacing: 1px; font-size: 9px; text-transform: uppercase;[/class] [class=info]border-bottom: 1px solid #d0e1ca; padding-top: 5px; padding-bottom: 5px; width: 110px; text-align: center; color: #aec5aa; font-family: Montserrat;[/class] [class=tabs]position: absolute; right: 20px; top: 20px; height: 260px; width: 65px;[/class] [class=tab]display: block; height: 65px; width: 65px; background-color: #d0e1ca; line-height: 65px; font-size: 20px; text-align: center; color: #aec5aa; transition: 1s;[/class] [class=chosentab]display: block; height: 65px; width: 65px; background-color: #aec5aa; color: #ecf5ed; transition: 1s;[/class] [class=tada]animation-name: {post_id}tada; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out;[/class] [class=tabContents]padding: 20px 0px 20px 20px; height: 220px; width: 203px; position: absolute; top: 20px; right: 105px; background-color: white; overflow-x: hidden;[/class] [class=sub]font-family: Montserrat; font-size: 15px; line-height: 17px; color: #aec5aa; font-weight: 400;[/class] [class=ans]font-family: Montserrat; font-size: 10px; text-align: justify; font-weight: 400; border-left: 1px solid #d0e1ca; margin: 5px; padding-left: 8px; color: #9a9a9a; letter-spacing: 1px; white-space: pre-line;[/class] [class=scroll]width: 100%; height: 100%; overflow-y: scroll; padding-right: 40px;[/class] [class name="tab" state="hover"] cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; background-color: #aec5aa; transition: 1s; color: #ecf5ed; [/class] [class name="icon1" state="hover"] animation-name: {post_id}tada; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out; [/class] [class name="icon2" state="hover"] animation-name: {post_id}tada; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out; [/class] [class name="icon3" state="hover"] animation-name: {post_id}tada; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out; [/class] [class name="icon4" state="hover"] animation-name: {post_id}tada; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; animation-timing-function: ease-in-out; [/class] [animation=tada] [keyframe=0] transform: scale3d(1, 1, 1); [/keyframe] [keyframe=10] transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); [/keyframe] [keyframe=20] transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); [/keyframe] [keyframe=30] transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); [/keyframe] [keyframe=40] transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); [/keyframe] [keyframe=50] transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); [/keyframe] [keyframe=60] transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); [/keyframe] [keyframe=70] transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); [/keyframe] [keyframe=80] transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); [/keyframe] [keyframe=90] transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); [/keyframe] [keyframe=100] transform: scale3d(1, 1, 1); [/keyframe] [/animation] [script class=tab1 on=click] hide tabContents02 hide tabContents03 hide tabContents04 slideDown 1000 tabContents01 addClass chosentab addClass tada icon1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass chosentab tab4 removeClass tada icon2 removeClass tada icon3 removeClass tada icon4 [/script] [script class=tab2 on=click] hide tabContents01 hide tabContents03 hide tabContents04 slideDown 1000 tabContents02 addClass chosentab addClass tada icon2 removeClass chosentab tab1 removeClass chosentab tab3 removeClass chosentab tab4 removeClass tada icon1 removeClass tada icon3 removeClass tada icon4 [/script] [script class=tab3 on=click] hide tabContents01 hide tabContents02 hide tabContents04 slideDown 1000 tabContents03 addClass chosentab addClass tada icon3 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab4 removeClass tada icon1 removeClass tada icon2 removeClass tada icon4 [/script] [script class=tab4 on=click] hide tabContents01 hide tabContents02 hide tabContents03 slideDown 1000 tabContents04 addClass chosentab addClass tada icon4 removeClass chosentab tab1 removeClass chosentab tab2 removeClass chosentab tab3 removeClass tada icon1 removeClass tada icon2 removeClass tada icon3 [/script] [div class=outline][div class=border]

[div class=sideinfo][div class=info]character name.[/div] [div class=info]the role.[/div] [div class=info]the age[/div] [div class=info]the gender.[/div][/div] [div class="tabContents tabContents01"][div class=scroll][div class=sub]name.[/div] [div class=ans]info.[/div] [div class=sub]age.[/div] [div class=ans]info.[/div] [div class=sub]gender.[/div] [div class=ans]info.[/div] [div class=sub]birthday.[/div] [div class=ans]info.[/div] [div class=sub]etc.[/div] [div class=ans]info.[/div][/div][/div] [div class="tabContents tabContents02" style="display: none;"][div class=scroll][div class=sub]height.[/div] [div class=ans]info.[/div] [div class=sub]weight.[/div] [div class=ans]info.[/div] [div class=sub]hair.[/div] [div class=ans]info.[/div] [div class=sub]eyes.[/div] [div class=ans]info.[/div] [div class=sub]etc.[/div] [div class=ans]info.[/div][/div][/div] [div class="tabContents tabContents03" style="display: none;"][div class=scroll][div class=sub]personality.[/div] [div class=ans]This section will scroll automatically as you type. Here is an example. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non feugiat leo. Nulla placerat magna id efficitur finibus. Vestibulum tellus sem, finibus ac aliquam non, lacinia sed odio. Nullam at tempor ante. Quisque ornare a leo et efficitur. Phasellus vitae mattis neque. Curabitur ultricies eleifend arcu, sit amet interdum ligula vestibulum nec. Fusce consectetur risus ac mauris dictum pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse accumsan augue augue, vehicula porttitor libero venenatis at. Quisque volutpat risus rutrum tempus molestie. In et consequat est, vitae mollis sapien. Nulla blandit lectus at arcu rhoncus bibendum. Nam ipsum dolor, pretium hendrerit sagittis id, consequat at orci. Praesent vel sodales ipsum. Praesent viverra commodo quam, eu sollicitudin magna.[/div] [div class=sub]etc.[/div] [div class=ans]info.[/div][/div][/div] [div class="tabContents tabContents04" style="display: none;"][div class=scroll][div class=sub]backstory.[/div] [div class=ans]All the tabs will scroll as you add more text. The scrolls are hidden.[/div] [div class=sub]etc.[/div] [div class=ans]info.[/div][/div][/div] [div class=tabs]

[div class="tab tab1 chosentab"][div class="icon1 tada"]

[/div] [div class="tab tab2"][div class=icon2][/div][/div] [div class="tab tab3"][div class=icon3][/div][/div] [div class="tab tab4"][div class=icon4][/div][/div][/div][/div][/div][/div]

coded by

constellation

.

christy · Nov 10, 2019

[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]

17

autumn leaves ; [div class=link2]code

https://pastebin.com/raw/Fkf6ZHuR

t s u k i ; here is your code! i didn't have much to go off of so i tried to stick to your requirements as much as possible. you're definitely free to change the colour scheme if you want to, or any of the fonts used! you were a little unclear about the number of tabs so i kinda went with my gut. also note that you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask! click the 'code' 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] background: #A23E48; display: inline; border-radius: 5px; color: #fff; padding: 1px 5px 3px 4px; [/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] font-family: Avenir; text-transform: uppercase; color: #A23E48; font-size: 18px; box-sizing: border-box; text-align: center; transition: .5s all ease-in-out; text-align: center; margin: auto; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] transform: scale(1.2); color: #000; transition: .5s all ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] transform: scale(1.2); color: #000; transition: .5s 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: .5s all ease-in-out; width: 330px; font-size: 11px; line-height: 26px; color: #fff; height: 350px; box-sizing: border-box; font-family: Montserrat; [/class] [class=show] opacity: 1; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab4 on=click] addClass show tabContents04 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents05 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 [/script] [script class=tab5 on=click] addClass show tabContents05 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script]

[div class="tab tab1"]

[div class="tab tab2"]

[div class="tab tab3"]

[div class="tab tab4"]

[div class="tab tab5"][/div] [/div][/div]

[div class="tabContents tabContents05 show"]

[div class="tabContents tabContents01"]

[div class=tag]name

info.
[div class=tag]age

info.
[div class=tag]gender[/div] info.
[div class=tag]sexuality[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [div class="tabContents tabContents02"]

[div class=tag]height

info.
[div class=tag]eyes

info.
[div class=tag]hair[/div] info.
[div class=tag]physique[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [div class="tabContents tabContents03"]

[div class=tag]personality

info.
[div class=tag]likes

info.
[div class=tag]dislikes[/div] info.
[div class=tag]fears[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [div class="tabContents tabContents04"]

[div class=tag]family

info.
[div class=tag]history

info.
[div class=tag]fun facts[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [/div] [/div][/div]

[div class=link]coded by christy.

https://www.rpnation.com/threads/𝗰𝗵𝗿𝗶𝘀𝘁𝘆-⧾-𝗰𝗼𝗻𝘀𝘁𝗲𝗹𝗹𝗮𝘁𝗶𝗼𝗻′𝘀-𝗰𝗿𝗶𝘀𝗽𝘆-𝗰𝗼𝗱𝗲𝘀.454487/post-9951524[/div]

t s u k i · Nov 10, 2019

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]
17

autumn leaves ; [div class=link2]code
https://pastebin.com/raw/PDq1UjFe

t s u k i ; here is your code! i didn't have much to go off of so i tried to stick to your requirements as much as possible. you're definitely free to change the colour scheme if you want to, or any of the fonts used! you were a little unclear about the number of tabs so i kinda went with my gut. also note that you'll have to use 'br' tags to space out lines/paragraphs. if you have any questions, please feel free to ask! click the 'code' 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] background: #A23E48; display: inline; border-radius: 5px; color: #fff; padding: 1px 5px 3px 4px; [/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] font-family: Avenir; text-transform: uppercase; color: #A23E48; font-size: 18px; box-sizing: border-box; text-align: center; transition: .5s all ease-in-out; text-align: center; margin: auto; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class name=tab state=hover] transform: scale(1.2); color: #000; transition: .5s all ease-in-out; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; [/class] [class=selectedTab] transform: scale(1.2); color: #000; transition: .5s 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: .5s all ease-in-out; width: 330px; font-size: 11px; line-height: 26px; color: #fff; height: 350px; box-sizing: border-box; font-family: Montserrat; [/class] [class=show] opacity: 1; z-index: 1; [/class] [script class=tab1 on=click] addClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab2 on=click] addClass show tabContents02 removeClass show tabContents01 removeClass show tabContents03 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab2 removeClass selectedTab tab1 removeClass selectedTab tab3 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab3 on=click] addClass show tabContents03 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents04 removeClass show tabContents05 addClass selectedTab tab3 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab4 removeClass selectedTab tab5 [/script] [script class=tab4 on=click] addClass show tabContents04 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents05 addClass selectedTab tab4 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab5 [/script] [script class=tab5 on=click] addClass show tabContents05 removeClass show tabContents01 removeClass show tabContents02 removeClass show tabContents03 removeClass show tabContents04 addClass selectedTab tab5 removeClass selectedTab tab1 removeClass selectedTab tab2 removeClass selectedTab tab3 removeClass selectedTab tab4 [/script]

[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[div class="tab tab4"]
[div class="tab tab5"][/div] [/div][/div]
[div class="tabContents tabContents05 show"]

[div class="tabContents tabContents01"]
[div class=tag]name
info.
[div class=tag]age
info.
[div class=tag]gender[/div] info.
[div class=tag]sexuality[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [div class="tabContents tabContents02"]
[div class=tag]height
info.
[div class=tag]eyes
info.
[div class=tag]hair[/div] info.
[div class=tag]physique[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [div class="tabContents tabContents03"]
[div class=tag]personality
info.
[div class=tag]likes
info.
[div class=tag]dislikes[/div] info.
[div class=tag]fears[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [div class="tabContents tabContents04"]
[div class=tag]family
info.
[div class=tag]history
info.
[div class=tag]fun facts[/div] info.
[div class=tag]etc[/div] info. [/div][/div][/div] [/div] [/div][/div]
[div class=link]coded by christy.
https://www.rpnation.com/threads/𝗰𝗵𝗿𝗶𝘀𝘁𝘆-⧾-𝗰𝗼𝗻𝘀𝘁𝗲𝗹𝗹𝗮𝘁𝗶𝗼𝗻′𝘀-𝗰𝗿𝗶𝘀𝗽𝘆-𝗰𝗼𝗱𝗲𝘀.454487/post-9951524[/div]

ITS SO PRETTTYYYY SQUEEEE- OMG I LOVE IT SO MUCH

Accepting Requests 𝗰𝗵𝗿𝗶𝘀𝘁𝘆 ⧾ 𝗰𝗼𝗻𝘀𝘁𝗲𝗹𝗹𝗮𝘁𝗶𝗼𝗻′𝘀 𝗰𝗿𝗶𝘀𝗽𝘆 𝗰𝗼𝗱𝗲𝘀 ❪𝗰𝗹𝗼𝘀𝗲𝗱❫

✨ average human child thing ✨

𝙘𝙖𝙣𝙙𝙮 𝙘𝙖𝙣𝙚𝙨

𝚏𝚘𝚛𝚐𝚎𝚍 𝚒𝚗 𝚝𝚑𝚎 𝚜𝚝𝚊𝚛𝚜 ☆

𝙘𝙖𝙣𝙙𝙮 𝙘𝙖𝙣𝙚𝙨

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

You are the spring I've waited for a long time

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

𝙘𝙖𝙣𝙙𝙮 𝙘𝙖𝙣𝙚𝙨

Elder Member

𝙘𝙖𝙣𝙙𝙮 𝙘𝙖𝙣𝙚𝙨

That one smol paw

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

Enthusiast

Attachments

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

Enthusiast

Thirteenth Mystic ♥Art by Peritwinkle♥

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

Thirteenth Mystic ♥Art by Peritwinkle♥

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

Thirteenth Mystic ♥Art by Peritwinkle♥

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋

𝙘𝙖𝙣𝙙𝙮 𝙘𝙖𝙣𝙚𝙨

✨ average human child thing ✨

Users who are viewing this thread