Blade 2

<style>
@import url(https://fonts.googleapis.com/css?family=Nosifer);
@import url(https://fonts.googleapis.com/css?family=Metal+Mania);
@import url(https://fonts.googleapis.com/css?family=Comfortaa);
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { border-radius: 2px; background-color: transparent; }
::-webkit-scrollbar-thumb { border-radius: 2px; background-color: #transparent; }

body{background-color:#000;}
.intro{position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:-1;opacity:0;background-color:black;
-webkit-animation-name: title;
-webkit-animation-duration: 5s;
animation-name:title;
animation-duration: 5s;
}

@-webkit-keyframes title {
0% {z-index:1;opacity:1;}
20% {z-index:1;opacity:1;}
40% {z-index:1;opacity:1;}
80% {z-index:1;opacity:1;}
100% {z-index:-1;opacity:0;}
}
.image{position:absolute;top:0%;left:0%;width:100%;height:100%;background:url(http://i.imgur.com/AuN6sBC.jpg);background-size:100% 100%;background-position:center;background-color:transparent;background-repeat:no-repeat;z-index:-2;opacity:0;
-webkit-animation-name: title1;
-webkit-animation-duration: 5s;
animation-name:title1;
animation-duration: 5s;
}

@-webkit-keyframes title1 {
0% {opacity:1;z-index:2;}
5% {opacity:1;z-index:2;}
10% {opacity:1;z-index:2;}
15% {opacity:1;z-index:2;}
20% {opacity:0.5;z-index:2;}
25% {opacity:1;z-index:2;}
30% {opacity:1;z-index:2;}
35% {opacity:1;z-index:2;}
40% {opacity:1;z-index:2;}
45% {opacity:0.5;z-index:2;}
50% {opacity:1;z-index:2;}
55% {opacity:1;z-index:2;}
60% {opacity:1;z-index:2;}
65% {opacity:1;z-index:2;}
70% {opacity:0.5;z-index:2;}
75% {opacity:1;z-index:2;}
80% {opacity:1;z-index:2;}
85% {opacity:1;z-index:2;}
90% {opacity:1;z-index:2;}
95% {opacity:0.5;z-index:2;}
100% {opacity:0;z-index:-2;}
}

#image{
 position: fixed;
 z-index: 6;
 bottom: 0vh;
 left: 55vw;
 width: 30vw;
 opacity:0;
 -webkit-animation:picturein 1.5s 1;
 animation:picturein s 1;
 animation-delay:5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:5s;
 -webkit-animation-fill-mode:forwards;
}
#image img{
 height: 100vh;
}

@keyframes picturein{
from{opacity:0; bottom: -30vw;}
to{opacity:1;}
}

h1{
 color: #B40404;
 text-shadow: -0.1vw 0.1vw 0.1vw #ccc;
 font-family: Metal Mania;
 font-size: 2.9vh;
 letter-spacing: 0.5vw;
 font-weight: normal;
 text-align: center;
}

b, strong {color: #2377B3; font-family: Julee; font-size: 2.4vh; font-style: normal; font-weight: bold; text-decoration: none; font-style: italic; font-weight: normal; text-shadow: -0.1vw 0.1vw 0.1vw #;}

a {
color: #B10707;
text-decoration: none;
}

a:link, a:active, a:visited {
font-size:15px;
letter-spacing:0px;
text-decoration: none;
color: #B10707;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

a:hover {
font-size:15px;
color:#A4480A;
text-decoraction: line-through;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}

 .derp{
position:absolute;
top:10%;
left:10%;
width:350px;
}

a.gluttony:link, a.gluttony:active, a.gluttony:visited{
display: block;
z-index: 10;
float: left;
width: 70px;
height:30px;
 color: #860000;
 text-shadow: -0.2vw 0.2vw 0.2vw #fff;
 font-family: Nosifer;
 font-size: 5vw;
 letter-spacing: 0px;
transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -webkit-transition: all 0.7s ease-in-out;
}

a.gluttony:hover{
color: #fff;
text-decoration: none;
text-shadow: -0.3vw 0.3vw 0.3vw #860000;}

.boxie {
background-color: #;
border: 1px solid #;
color: #ccc;
font-size: 15px;
font-family: Comfortaa;
height: 320px;
right: 440px;
opacity: 0;
overflow: auto;
padding: 5px;
position: fixed;
text-align: center;
top: 305px;
width: 461px;
}
.boxie:target {
background-color: #;
border: 1px solid #;
height: 450px;
left: 5%;
opacity: 1;
overflow: auto;
padding: 5px;
position: fixed;
top: 28%;
width: 520px;
z-index: 40;
}

</style>

<div class="derp">
<a href="#01" class="gluttony">B</a>
<a href="#02" class="gluttony">L</a>
<a href="#03" class="gluttony">A</a>
<a href="#04" class="gluttony">D</a>
<a href="#05" class="gluttony">E</a>
</div></div>


<div id="01" class="boxie">
<h1>Information</h1>
words

</div>

<div id="02" class="boxie">
<h1>About</h1>
Words
</div>

<div id="03" class="boxie">
<h1>Powers & Abilities</h1>
words
</div>

<div id="04" class="boxie">
<h1>OOC</h1>
<br>Code made by: <a target="_blank" href="http://roleplay.chat/profile.php?user=Pachi"><i>Pachi</i></a>. Ask her permission to use the code.

</div>
</div>
<div class="image"></div>
<div class="intro"></div>
<div id="image">
<img src="http://i.imgur.com/m68tODy.png">
</div>