natasha.
๐ง๐ญ๐ฐ๐ณ๐ฆ๐ด๐ค๐ฆ๐ฏ๐ค๐ฆ
[div class=variables]
[div class=line]โ[/div]
[div class=line2]โ[/div]
[/div]
mainly, you'll find codes for character sheets and matching ic codes, but sometimes i practise designs in making placeholders as well so i'll post those too! click the three little lines at the top for more info. [div class=tag]thanks for stopping by![/div] [/div] [div class="tabContents tabContents01"] [div class=tag]01.[/div] most of my codes will not be mobile friendly, unfortunately. just assume that, unless specified, the codes i post cannot be viewed on a phone screen.
[div class=tag]02.[/div] i code on a macbook and i use google chrome so my codes may look different on other browsers/computers. for example, scrollbars are not visible for me, so i unfortunately cannot make invisible/hidden scrolls in any of my codes.
[div class=tag]03.[/div] all my codes will have some kind of credit, wether visible or invisible. please do not remove/alter it! i will know if you do, and i will hunt you down.
[div class=tag]04.[/div] colours and fonts can definitely be changed to suit your preferences, and if you need any help with editing the code, feel free to ask! however, i ask that you not change too much of it that the layout becomes different, but i definitely do not permit anyone to use these codes as a base to create your own. inspiration is one thing, learning is another, outright copying/plagiarisim is blatant disrespect, and i won't accept it. if you're confused about what you can or can't change, please feel free to reach out. [/div] [div class="tabContents tabContents02"]
[div class=box]
[div class=line]โ
[div class=line]โ
[div class="title title5 show"]the code garden.
[div class="title title1"]keep in mind.[/div]
[div class="title title2"]character sheets.[/div]
[div class="title title3"]in character.[/div]
[div class="title title4"]placeholders.[/div]
[/div]
[div class="tabContents tabContents05 show"]
hello hello! i'm [div class=tag]natasha
and after a long battle with myself, i decided to open up another code resource. in the past, taking on requests became a little hectic, so i opted to go with a kind of storage area where i'll occasionally post new and old codes that i make/have made for people to use whenever or however they'd like! everything here is free to use, so you don't need to ask.
mainly, you'll find codes for character sheets and matching ic codes, but sometimes i practise designs in making placeholders as well so i'll post those too! click the three little lines at the top for more info. [div class=tag]thanks for stopping by![/div] [/div] [div class="tabContents tabContents01"] [div class=tag]01.[/div] most of my codes will not be mobile friendly, unfortunately. just assume that, unless specified, the codes i post cannot be viewed on a phone screen.
[div class=tag]02.[/div] i code on a macbook and i use google chrome so my codes may look different on other browsers/computers. for example, scrollbars are not visible for me, so i unfortunately cannot make invisible/hidden scrolls in any of my codes.
[div class=tag]03.[/div] all my codes will have some kind of credit, wether visible or invisible. please do not remove/alter it! i will know if you do, and i will hunt you down.
[div class=tag]04.[/div] colours and fonts can definitely be changed to suit your preferences, and if you need any help with editing the code, feel free to ask! however, i ask that you not change too much of it that the layout becomes different, but i definitely do not permit anyone to use these codes as a base to create your own. inspiration is one thing, learning is another, outright copying/plagiarisim is blatant disrespect, and i won't accept it. if you're confused about what you can or can't change, please feel free to reach out. [/div] [div class="tabContents tabContents02"]
[div class=hover][div class=link2]eucalyptus
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10227288[/div][/div]
[div class=hover][div class=link2]bluebell
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10244096[/div][/div]
[div class=hover][div class=link2]cherry blossom
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10250931[/div][/div]
[div class=hover][div class=link2]poppy
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10268423[/div][/div]
[div class=hover][div class=link2]lavender
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10275101[/div][/div]
[div class=hover][div class=link2]coming soon!
http://tba[/div][/div]
[/div]
[div class="tabContents tabContents03"]
[div class=hover][div class=link2]eucalyptus
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10232116[/div][/div]
[div class=hover][div class=link2]daffodil
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10257510[/div][/div]
[div class=hover][div class=link2]coming soon!
http://tba[/div][/div]
[/div]
[div class="tabContents tabContents04"]
[div class=hover][div class=link2]tulip
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10280482[/div][/div]
[div class=hover][div class=link2]delphinium
https://www.rpnation.com/threads/โ-โ-๐ต๐ฉ๐ฆ-๐ค๐ฐ๐ฅ๐ฆ-๐จ๐ข๐ณ๐ฅ๐ฆ๐ฏ.466575/post-10284672[/div][/div]
[div class=hover][div class=link2]coming soon!
http://tba[/div][/div]
[/div]
[/div]
[/div]
[/div]
[div class="tab2"][div class="icon icon2"][/div][/div]
[div class="tab3"][div class="icon icon3"][/div][/div]
[div class="tab4"][div class="icon icon4"][/div][/div]
[div class="tab5"][div class="icon icon5"][/div][/div]
[/div]
[/div][/div]
[class=variables]
cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;
--color: #7dd1d4;
[/class]
[class=tag]
color: var(--color);
display: inline;
font-weight: bold;
[/class]
[class=title]
position: absolute;
text-align: right;
width: 300px;
opacity: 0;
transition: .5s ease;
[/class]
[class=hover]
height: 145px;
width: 360px;
box-sizing: border-box;
padding-top: 60px;
position: absolute;
background: rgb(0, 0, 0, 0.7);
text-align: center;
opacity: 0;
transition: .7s ease-in-out;
[/class]
[class name=hover state=hover]
opacity: 1;
transition: .7s ease-in-out;
[/class]
[class=link2]
color: #999;
display: inline-block;
font-size: 30px;
font-family: Raleway;
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(--color);
transition: .5s ease;
[/class]
[class=tab1]
height: 30px;
width: 30px;
margin: auto;
position: relative;
left: -50px;
transition: .5s ease;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=tab2]
height: 30px;
width: 30px;
margin: auto;
position: relative;
left: -50px;
transition: .5s ease;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=tab3]
height: 30px;
width: 30px;
margin: auto;
position: relative;
left: -50px;
transition: .5s ease;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=tab4]
height: 30px;
width: 30px;
margin: auto;
position: relative;
left: -50px;
transition: .5s ease;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=tab5]
height: 30px;
width: 30px;
margin: auto;
position: relative;
left: -50px;
transition: .5s ease;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=slide1]
left: 0px;
transition: .5s ease;
[/class]
[class=slide2]
left: 0px;
transition: .5s ease;
transition-delay: 0.3s;
[/class]
[class=slide3]
left: 0px;
transition: .5s ease;
transition-delay: .6s;
[/class]
[class=slide4]
left: 0px;
transition: .5s ease;
transition-delay: .9s;
[/class]
[class=slide5]
left: 0px;
transition: .5s ease;
transition-delay: 1.2s;
[/class]
[class=icon]
height: 30px;
width: 30px;
text-align: center;
border: 1px solid #eee;
border-radius: 100%;
background: #fff;
color: #ccc;
font-size: 13px;
box-sizing: border-box;
padding: 2px;
transition: .5s ease;
[/class]
[class name=icon state=hover]
color: var(--color);
border: 1px solid var(--color);
transition: .5s ease;
[/class]
[class=selectedTab]
background: var(--color);
border: 1px solid var(--color);
color: #fff;
transition: .5s ease;
[/class]
[class name=selectedTab state=hover]
background: var(--color);
border: 1px solid var(--color);
color: #fff;
transition: .5s ease;
[/class]
[class=box]
width: 60px;
height: 50px;
position: relative;
text-align: center;
color: #ddd;
left: -20px;
top: -15px;
font-family: Raleway;
font-weight: bold;
line-height: 10px;
padding-top: 10px;
box-sizing: border-box;
overflow: hidden;
position: relative;
transition: .5s ease;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=line]
font-size: 25px;
position: relative;
left: 0px;
top: 0px;
transition: .5s ease;
[/class]
[class=line2]
font-size: 25px;
position: relative;
top: 9px;
left: -100px;
transition: .5s ease;
[/class]
[class=slide]
left: 0px;
color: var(--color);
transition: .5s ease;
[/class]
[class=rotate]
transform: rotate(90deg);
line-height: 0px;
color: var(--color);
left: 3px;
top: 15px;
transition: .5s ease;
[/class]
[class=tabContents]
position: absolute;
opacity: 0;
transition: 1s ease;
width: 360px;
background: #fff;
height: 310px;
overflow-y: auto;
font-size: 12px;
line-height: 26px;
box-sizing: border-box;
[/class]
[class=show]
opacity: 1;
z-index: 1;
[/class]
[script class=box on=mouseenter]
if (eq ${open} 0) (addClass rotate line)
if (eq ${open} 0) (addClass slide line2)
[/script]
[script class=box on=mouseleave]
if (eq ${open} 0) (removeClass rotate line)
if (eq ${open} 0) (removeClass slide line2)
[/script]
[script class=box on=click]
if (eq ${open} 0) (addClass slide1 tab1) (removeClass slide1 tab1)
if (eq ${open} 0) (addClass slide2 tab2) (removeClass slide2 tab2)
if (eq ${open} 0) (addClass slide3 tab3) (removeClass slide3 tab3)
if (eq ${open} 0) (addClass slide4 tab4) (removeClass slide4 tab4)
if (eq ${open} 0) (addClass slide5 tab5) (removeClass slide5 tab5)
if (eq ${open} 0) (set open 1) (set open 0)
[/script]
[script class=icon1 on=click]
addClass show tabContents01
removeClass show tabContents02
removeClass show tabContents03
removeClass show tabContents04
removeClass show tabContents05
addClass show title1
removeClass show title5
removeClass show title2
removeClass show title3
removeClass show title4
addClass selectedTab icon1
removeClass selectedTab icon2
removeClass selectedTab icon3
removeClass selectedTab icon4
removeClass selectedTab icon5
[/script]
[script class=icon2 on=click]
addClass show tabContents02
removeClass show tabContents01
removeClass show tabContents03
removeClass show tabContents04
removeClass show tabContents05
addClass show title2
removeClass show title1
removeClass show title5
removeClass show title3
removeClass show title4
addClass selectedTab icon2
removeClass selectedTab icon1
removeClass selectedTab icon3
removeClass selectedTab icon4
removeClass selectedTab icon5
[/script]
[script class=icon3 on=click]
addClass show tabContents03
removeClass show tabContents01
removeClass show tabContents02
removeClass show tabContents04
removeClass show tabContents05
addClass show title3
removeClass show title1
removeClass show title2
removeClass show title5
removeClass show title4
addClass selectedTab icon3
removeClass selectedTab icon1
removeClass selectedTab icon2
removeClass selectedTab icon4
removeClass selectedTab icon5
[/script]
[script class=icon4 on=click]
addClass show tabContents04
removeClass show tabContents01
removeClass show tabContents02
removeClass show tabContents03
removeClass show tabContents05
addClass show title4
removeClass show title1
removeClass show title2
removeClass show title3
removeClass show title5
addClass selectedTab icon4
removeClass selectedTab icon1
removeClass selectedTab icon2
removeClass selectedTab icon3
removeClass selectedTab icon5
[/script]
[script class=icon5 on=click]
addClass show tabContents05
removeClass show tabContents01
removeClass show tabContents02
removeClass show tabContents03
removeClass show tabContents04
addClass show title5
removeClass show title1
removeClass show title2
removeClass show title3
removeClass show title4
addClass selectedTab icon5
removeClass selectedTab icon1
removeClass selectedTab icon2
removeClass selectedTab icon3
removeClass selectedTab icon4
[/script]
Last edited:
