natasha.
๐ง๐ญ๐ฐ๐ณ๐ฆ๐ด๐ค๐ฆ๐ฏ๐ค๐ฆ
[class=tag2]
display: inline-block;
border-radius: 5px;
background: #000;
text-align: center;
font-family: Montserrat;
font-weight: bold; font-style: italic;
font-size: 12px;
padding: 3px 10px 6px 10px;
color: #fff;
[/class]
[class=link2]
display: inline-block;
color: #999;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
transition: 1s;
[/class]
[class name=link2 state=hover]
color: #000;
transition: 1s;
[/class]
[div class=tag2]#medium sized[/div]
[div class=tag2]#tabs[/div]
[div class=tag2]#animation[/div]
[div class=tag2]#not mobile friendly[/div]
[/div]
jasmyn
: here's your first code! i made icon tabs, like you requested, and went with an overall blue scheme, but you can always change the colour. i also put three image placeholders in each tab, which you'll just have to change the link for to replace it with the images you want to use. this code is unfortunately not mobile friendly but should be compatible on all desktop views!
hope you like it, and please remember to never remove the credit! also, feel free if you have any questions regarding the code and i'd be happy to help.
[/div][/div]
[div class="tab tab3"]
[div class="tab tab4"]
[/div]
[div class=tag]age.[/div] name here.
[div class=tag]gender.[/div] name here.
[div class=tag]sexuality.[/div] name here.
[div class=tag]birthday.[/div] name here.
[div class=tag]occupation.[/div] name here. [/div][/div] [div class="tabContents tabContents02"]
[div class=tag]virtues.
info here.
[div class=tag]vices.[/div] info here.
[div class=tag]likes.[/div] info here.
[div class=tag]dislikes.[/div] info here.
[div class=tag]fears.[/div] info here.
[div class=tag]talents.[/div] info here.
[div class=tag]hobbies.[/div] info here. [/div][/div] [div class="tabContents tabContents03"]
[div class=tag]birth.
info here.
[div class=tag]childhood.[/div] info here.
[div class=tag]adolescence.[/div] info here.
[div class=tag]teenage.[/div] info here.
[div class=tag]late teens.[/div] info here.
[div class=tag]college years.[/div] info here.
[div class=tag]adulthood.[/div] info here. [/div][/div] [div class="tabContents tabContents04"]
[div class=tag]theme song.
info here.
[div class=tag]mbti.[/div] info here.
[div class=tag]enneagram.[/div] info here.
[div class=tag]alignment.[/div] info here.
[div class=tag]blood type.[/div] info here. [/div][/div] [/div]
[/div]
[/div][/div]
https://www.rpnation.com/members/natasha.78204/[/div]
[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: #63d0e0;
font-family: Playfair Display;
font-size: 16px;
padding-left: 20px;
text-transform: uppercase;
padding-top: 15px;
[/class]
[class=tab]
height: 30px;
width: 30px;
border-radius: 100%;
background: #222;
margin: auto;
box-sizing: border-box;
text-align: center;
padding-top: 4px;
color: #fff;
transition: 1s all ease-in-out;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class name=tab state=hover]
color: #63d0e0;
transition: 1s all ease-in-out;
[/class]
[class name=selectedTab]
animation: {post_id}pulse;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
color: #63d0e0;
[/class]
[animation=pulse]
[keyframe=0]
box-shadow: 0 0 0 0px rgba(99, 208, 224, 0.7)
[/keyframe]
[keyframe=100]
box-shadow: 0 0 0 15px rgba(99, 208, 224, 0);
[/keyframe]
[/animation]
[class=tabContents]
position: absolute;
opacity: 0;
transition: all 1s;
width: 480px;
font-size: 12px;
line-height: 26px;
color: #000;
height: 500px;
box-sizing: border-box;
[/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
addClass selectedTab tab1
removeClass selectedTab tab2
removeClass selectedTab tab3
removeClass selectedTab tab4
[/script]
[script class=tab2 on=click]
addClass show tabContents02
removeClass show tabContents01
removeClass show tabContents03
removeClass show tabContents04
addClass selectedTab tab2
removeClass selectedTab tab1
removeClass selectedTab tab3
removeClass selectedTab tab4
[/script]
[script class=tab3 on=click]
addClass show tabContents03
removeClass show tabContents01
removeClass show tabContents02
removeClass show tabContents04
addClass selectedTab tab3
removeClass selectedTab tab1
removeClass selectedTab tab2
removeClass selectedTab tab4
[/script]
[script class=tab4 on=click]
addClass show tabContents04
removeClass show tabContents01
removeClass show tabContents02
removeClass show tabContents03
addClass selectedTab tab4
removeClass selectedTab tab1
removeClass selectedTab tab2
removeClass selectedTab tab3
[/script]
01. candy floss.
[div class=tag2]#candy floss
[div class=tag2]#character sheet code
jasmyn
: here's your first code! i made icon tabs, like you requested, and went with an overall blue scheme, but you can always change the colour. i also put three image placeholders in each tab, which you'll just have to change the link for to replace it with the images you want to use. this code is unfortunately not mobile friendly but should be compatible on all desktop views!
hope you like it, and please remember to never remove the credit! also, feel free if you have any questions regarding the code and i'd be happy to help.
[div class="tab selectedTab tab1"]
[div class="tab tab2"]
[div class="tabContents tabContents01 show"]
[div class=tag]full name.
name here.
[div class=tag]nickname.
name here.
[div class=tag]nickname.
[div class=tag]age.[/div] name here.
[div class=tag]gender.[/div] name here.
[div class=tag]sexuality.[/div] name here.
[div class=tag]birthday.[/div] name here.
[div class=tag]occupation.[/div] name here. [/div][/div] [div class="tabContents tabContents02"]
[div class=tag]vices.[/div] info here.
[div class=tag]likes.[/div] info here.
[div class=tag]dislikes.[/div] info here.
[div class=tag]fears.[/div] info here.
[div class=tag]talents.[/div] info here.
[div class=tag]hobbies.[/div] info here. [/div][/div] [div class="tabContents tabContents03"]
[div class=tag]childhood.[/div] info here.
[div class=tag]adolescence.[/div] info here.
[div class=tag]teenage.[/div] info here.
[div class=tag]late teens.[/div] info here.
[div class=tag]college years.[/div] info here.
[div class=tag]adulthood.[/div] info here. [/div][/div] [div class="tabContents tabContents04"]
[div class=tag]mbti.[/div] info here.
[div class=tag]enneagram.[/div] info here.
[div class=tag]alignment.[/div] info here.
[div class=tag]blood type.[/div] info here. [/div][/div] [/div]
the role
Last edited: