Resource realm of fae

[fantasy]

welcome to my humble abode ! i'm a self-taught coder, that simply wishes to share my codes with others. it's been awhile since i've coded, so go easy on me please. lastly, if you choose to use my code, please keep the credit on it, but feel free to change it to your liking.

REALM OF FAE;

REALM OF FAE;

 

[fantasy]

OCEAN EYES

CS + MOBILE FRIENDLY​

eeee !! my first code of the thread. it's a bit messy, due to me pulling this from the archives of discarded codes from awhile ago, but is very much usable. if you ever need any assistance using this, don't be afraid to ask! click the title above for the code.

[div class="tabsContent tabsContent1"]

[div class=whitesquare]

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

[div class=whitesquare]

[div class="info" style="width: 270px; height: 200px; margin-left: -10px; margin-left: 0px;"]

INFO HERE

[/div] [/DIV][/DIV] [div class="tabsContent tabsContent3" style="display: none;"]

[div class=whitesquare][div class=header]

[div class="info" style="padding-top: 10px; height: 210px; width: 355px;"]

INFO HERE 2X

[/DIV][/div] [/DIV][/DIV] [div class="tabsContent tabsContent4" style="display: none;"]

[div class=whitesquare][div class="info" style="width: 355px;"]

INFO HERE 3X

[/div] [/DIV][/DIV] [div class=homebar]

[div class=description]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit, arcu eget ullamcorper condimentum, ex ipsum iaculis lacus, non dapibus mi nisi sed ipsum. Cras consectetur nisi eget sem tempus, in fermentum lacus consequat. Etiam laoreet, ex in varius consequat, ligula magna sodales eros, ac pulvinar urna lorem id urna. Integer hendrerit ac ante id rutrum. Maecenas maximus urna fringilla gravida tempor. Proin congue fermentum sodales. In mauris metus, egestas id dapibus at, sagittis eu nibh. Donec et neque a augue accumsan sagittis non vitae purus. Sed a dignissim sapien. Praesent non dictum turpis. Curabitur risus dolor, auctor in velit eu, feugiat malesuada mauris. In vitae magna hendrerit, efficitur urna cursus, sollicitudin nunc. Aliquam erat volutpat. Maecenas quis lectus sit amet odio interdum tincidunt condimentum id mauris. Nullam vitae sagittis ante, vel viverra nisl. Donec vel pulvinar purus. Vestibulum aliquet purus a enim pretium, rhoncus posuere nunc tristique. Nulla lectus orci, tempor vitae metus at, tempus ullamcorper eros. Aliquam sed diam eget ligula ultricies vehicula. In a maximus mauris. Sed rhoncus ex arcu, eu mollis eros sollicitudin vitae. nec eros risus. In tempor lacus et ipsum blandit hendrerit ut sit amet tellus.

[div class=homeicon][/div] [div class=tabs][div class=tab][div class=first][div class=icon]1[/div][/div][/div][div class=tab][div class=second][div class=icon]2[/div][/div][/div][div class=tab][div class=third][div class=icon]3[/div][/div][/div][div class=tab][div class=fourth][div class=icon]4[/div][/div][/div][/div][/div] [/DIV][div class=credit]fairytip[/div]

__________________________________________________TAB CLASSES HERE________________________________________________________

[class=tabs]
box-sizing: border-box; margin-top: -5px; margin-left: -10px;
background-color: transparent;
color: #000;
font-size: 11px;
line-height: 1;
width: 180px;
text-align: left;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[class=tab]
box-sizing: border-box;
display: inline-block;
cursor: pointer;
padding: 0px 0px;
width: 20%;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[script class=first on=click]
hide tabsContent2
hide tabsContent3
hide tabsContent4
fadeOut 600 tabsContent2
fadeOut 600 tabsContent3
fadeOut 600 tabsContent4
fadeOut 600 tabsContent1
fadeIn 800 tabsContent1[/script]

[script class=second on=click]
hide tabsContent1
hide tabsContent3
hide tabsContent4
fadeOut 600 tabsContent1
fadeOut 600 tabsContent3
fadeOut 600 tabsContent4
fadeOut 600 tabsContent2
fadeIn 800 tabsContent2[/script]

[script class=third on=click]
hide tabsContent2
hide tabsContent1
hide tabsContent4
fadeOut 600 tabsContent2
fadeOut 600 tabsContent1
fadeOut 600 tabsContent4
fadeOut 600 tabsContent3
fadeIn 800 tabsContent3[/script]

[script class=fourth on=click]
hide tabsContent2
hide tabsContent3
hide tabsContent1
fadeOut 600 tabsContent2
fadeOut 600 tabsContent3
fadeOut 600 tabsContent1
fadeOut 600 tabsContent4
fadeIn 800 tabsContent4[/script]

[class=icon]
margin-left: 18px; margin-top: -5px;
width: 10px; height: 10px;
color: #000;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=homeicon]
width: 70px; height: 70px; margin-left: 40px; margin-top: -10px;
background:url(https://i.pinimg.com/564x/e0/c4/ac/e0c4acef1ddb34559c04c7a91c4685dc.jpg); border-radius: 100%; background-size: 70px;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]

[class=description]
float: right;
width: 155px; height: 70px;
border-left: 1px solid #000;
box-sizing: border-box; overflow: hidden;
color: #000; font-size: 10px; text-align: justify; padding: 15px; padding-top: 5px; padding-left: 20px;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]



[class=homebar]
margin: auto; margin-top: 0px;
width: 340px; height: 100px;
background-color: #fff;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=whitesquare]
margin: auto;
width: 340px; height: 300px;
background: #fff;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;]
[/class]
[class=header]
margin: auto;
position: relative; top: 10px;
width: 320px; height: 100px;
background:url(https://i.pinimg.com/564x/5a/fd/b4/5afdb4c49677cafa533406ae4bb2a6d2.jpg); background-size: 110px;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=info]
margin: auto;
width: 340px; height: 300px;
box-sizing: border-box; overflow: hidden;
color: #000; font-size: 10px; text-align: justify; padding: 10px; padding-top: 5px;
cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]
[class=credit]
font-family: times new roman; font-size: 9px; color: #000; text-align: center;
[/class]
[/DIV]