natasha.
๐ง๐ญ๐ฐ๐ณ๐ฆ๐ด๐ค๐ฆ๐ฏ๐ค๐ฆ
[div class=variables2]
you can easily change the main accent colour by going to the classes. just change the colour under the class [div class=tag2]variables[/div] and you'll find that the main accent will change everywhere! it's a much easier solution than changing all the colours individually.
unfortunately, the code is [div class=tag2]not mobile friendly[/div], nor does it have any hidden scrolls. please remember: [div class=tag2]don't remove credit[/div]! and feel free to reach out to me if you have any questions regarding the code or what you can/can't change!
also, just click the link icon in the top, left corner to be taken to the raw code! [/div] [/div] [/div][/div] [class=variables2] cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; --accent: #8ea859; [/class] [class=container1] box-sizing: border-box; max-width: 400px; background: #fff; border: 1px solid #eee; padding: 20px; height: 400px; margin: auto; text-align: right; transition: .5s ease; [/class] [class name=container1 state=hover] border: 1px solid var(--accent); transition: .5s ease; [/class] [class=tag2] color: var(--accent); display: inline; font-weight: bold; [/class] [class=title] font-family: Raleway; color: var(--accent); font-size: 25px; text-align: right; position: relative; top: -60px; width: 300px; background: #fff; display: inline-block; right: 0px; [/class] [class=box] width: 60px; height: 50px; position: relative; text-align: center; color: #ddd; left: -20px; top: -15px; font-size: 20px; font-family: Raleway; font-weight: bold; padding-top: 10px; box-sizing: border-box; overflow: hidden; position: relative; transition: .5s ease; [/class] [class=link2] color: #ddd; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: .5s ease; [/class] [class name=link2 state=hover] color: var(--accent); transition: .5s ease; [/class]
[div class=variables]
[div class="icon icon3"][/div]
[div class="icon icon4 show"][/div]
[/div][/div]
[/div][/div]
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/[/div]
[class=variables]
cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;
--color: #8ea859;
[/class]
[class=link]
display: inline-block;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
font-size: 10px;
font-family: Avenir;
color: #999;
[/class]
[class=tag]
color: var(--color);
text-transform: uppercase;
font-weight: bold;
width: 25%;
margin-right: 5%;
[/class]
[class=icon]
font-size: 33px;
color: #000;
transition: ease 2s;
opacity: 0;
position: absolute;
text-align: center;
[/class]
[class=tab]
height: 25px;
width: 25px;
border-radius: 100%;
background: #fff;
box-sizing: border-box;
font-size: 10px;
text-align: center;
padding: 5px;
border: 1px solid #e6e6e6;
transition: ease-in-out 1s;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class name=tab state=hover]
border: 1px solid var(--color);
transition: ease-in-out 1s;
[/class]
[class=selectedTab]
border: 1px solid var(--color);
background: var(--color);
transition: ease-in-out 1s;
[/class]
[class=container]
position: relative;
overflow: hidden;
height: 400px;
width: 560px;
top: -1400px;
left: 600px;
color: #000;
line-height: 22px;
font-size: 12px;
transition: ease 2s;
[/class]
[class=tabContents1]
background: #fff;
border-radius: 15px;
width: 560px;
height: 340px;
overflow: hidden;
position: relative;
box-sizing: border-box;
transition: ease 2s;
top: -700px;
[/class]
[class=slide1]
top: 30px;
transition: ease 2s;
z-index: 1;
[/class]
[class=tabContents3]
background: #fff;
border-radius: 15px;
width: 560px;
overflow: hidden;
height: 340px;
box-sizing: border-box;
position: relative;
transition: ease 2s;
top: 100px;
[/class]
[class=slide3]
top: -650px;
transition: ease 2s;
z-index: 1;
[/class]
[class=tabContents2]
background: #fff;
border-radius: 15px;
width: 560px;
overflow: hidden;
height: 340px;
position: relative;
box-sizing: border-box;
transition: ease 2s;
left: 800px;
top: -310px;
[/class]
[class=slide2]
left: 0px;
transition: ease 2s;
z-index: 1;
[/class]
[class=tabContents4]
border-radius: 15px;
width: 560px;
height: 340px;
position: relative;
transition: ease 1s;
top: -990px;
opacity: 0;
text-align: center;
[/class]
[class=show]
opacity: 1;
transition: ease 1s;
transition-delay: 1s;
[/class]
[script class=tab1 on=click]
if (eq ${open} 0) (addClass slide1 tabContents1)
if (eq ${open} 0) (removeClass slide2 tabContents2)
if (eq ${open} 0) (removeClass slide3 tabContents3)
if (eq ${open} 0) (removeClass show tabContents4)
if (eq ${open} 0) (addClass selectedTab tab1)
if (eq ${open} 0) (removeClass selectedTab tab2)
if (eq ${open} 0) (removeClass selectedTab tab3)
if (eq ${open} 0) (removeClass selectedTab tab4)
if (eq ${open} 0) (addClass show icon1)
if (eq ${open} 0) (removeClass show icon2)
if (eq ${open} 0) (removeClass show icon3)
if (eq ${open} 0) (removeClass show icon4)
[/script]
[script class=tab2 on=click]
if (eq ${open} 0) (addClass slide2 tabContents2)
if (eq ${open} 0) (removeClass slide1 tabContents1)
if (eq ${open} 0) (removeClass slide3 tabContents3)
if (eq ${open} 0) (removeClass show tabContents4)
if (eq ${open} 0) (addClass selectedTab tab2)
if (eq ${open} 0) (removeClass selectedTab tab1)
if (eq ${open} 0) (removeClass selectedTab tab3)
if (eq ${open} 0) (removeClass selectedTab tab4)
if (eq ${open} 0) (addClass show icon2)
if (eq ${open} 0) (removeClass show icon1)
if (eq ${open} 0) (removeClass show icon3)
if (eq ${open} 0) (removeClass show icon4)
[/script]
[script class=tab3 on=click]
if (eq ${open} 0) (addClass slide3 tabContents3)
if (eq ${open} 0) (removeClass slide1 tabContents1)
if (eq ${open} 0) (removeClass slide2 tabContents2)
if (eq ${open} 0) (removeClass show tabContents4)
if (eq ${open} 0) (addClass selectedTab tab3)
if (eq ${open} 0) (removeClass selectedTab tab1)
if (eq ${open} 0) (removeClass selectedTab tab2)
if (eq ${open} 0) (removeClass selectedTab tab4)
if (eq ${open} 0) (addClass show icon3)
if (eq ${open} 0) (removeClass show icon2)
if (eq ${open} 0) (removeClass show icon1)
if (eq ${open} 0) (removeClass show icon4)
[/script]
[script class=tab4 on=click]
if (eq ${open} 0) (addClass show tabContents4)
if (eq ${open} 0) (removeClass slide1 tabContents1)
if (eq ${open} 0) (removeClass slide2 tabContents2)
if (eq ${open} 0) (removeClass slide3 tabContents3)
if (eq ${open} 0) (addClass selectedTab tab4)
if (eq ${open} 0) (removeClass selectedTab tab2)
if (eq ${open} 0) (removeClass selectedTab tab3)
if (eq ${open} 0) (removeClass selectedTab tab1)
if (eq ${open} 0) (addClass show icon4)
if (eq ${open} 0) (removeClass show icon2)
if (eq ${open} 0) (removeClass show icon3)
if (eq ${open} 0) (removeClass show icon1)
[/script]
[div class=container1]
[div class=box][div class=link2]
https://pastebin.com/raw/J5T0mYHE[/div]
[div class=title]01. eucalyptus[/div]
first freebie! i made this for a group rp but tried to adjust the tabs so they can be used for just about any cs. feel free to change the titles of the tags in each tab to suit your preference/need for detail. the code totally has places for [div class=tag2]four images
, though the very first one can be a little finnicky so let me know if you need some help with making it look right. i tried to make it as user friendly as possible!
you can easily change the main accent colour by going to the classes. just change the colour under the class [div class=tag2]variables[/div] and you'll find that the main accent will change everywhere! it's a much easier solution than changing all the colours individually.
unfortunately, the code is [div class=tag2]not mobile friendly[/div], nor does it have any hidden scrolls. please remember: [div class=tag2]don't remove credit[/div]! and feel free to reach out to me if you have any questions regarding the code or what you can/can't change!
also, just click the link icon in the top, left corner to be taken to the raw code! [/div] [/div] [/div][/div] [class=variables2] cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; --accent: #8ea859; [/class] [class=container1] box-sizing: border-box; max-width: 400px; background: #fff; border: 1px solid #eee; padding: 20px; height: 400px; margin: auto; text-align: right; transition: .5s ease; [/class] [class name=container1 state=hover] border: 1px solid var(--accent); transition: .5s ease; [/class] [class=tag2] color: var(--accent); display: inline; font-weight: bold; [/class] [class=title] font-family: Raleway; color: var(--accent); font-size: 25px; text-align: right; position: relative; top: -60px; width: 300px; background: #fff; display: inline-block; right: 0px; [/class] [class=box] width: 60px; height: 50px; position: relative; text-align: center; color: #ddd; left: -20px; top: -15px; font-size: 20px; font-family: Raleway; font-weight: bold; padding-top: 10px; box-sizing: border-box; overflow: hidden; position: relative; transition: .5s ease; [/class] [class=link2] color: #ddd; cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important; transition: .5s ease; [/class] [class name=link2 state=hover] color: var(--accent); transition: .5s ease; [/class]
[div class=variables]
[div class="tab tab1"]
[div class="tab tab2"]
[div class="tab tab3"]
[/div]
[div class="tab tab4"]
[/div]
[/div]
[div class=container]
[div class=tabContents1]
[div class=tag]full name
info here
[div class=tag]nickname/s
info here
[div class=tag]age
info here
[div class=tag]gender
info here
[/div]
[div class=tag]sexuality
info here
[/div]
[div class=tag]ethnicity
info here
[/div]
[div class=tag]occupation
info here
[/div]
[div class=tag]role
info here
[/div]
[/div][/div]
[/div][/div]
[div class=tabContents2]
[div class=tag]height + weight
info here
[div class=tag]eyes
info here
[div class=tag]hair
info here
[div class=tag]build
info here
[/div]
[div class=tag]attire
info here
[/div]
[div class=tag]distinguishing features
info here
[/div]
[div class=tag]modifications
info here
[/div]
[div class=tag]scars & markings
info here
[/div]
[div class=tag]face claim
info here
[/div]
[/div][/div]
[/div][/div]
[div class=tabContents3]
[div class=tag]personality
info here
[div class=tag]likes
info here
[div class=tag]dislikes
info here
[div class=tag]fears
info here
[/div]
[div class=tag]ailments
info here
[/div]
[div class=tag]family
info here
[/div]
[div class=tag]biography
info here
[/div]
[div class=tag]misc
info here
[/div]
[/div][/div]
[/div][/div]
[div class="tabContents4 show"]
character name
the role
[/div]
[/div]
[div class="icon icon1"]
[div class="icon icon2"]
Last edited: