For Zeo

<style>

@import url('https://fonts.googleapis.com/css?family=Charmonman|Kaushan+Script|Old+Standard+TT');

/*
PLEASE DO NOT REMOVE THIS CREDIT
DO NOT REMOVE THE CREDIT AT THE BOTTOM EITHER!
CREATOR: GREEN BEAN
There is a Javascript at the base that prevents right click. Do not remove it.
*/



body {
 background: #e3eded;
 background-image: url("https://i.imgur.com/EVGVh0R.gif");
 background-repeat: No-repeat;
 background-size: 100% 100%;
 background-position: bottom right;
overflow: hidden;
}


 .seal{
position:absolute;
top: 25%;
left: 25%;
width: 70%;
height: 270px;
overflow:hidden;
z-index:20;
}

 .far{
width: 70%;
height: 270px;
overflow:auto;
}

 .goon{
color: #324a76;
font-size:14px;
text-align:justify;
line-height:15px;
font-family: 'Old Standard TT', serif;
letter-spacing:0.3px;
margin: 5px;
}
a.gone:link, a.gone:active, a.gone:visited{
font-family: 'Kaushan Script', cursive;
text-transform: uppercase;
text-decoration: none;
font-size: 24px;
line-height: 24px;
letter-spacing: -1px;
color: #634051;
margin-right:12px;
z-index:10;
}

a.gone:hover{
text-shadow:-4px 0px 0px #232a68;
}

b {
color: #;
font-weight:bold;
letter-spacing: 1px;
}

i{
color:#634051;
font-style:italic;
}

u{
font-style:italic;
text-decoration:noneunderline;
}

a:active, a:link, a:visited{
color:#3D1126;
text-decoration:underline;
}

a:hover{
cursor:all-scroll;
color:#634051;
text-decoration:line-through;
}

h1 {
font-family: 'Charmonman', cursive;
size: 40px;
text-align:center;
letter-spacing: 7px;
border-bottom: 0px solid #ffffff;}
::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #4F104F;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #4F104F;border: 0px ;width: 15px;}

 .glisten{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;}




 #fangs{
width: 400px;
height: 520px;
background: #transparent;
background-image: url("https://i.imgur.com/5pMPTrK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: bottom left;
z-index: 4;
animation: ruby 3s 1;
-webkit-animation: ruby 3s 1;
}







 .navi{
position: absolute;
bottom: 13%;
right: 20%;
width: 200px;
z-index:99;
 animation: ruby 3s 1;
 -webkit-animation: ruby 3s 1;
}
 #credit {
position: fixed;
bottom: 20px;
right: 20px;
background-color: transparent;
 animation: ruby 3s 1;
 -webkit-animation: ruby 3s 1;
}

@keyframes ruby{
 from{
 right: -50%;
 opacity: 0;
 }
}

@-webkit-keyframes ruby{
 from{
 right: -50%;
 opacity: 0;
 }
}

.portrait {
pointer-events:none;
position: absolute;
top: 7%;
right: 0px;
width: 50%;
height: 95%;
background: url(https://i.imgur.com/RhwI3lJ.png);
background-size: 80%;
background-repeat: no-repeat;
z-index: -20;
animation: ruby 3s 1;
-webkit-animation: ruby 3s 1;
}


.wordy{
position:absolute;
z-index:4;
height:14%;
width:35%;
top:50%;
right:2%;
font-family:'Kaushan Script', cursive;
font-size: 4.5vw;
color:#FFF;
background-image:url(https://i.imgur.com/XkP1VBK.gif);
background-size:100%;
background-repeat:no-repeat;
background-position:center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFDB58;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
 animation: ruby 3s 1;
 -webkit-animation: ruby 3s 1;
}


</style>


<div id="fangs" class="glisten"><div class="navi">
<a href="#hello" class="gone"><img src='https://i.imgur.com/zjx32dD.gif' height="40px"></a>
 <a href="#my" class="gone"><img src='https://i.imgur.com/zjx32dD.gif' height="40px"></a>
<a href="#dearest" class="gone"><img src='https://i.imgur.com/zjx32dD.gif' height="40px"></a><a href="#servant" class="gone"><img src='https://i.imgur.com/zjx32dD.gif' height="40px"></a>
</div>

<div class="seal">

<div id="hello" class="far"><div class="goon">

<h1>Tab 1</h1>
<font style="float:left"><b>✦Name✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Alias✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Age✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Gender✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Height✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Weight✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Occupation✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Sexual Orientation✦</b></font>
<font style="float:right">Stat</font><br>
<font style="float:left"><b>✦Marital Status✦</b></font>
<font style="float:right">Stat</font><br><Br><br>

<b>BOLD</b> <i>ITALICS</i> <Strike>STRIKE</Strike> <a href="" target="_blank" title="link stuff.">LINK</a>
</div></div>
<div id="my" class="far"><div class="goon">
<h1>Tab 2</h1>

<p>Put either a break down personality here. And use the p located in the brackets to make paragraphs. Like so.</p>

<P> Testing. This will show up as a seperate paragraph then the line up there. It doesn't matter how you enter it in this raw form. It won't translate with out the code witth the brackets.</p>

<p>Use the same with an i instead of a p for <i>Italics</i> make sure if you use it to close off the area you want with affected by the code use the same thign just put a / before the letter.</p>

<p>B for <b>bold</b>. And you can stake them. strike instead of a letter to strike things/ And such.</p>

<p>and <br> to line break. BUT DO NOT </br> that doesn't do anything. So you fill this with personality or back story. And same for the section with gibberish below. if you need me to fix anything lemme know.</p>

</div></div>
<div id="dearest" class="far"><div class="goon">
<h1>Tab3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut iaculis dolor. Maecenas finibus mauris ipsum, ac posuere elit blandit sit amet. In posuere rhoncus massa. Vivamus diam odio, vulputate eleifend ultrices at, dignissim vitae ligula. Morbi bibendum dui quis nibh feugiat accumsan. Integer non finibus tortor, id volutpat nisi. Ut lectus massa, condimentum sit amet quam nec, efficitur consectetur orci. Morbi ipsum ex, vestibulum id eros non, volutpat sodales dui. Sed rhoncus ac nulla eget consectetur. Integer consectetur maximus augue. Ut consectetur varius massa nec tempor. Integer nec neque commodo, sollicitudin nisl vitae, tincidunt arcu.</p>

<p>Maecenas non mauris dapibus, lacinia sapien tempus, lacinia nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce interdum pellentesque sem, quis molestie ipsum accumsan quis. Duis sit amet interdum velit. Quisque volutpat blandit odio at gravida. Phasellus eu orci at est venenatis lobortis eu ut urna. Aliquam nisi purus, posuere et vehicula ac, consequat ut justo. Mauris tellus mi, convallis sit amet nunc sed, interdum condimentum nisi. Praesent in tellus neque. Aliquam tempor leo in magna ornare gravida. Nulla dictum purus non lacus ultricies, eu facilisis quam maximus.</p>
</div></div>


<div id="servant" class="far"><div class="goon">
<h1>Rules</h1>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>
▪ OOC.<br>

</div></div></div>
 </div></div></div></div></div>
<div class="portrait">
</div>

 <div class="wordy">
place holder
</div>


</div>
<div id="credit">
<a target="_blank" href="https://roleplay.chat/profile.php?user=Arietta" target="_blank" title="Code was created by Arietta Do NOT touch, this Please! If you want a code just mail Arietta directly. She will gladly hook you up. With some freebies or cheapo comissions."><img src="https://i.imgur.com/uP9E5Pz.png" height="90px"></a></div>