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

christy said:
christy
says:
t s u k i 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!
Click to expand...

Yay!!!! Thank you so much! Take your time and have a awesome day!
 
[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
byeol byeol ; 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] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div] [/div]
 
Last edited:
omg christy christy ! youโ€™re a real fucking goddess. thank you, the code looks spectacular!
 
[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
Colorless Spectrum 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
.
 
Last edited:
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
Colorless Spectrum 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
.
Click to expand...
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.
 
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.
Click to expand...
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!
 
[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
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 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
.
 
[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
jasmyn 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.
โœ
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]
15
jasmyn 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.
โœ
https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div]
Click to expand...
I absolutely love it!!! Thank you so much for taking the time to create this! (:
 
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
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 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
.
Click to expand...

Ahahahahahaha! It's Perfect! asdfghjk- Thank you so much!! :DDDD constellation constellation
 
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 ^^" !​
 

Attachments

  • template.jpg
    template.jpg
    82.9 KB · Views: 16
  • Black-Rose-575961073df78c9b46af760a.jpg
    Black-Rose-575961073df78c9b46af760a.jpg
    49.9 KB · Views: 18
constellation
says:
Ayama 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
 
constellation said:
constellation
says:
Ayama 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
Click to expand...
Thank you so much! >w< ​
 
constellation constellation
christy 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! ๐Ÿ™
 
Luxura said:
constellation constellation
christy 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! ๐Ÿ™
Click to expand...
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.
 
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.
Click to expand...

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?
 
[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
milkiifox 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
.
 
Last edited:
[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
t s u k i 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] 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]
17
t s u k i 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] https://www.rpnation.com/threads/๐—ฐ๐—ต๐—ฟ๐—ถ๐˜€๐˜๐˜†-โงพ-๐—ฐ๐—ผ๐—ป๐˜€๐˜๐—ฒ๐—น๐—น๐—ฎ๐˜๐—ถ๐—ผ๐—ปโ€ฒ๐˜€-๐—ฐ๐—ฟ๐—ถ๐˜€๐—ฝ๐˜†-๐—ฐ๐—ผ๐—ฑ๐—ฒ๐˜€.454487/post-9951524[/div]
Click to expand...

ITS SO PRETTTYYYY SQUEEEE- OMG I LOVE IT SO MUCH
 
You must log in or register to reply here.

Users who are viewing this thread

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