Titania code

<style>
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative:400,900|Roboto');
@import url('https://fonts.googleapis.com/css?family=Quicksand|Raleway:200,400,600');
 body {
background-color:#101010;
overflow:hidden;
background-image: url("https://www.transparenttextures.com/patterns/shley-tree-2.png");


}

::-webkit-scrollbar
{
	width: 0px;
	background-color: transparent;
}


 #ball {
 display: inline-block;
 width: 200px;
 height: 200px;
 margin: 0;
 border-radius: 50%;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-100px;
 background: radial-gradient(circle at 50% 120%, transparent, #93E4F0 10%, #93E4F0 80%, #062745 100%);
opacity:.8;
 animation-name: floating;
 animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in-out;
 z-index:9;
 transition:1s;
 transition-delay:99999999s;
}

@keyframes floating {
 from { transform: translate(0, 0px); }
 65% { transform: translate(0, 10px); }
 to { transform: translate(0, 0px); }
}
#ball:before {
 content: "";
 position: absolute;
 top: 1%;
 left: 5%;
 width: 90%;
 height: 90%;
 border-radius: 50%;
 background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 70%);
 -webkit-filter: blur(5px);
 z-index: 2;

}

body:hover #ball{
 width:90%;
 height:180%;
 margin-top:-30%;
 margin-left:-45%;
animation-name: none;
opacity:.1;
 transition-delay:2s;
}


#backgroundball{
 width:200px;
 height:200px;
 background-image:url(https://cdn.discordapp.com/attachments/306938078113693697/342083089939562496/bae3b239698f104fd9e6840157ab3942.jpg);
 background-size:170%;
 border-radius:50%;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-100px;
 margin-left:-100px;
 transition:1s;
 background-position:50% 100%;
 opacity:0;
 transition-delay:9999999999s;
 z-index:10;
}

body:hover #backgroundball{
 width:90%;
 height:180%;
 margin-top:-30%;
 margin-left:-45%;
 transition-delay:2s;
 opacity:.8;
}

#image{
 background-image:url(https://media.discordapp.net/attachments/306938609976606720/337775557435588609/2.png?width=355&height=468);
 width:600px;
 height:600px;
 background-size:contain;
 background-repeat:no-repeat;
 z-index:11;
 position:absolute;
 top:50%;
 left:50%;
 margin-top:-250px;
 margin-left:-800px;
 opacity:0;
 transition:3s;
 transition-delay:99999999s;
}

body:hover #image{
 margin-left:-600px;
 opacity:1;
 transition-delay:3s;
}

#box{
 width:450px;
 height:150px;
 background: linear-gradient(white, transparent) ;
 opacity:0.9 ;
 position:fixed;
 top:50%;
 left:50%;
 margin-top:150px;
 margin-left:-350px;
 z-index:12;
 opacity:0;
animation: appear 1s 5.9s linear ;
animation-fill-mode: forwards;

}

@keyframes appear{
to{ opacity:1;}
}

.text{
 width:430px;
 height:130px;
 padding:10px;
 color:#000;
 font-family: 'Cinzel Decorative', cursive;
 font-weight:900;
 font-size:14pt;
}

p{
 width: 430px;
 animation: type 2s 6s steps(60, end);
 overflow:hidden;
 white-space: nowrap;
 margin: 0px 0 0 0px;
}

p:nth-child(2){
 animation: type2 4s 6s steps(60, end);
}

p:nth-child(3){
 animation: type3 5.5s 6s steps(60, end);
}

p:nth-child(4){
 animation: type4 7.5s 6s steps(60, end);
}

@keyframes type{
 from { width: 0; }
}

@keyframes type2{
 0%{width: 0; }
 40%{width: 0; }
 100%{ width: 100%; }
}

@keyframes type3{
 0%{width: 0; }
 68%{width: 0; }
 100%{ width: 100%; }
}
@keyframes type4{
 0%{width: 0; }
 75%{width: 0; }
 100%{ width: 100%; }
}
#name{
 width:450px;
 height:45px;
 background:linear-gradient(to right, transparent, white, transparent);
 position:absolute;
 margin-top:-60px;
}

.nametext {
 font-family: 'Cinzel Decorative', cursive;
font-size:25pt;
font-weight:900;
text-align:center;
 background: url('https://68.media.tumblr.com/0fad60580945f2b76c24d4dcc1927f5e/tumblr_nsy6zu5y0o1ru72gvo1_500.gif') no-repeat;
background-size:100%;
background-position:center;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

}

.arrow-up a{
 width: 0;
 height: 0;
 border-top: 15px solid transparent;
 border-left: 15px solid yellow;

 border-bottom: 15px solid transparent;
 top:50%;
 left:50%;
 position:absolute;
 margin-top:50px;
 margin-left:200px;
 display:inline-block;
 animation: blink 1s infinite linear;
 z-index:13;
}

@keyframes blink{
 to{opacity: .0;}
}

#menubackground{
width:850px;
height:600px;
background-image:url(http://i.imgur.com/IcyNcGD.png);
background-size:100%;
position:fixed;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-300px;
opacity:0;
z-index:1;

}

#navi{
width:30px;
height:300px;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:-190px;
margin-left:-75px;
}

#navi a{
width:25px;
height:25px;
background-color:#3f6b70;
border:solid 1px #fff;
transform:rotate(45deg);
display:inline-block;
transition:1s;
}

#navi a:hover{
background-color:#fff;
}

#OOC{
width:280px;
height:180px;
border:solid 1px #fff;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:75px;
margin-left:-370px;
padding:5px;
font-family: 'Quicksand', sans-serif;
font-size:11pt;
color:#fff;
overflow:auto;
text-align:justify;
}

#tab1, #tab2{
width:280px;
height:280px;
border:solid 1px #fff;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:-255px;
margin-left:-370px;
padding:5px;
font-family: 'Quicksand', sans-serif;
font-size:11pt;
color:#fff;
overflow:auto;
text-align:justify;
opacity:0;
white-space: nowrap;
}

#tab3, #tab4{
width:380px;
height:180px;
border:solid 1px #fff;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:-255px;
margin-left:-40px;
padding:5px;
font-family: 'Quicksand', sans-serif;
font-size:11pt;
color:#fff;
overflow:auto;
text-align:justify;
opacity:0;
}

#tab5, #tab6{
width:380px;
height:275px;
border:solid 1px #fff;
background-color:transparent;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-40px;
padding:5px;
font-family: 'Quicksand', sans-serif;
font-size:11pt;
color:#fff;
overflow:auto;
text-align:justify;
opacity:0;
}



#blanket:target #box{
animation: appear 1s linear ;
animation-fill-mode: backwards;
}


#blanket:target #menubackground{
opacity:.9;
transition:1s;
z-index:13;
}
#blanket:target #tab1{
opacity:1;
transition:1s;
z-index:13;
}
#blanket:target #tab3{
opacity:1;
transition:1s;
z-index:13;
}

#blanket:target #tab5{
opacity:1;
transition:1s;
z-index:13;
}



#blanket2:target #box{
animation: appear 1s linear ;
animation-fill-mode: backwards;
}
#blanket2:target #menubackground{
opacity:.9;
transition:1s;
z-index:13;
}
#blanket2:target #tab1{
opacity:1;
transition:1s;
z-index:13;
}
#blanket2:target #tab2{
opacity:0;
transition:1s;
z-index:12;
}

#blanket2:target #tab3{
opacity:1;
transition:1s;
z-index:13;
}

#blanket2:target #tab4{
opacity:0;
transition:1s;
z-index:12;
}

#blanket2:target #tab5{
opacity:1;
transition:1s;
z-index:13;
}

#blanket2:target #tab6{
opacity:0;
transition:1s;
z-index:12;
}

#blanket3:target #box{
animation: appear 1s linear ;
animation-fill-mode: backwards;
}
#blanket3:target #menubackground{
opacity:.9;
transition:1s;
z-index:13;
}
#blanket3:target #tab1{
opacity:0;
transition:1s;
z-index:12;
}
#blanket3:target #tab2{
opacity:1;
transition:1s;
z-index:13;
}

#blanket3:target #tab3{
opacity:1;
transition:1s;
z-index:13;
}

#blanket3:target #tab4{
opacity:0;
transition:1s;
z-index:12;
}

#blanket3:target #tab5{
opacity:1;
transition:1s;
z-index:13;
}

#blanket3:target #tab6{
opacity:0;
transition:1s;
z-index:12;
}

#blanket4:target #box{
animation: appear 1s linear ;
animation-fill-mode: backwards;
}
#blanket4:target #menubackground{
opacity:.9;
transition:1s;
z-index:13;
}
#blanket4:target #tab1{
opacity:1;
transition:1s;
z-index:13;
}
#blanket4:target #tab2{
opacity:0;
transition:1s;
z-index:12;
}

#blanket4:target #tab3{
opacity:1;
transition:1s;
z-index:13;
}

#blanket4:target #tab4{
opacity:0;
transition:1s;
z-index:12;
}

#blanket4:target #tab5{
opacity:1;
transition:1s;
z-index:13;
}

#blanket4:target #tab6{
opacity:0;
transition:1s;
z-index:12;
}

#blanket5:target #box{
animation: appear 1s linear ;
animation-fill-mode: backwards;
}
#blanket5:target #menubackground{
opacity:.9;
transition:1s;
z-index:13;
}
#blanket5:target #tab1{
opacity:1;
transition:1s;
z-index:13;
}
#blanket5:target #tab2{
opacity:0;
transition:1s;
z-index:12;
}

#blanket5:target #tab3{
opacity:0;
transition:1s;
z-index:12;
}

#blanket5:target #tab4{
opacity:1;
transition:1s;
z-index:13;
}

#blanket5:target #tab5{
opacity:1;
transition:1s;
z-index:13;
}

#blanket5:target #tab6{
opacity:0;
transition:1s;
z-index:12;
}

#blanket6:target #box{
animation: appear 1s linear ;
animation-fill-mode: backwards;
}
#blanket6:target #menubackground{
opacity:.9;
transition:1s;
z-index:13;
}
#blanket6:target #tab1{
opacity:1;
transition:1s;
z-index:13;
}
#blanket6:target #tab2{
opacity:0;
transition:1s;
z-index:12;
}

#blanket6:target #tab3{
opacity:1;
transition:1s;
z-index:13;
}

#blanket6:target #tab4{
opacity:0;
transition:1s;
z-index:12;
}

#blanket6:target #tab5{
opacity:1;
transition:1s;
z-index:13;
}

#blanket6:target #tab6{
opacity:0;
transition:1s;
z-index:12;
}

#blanket7:target #box{
animation: appear 1s linear ;
animation-fill-mode: backwards;
}
#blanket7:target #menubackground{
opacity:.9;
transition:1s;
z-index:13;
}
#blanket7:target #tab1{
opacity:1;
transition:1s;
z-index:13;
}
#blanket7:target #tab2{
opacity:0;
transition:1s;
z-index:12;
}

#blanket7:target #tab3{
opacity:1;
transition:1s;
z-index:13;
}

#blanket7:target #tab4{
opacity:0;
transition:1s;
z-index:12;
}

#blanket7:target #tab5{
opacity:0;
transition:1s;
z-index:12;
}

#blanket7:target #tab6{
opacity:1;
transition:1s;
z-index:13;
}


h1{
font-size:20pt;
font-family: 'Raleway', sans-serif;
font-weight:200;
color:#fff;
text-align:center;
 margin-top: -5;
margin-bottom: 0;
margin-left:-10;
margin-right:-10;
border-bottom:solid 3px #fff;
}

h2{
font-size:15pt;
font-family: 'Raleway', sans-serif;
font-weight:200;
color:#fff;
text-align:left;
 margin-top: -5;
margin-bottom: 0;
border-bottom:solid 1px #fff;
}
b{
color:#82dae4;
}

a{
color:#fff;
text-decoration:none;
transition:1s;
}

a:hover{
color:gold;

}
.demo-dot {
 animation: xAxis 7s infinite ;
 position:absolute;
 top:90%;
 left:10%;
}
.demo-dot::after {
 content: '';
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: #fff;
 animation: yAxis 2.5s infinite;
 box-shadow: 1px 1px 100px 30px #0ff;
}

.p-1{
 animation-duration:4s;
 top:30%;
}

.p-1::after{
 animation-duration:10s;
}

.p-2{
 animation-duration:10s;
 top:70%;
 left:30%;
}

.p-2::after{
 animation-duration:2s;
 animation-direction: linear;
}


.p-3{
 animation-duration:2s;
 top:10%;
 left:30%;
 animation-direction: alternate;
}

.p-3::after{
 animation-duration:5s;
}

.p-4{
 animation-duration:5s;
 top:20%;
 left:70%;
 animation-direction: alternate;
}

.p-4::after{
 animation-duration:3s;
 animation-direction: alternate;
}

.p-5{
 animation-duration:20s;
 top:50%;
 left:60%;
}

.p-5::after{
 animation-duration:10s;
 animation-direction: alternate;
}


.p-6{
 animation-duration:7s;
 top:80%;
 left:40%;

}

.p-6::after{
 animation-duration:6s;

}

.p-7{
 animation-duration:2.5s;
 top:40%;
 left:50%;
 animation-direction: linear;
}

.p-7::after{
 animation-duration:3s;
 animation-direction: alternate;
}

.p-8{
 animation-duration:15s;
 top:90%;
 left:70%;

}

.p-8::after{
 animation-duration:15s;

}

.p-9{
 animation-duration:6s;
 top:60%;
 left:0%;

}

.p-9::after{
 animation-duration:3.5s;

}

.p-10{
 animation-duration:8s;
 top:50%;
 left:90%;

}

.p-10::after{
 animation-duration:10s;
 animation-direction: alternate;
}






@-webkit-keyframes yAxis {
 50% {

 animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

 transform: translateY(0px);
 }
}

@keyframes yAxis {
 50% {

 animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);

 transform: translateY(-150px);
 }
}

@-webkit-keyframes xAxis {
 50% {

 animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);

 transform: translateX(100px);
 }
}

@keyframes xAxis {
 50% {
 animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
 transform: translateX(300px);
 }
}

</style>
 <div id="ball"></div>
<div id="backgroundball">
 </div>
<div class="demo-dot"></div>
<div class="demo-dot p-1"></div>
<div class="demo-dot p-2"></div>
<div class="demo-dot p-3"></div>
<div class="demo-dot p-4"></div>
<div class="demo-dot p-5"></div>
<div class="demo-dot p-6"></div>
<div class="demo-dot p-7"></div>
<div class="demo-dot p-8"></div>
<div class="demo-dot p-9"></div>
<div class="demo-dot p-10"></div>~
 <div id="image">
</div>

<div id="blanket"><div id="blanket2"><div id="blanket3"><div id="blanket4"><div id="blanket5"><div id="blanket6"><div id="blanket7">

<div id="box">
 <div id="name">
 <div class="nametext">Titania</div>
 </div>
 <div class="text"><p>If we shadows have offended,</p>
<p>Think but this, and all is mended </p>
<p>Give me your hands if we be friends,</p>
<p>And Titania shall restore amends.</p>
 </div>
 <div class="arrow-up"><a href="#blanket"></a></div>
</div>

<div id="menubackground">
<div id="navi">
<a href="#blanket2"></a><br><br>
<a href="#blanket3"></a><br><br>
<a href="#blanket4"></a><br><br>
<a href="#blanket5"></a><br><br>
<a href="#blanket6"></a><br><br>
<a href="#blanket7"></a><br><br>
</div>
<div id="OOC"> <h1>OOC</h1><b>00</b> This code was commission work done by <a href="">the Hound of Tindalos</a> send him an RPC mail or PM him for inquiries about custom codes and pricing.</div>

<div id="tab1"><h1>Stats</h1>
 <span style="float: left;">Name</span> <span style="float: right;">Titania</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Class</span> <span style="float: right;"><img src="https://vignette2.wikia.nocookie.net/fategrandorder/images/6/63/Castericon.png/revision/latest/scale-to-width-down/35?cb=20160205145549" alt="Smiley face" height="30" width="30"></span><br><br>
 <span style="float: left;">Alternate Classes</span> <span style="float: right;"><img src="https://vignette4.wikia.nocookie.net/fategrandorder/images/7/73/Ridericon.png/revision/latest/scale-to-width-down/35?cb=20160205145549" alt="Smiley face" height="30" width="30"><img src="https://vignette2.wikia.nocookie.net/fategrandorder/images/5/5f/Sabericon.png/revision/latest/scale-to-width-down/35?cb=20160205145551" alt="Smiley face" height="30" width="30"></span><br><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
 <span style="float: left;">Stat</span> <span style="float: right;">Stat</span><br>
</div>

<div id="tab2"><h1>More Info</h1> AHAHAHAHAHAHAHAHAH2</div>

<div id="tab3"> <h1>Gallery</h1><br>
 <a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0" title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
<a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0" title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
<a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0" title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
<a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0"title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
</div>

<div id="tab4"><h1>Friends</h1><br>
 <a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0" title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
<a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0" title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
<a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0" title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
<a href="https://iframe.roleplay.chat/profile.php?user=Friend%20name">
<img border="0"title="Description of friend here" src="http://www.filecluster.com/news/wp-content/uploads/2014/10/Anonymous-Profile-Pic.jpg" width="50" height="50"></a>
</div>

<div id="tab5"><h1>History</h1> AHAHAHAHAHAHAHAHAH5</div>

<div id="tab6"> <h1>Abilities</h1><br><h2><img src="https://vignette3.wikia.nocookie.net/fategrandorder/images/e/ed/Territory_creation.png/revision/latest/scale-to-width-down/45?cb=20150813172628" alt="Smiley face" height="30" width="30"> Territory Creation </h2><br>
<b>Rank</b>:A<br>
Brief description of the skill.<br><br>
<h2><img src="https://vignette3.wikia.nocookie.net/fategrandorder/images/e/ed/Territory_creation.png/revision/latest/scale-to-width-down/45?cb=20150813172628" alt="Smiley face" height="30" width="30"> Skill name </h2><br>
</div>
</div>