witchy

[div class=container][div=height:3px;width:100px;position:relative;z-index:6;left:-6px;][font=Open Sans][COLOR=dimgray][SIZE=2]⠀♡coded by uxie♡[/SIZE][/COLOR][/font][/div]
[div=width:370px;height:150px;background:url('https://78.media.tumblr.com/b3ec6af440b608618a5fb11ed2dc2c40/tumblr_o1zb6lIX821u64t9ho1_500.gif');background-size:100%;position:relative;top:-1px;][div class=title][div class=titletext][font=Cookie]it's a name[/font][/div][/div][/div][div class=tabcontainer]
[div class=tab1][div class=tabtitlec1][div class=tabtitle1][font=Quicksand]BASICS[/font][/div][/div][/div][div class=tab2][div class=tabtitlec2][div class=tabtitle2][font=Quicksand]PERSONA[/font][/div][/div][/div][div class=tab3][div class=tabtitlec3][div class=tabtitle3][font=Quicksand]HISTORY[/font][/div][/div][/div]

[/div]
[div class=contentcontainer][div class=tabcontent1][font=Karla]
tab1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/font][/div][nobr]

[/nobr][div class=tabcontent2 style=display:none][font=Karla]
tab2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/font][/div][nobr]

[/nobr][div class=tabcontent3 style=display:none][font=Karla]
tab3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus magna vel vestibulum sollicitudin. Aenean fringilla velit ut mattis ultrices. Aliquam erat volutpat. Proin fringilla mattis erat eget volutpat. In velit nibh, ornare eget velit nec, lacinia facilisis orci. Ut varius commodo dui vitae tristique. Sed non turpis ultricies, pellentesque lorem ac, mattis dolor. Vestibulum dignissim lacus eget condimentum pharetra.

Quisque in volutpat mi. Nullam leo tellus, imperdiet at felis vitae, lobortis pellentesque augue. Nunc aliquet, neque sed ultricies elementum, sem sapien varius turpis, eget commodo odio velit nec velit. Curabitur ut metus arcu. In aliquet eu justo nec feugiat. Praesent ut viverra lectus. Donec tempor bibendum elit, tincidunt lobortis leo lacinia in. Quisque consequat urna sit amet felis mollis posuere. Nunc tristique nulla quis tellus eleifend ornare. Mauris in posuere urna. Ut facilisis sit amet felis vel cursus. Suspendisse ac quam commodo, pellentesque nibh eget, mattis eros. Vivamus non finibus metus, quis pharetra augue. Aenean quis bibendum ex.

Donec mauris risus, eleifend scelerisque pharetra ut, posuere ac elit. Morbi at egestas nisi, quis lobortis libero. Sed ac imperdiet purus. In lacus neque, vestibulum vitae purus sit amet, sagittis mollis sapien. Donec nec dolor quis ex malesuada laoreet vitae eu tortor. Fusce eros sem, tempor et risus sit amet, cursus euismod nibh. Aliquam molestie ac felis eu egestas. Vivamus ac enim mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
[/font][/div]
[div=color:black;width:300px;height:10px;][divide][/divide][/div]

[/div][/div]
[nobr]

[class=container]
height:530px;
width:370px;
margin:auto;
cursor:default;
background-color:white;
[/class]

[class=contentcontainer]
height:218px;
width:348px;
margin:auto;
position:relative;
top:-17px;
overflow:hidden;
padding:10px;
border-bottom:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
[/class]

[class=tabcontent1]
overflow-y:scroll;
height:100%;
width:100%;
padding-right:50px;
margin-left:8px;
[/class]

[class name=tabcontent1]
font-size:12px;
color:black;
text-align:justify;
[/class]

[class=tabcontent2]
overflow-y:scroll;
height:100%;
width:100%;
padding-right:50px;
margin-left:8px;
[/class]

[class name=tabcontent2]
font-size:12px;
color:black;
text-align:justify;
[/class]

[class=tabcontent3]
overflow-y:scroll;
height:100%;
width:100%;
padding-right:50px;
margin-left:8px;
[/class]

[class name=tabcontent3]
font-size:12px;
color:black;
text-align:justify;
[/class]


[class=title]
height:45px;
min-width:90px;
background-color:white;
margin:auto;
position:relative;
top:45px;
left:108px;
display:inline-block;
padding:10px;
padding-right:12px;
border-radius:1.8px;
padding-top:8px;
[/class]

[class name=titletext]
font-size:40px;
color:#3a3a44;
text-align:center;
font-weight:bold;
text-shadow: 1px 2px #b37aba;
font-style:italic;
position:relative;
top:-8px;
left:-1px;
[/class]

[class=tabcontainer]
height:100px;
width:370px;
position: relative;
left:0px;
top:-17px;
[/class]

[class=tab1]
height:100px;
width:120px;
background:url('https://78.media.tumblr.com/b5e323acec891d5fd88737fe99410849/tumblr_p3ffigzFzG1u64t9ho2_1280.jpg');
background-size:100%;
position-relative;
margin-right:5px;
background-position: 0% 90%;
display:inline-block;
cursor:pointer;
[/class]

[class=tabtitlec1]
height:100px;
width:120px;
display:inline-block;
opacity:0;
transition:0.7s;
position:relative;
[/class]

[class name=tabtitlec1 state=hover]
opacity:0.87;
[/class]

[class=tabtitle1]
height:22px;
width:66px;
background-color:white;
position-relative;
left:25px;
padding:4px;
font-size:14px;
color:dimgray;
font-stretch:condensed;
text-align:center;
position:absolute;
top:35px;
left:21.5px;
border-radius:1.8px;
[/class]

[class=tab2]
height:100px;
width:120px;
background:url('https://78.media.tumblr.com/a4266b2ec216dd7615cf76d7cd4b6084/tumblr_p3je25wSN51u64t9ho3_1280.jpg');
background-size:100%;
position-relative;
margin-right:5px;
background-position: 0% 40%;
display:inline-block;
cursor:pointer;
[/class]

[class=tabtitlec2]
height:100px;
width:120px;
display:inline-block;
opacity:0;
transition:0.7s;
position:relative;
[/class]

[class name=tabtitlec2 state=hover]
opacity:0.87;
[/class]

[class=tabtitle2]
height:22px;
width:72px;
background-color:white;
position-relative;
left:25px;
padding:4px;
font-size:14px;
color:dimgray;
font-stretch:condensed;
text-align:center;
position:absolute;
top:35px;
left:19.5px;
border-radius:1.8px;
[/class]

[class=tab3]
height:100px;
width:120px;
background:url('https://78.media.tumblr.com/f04ef520f64247dfbd1e17e6434473b9/tumblr_p3ffigzFzG1u64t9ho3_1280.jpg');
background-size:100%;
position-relative;
background-position: 10% 20%;
display:inline-block;
cursor:pointer;
[/class]

[class=tabtitlec3]
height:100px;
width:120px;
display:inline-block;
opacity:0;
transition:0.7s;
position:relative;
[/class]

[class name=tabtitlec3 state=hover]
opacity:0.87;
[/class]

[class=tabtitle3]
height:22px;
width:70px;
background-color:white;
position-relative;
left:25px;
padding:4px;
font-size:14px;
color:dimgray;
font-stretch:condensed;
text-align:center;
position:absolute;
top:35px;
left:21.2px;
border-radius:1.8px;
[/class]

[comment]scripts[/comment]

[script class=tab1 on=click]
hide tabcontent2
hide tabcontent3
show tabcontent1
[/script]

[script class=tab2 on=click]
hide tabcontent1
hide tabcontent3
show tabcontent2
[/script]

[script class=tab3 on=click]
hide tabcontent1
hide tabcontent2
show tabcontent3
[/script]

[/nobr]