Dragon

<style>
@import url('https://fonts.googleapis.com/css?family=Arizonia|Bad+Script|Coming+Soon|Yellowtail');
#image{
position: fixed;
bottom: 0vh;
right: 15vw;
opacity: 1;
}

#image img{
height: 100vh;
}

t{font-family: 'Arizonia', cursive;font-size: 6vh;color:#ff7702;border-bottom: 4px #ff7702 double;}
*{font-family: 'Coming Soon', cursive;font-size:2.2vh;color:#ffa960;text-shadow: -.5vh .5vh .5vh #28190c;}
i{font-family: 'Yellowtail', cursive;}
a{font-family: 'Bad Script', cursive;text-decoration: none;transition:0.5s;}
a:hover{transition: 0.5s;color: #fff;}
.r{float:right;}


#gif{
position: fixed;
border: 3px #632929 solid;
z-index: 6;
height:10vh;
width: 30vw;
bottom:75vh;
left:10vw;
opacity: 1;
background:url(https://i.imgur.com/S1Zqh65.gif);
background-size: cover;
box-shadow: -.5vh .5vh .5vh #28190c;;
}

#box{
position:fixed;
z-index: 7;
border: 5px #632929 solid;
background: #632929;
padding: 1%;
overflow: hidden;
height: 52vh;
width: 20vw;
left: 10vw;
bottom: 15vh;
box-shadow: -.5vh .5vh .5vh #28190c;;
}


#nav{
position:absolute;
height:50vh;
width:10vw;
background:transparent;
bottom:20vh;
left: 32.7vw;
}

.nav1{
position:absolute;
height:7%;
width:40%;
background:#5b4029;
border-color:();
top:20%;
transition-duration:.4s;
}

.nav1:hover{
transition-duration:.4s;
width:70%;
background: #ff8319;
}

.nav2{
position:absolute;
height:7%;
width:40%;
background:#5b4029;
top:40%;transition-duration:.4s
}

.nav2:hover{
transition-duration:.4s;
width:70%;
background: #ff8319;
}

.nav3{
position:absolute;
height:7%;
width:40%;
background:#5b4029;
top:60%;
transition-duration:.4s;
}

.nav3:hover{
transition-duration:.4s;
width:70%;
background: #ff8319;
}

.nav4{
position:absolute;
height:7%;
width:40%;
background:#5b4029;
top:80%;transition-duration:.4s;
}

.nav4:hover{
transition-duration:.4s;
width:70%;
background: #ff8319;
}






</style>

<div id="image">
<img src="MAIN IMAGE HERE">
</div>
<div id="nav">
 <a href="#one"><div class="nav1"></div></a>
 <a href="#two"><div class="nav2"></div></a>
 <a href="#three"><div class="nav3"></div></a>
 <a href="#four"><div class="nav4"></div></a>
 </div>


<div id="gif">

</div>


<div id="box">
<div style="height: 100%; overflow-y: hidden;">
<a name="one"></a>
<div style="width:100%; height: 100%; overflow: hidden; " align="left">
<center>
<t>Header</t>
<br><br><br>
<i>Put some kind of quote here.
</div>

<a name="two"></a>
<div style="width:100%; height: 100%; overflow: hidden; " align="left">
<center>
<t>Header</t><br><br>
</center>
Stat<div class="r">Stat</div><br>
Stat<div class="r">Stat</div><br>
<br>
5'7"<div class="r">154 lbs.</div><br>
Stat<div class="r">Stat</div><br>
Stat<div class="r">Stat</div><br>
Stat<div class="r">Stat</div><br>
</div>


<a name="three"></a>
<div style="width:100%; height: 100%; overflow: hidden; " align="left">
<center>
<t>
Details</t>
<br><br>
<br><br>
Uhhh<br><br>
I'll fill this in....<br><br>
Later.
</div>

<a name="four"></a>
<div style="width:100%; height: 100%; overflow: hidden; " align="left">
<center>
<t>Out of Character</t>
<br><br>
</center>
<li>OOC Here!</li>


</div>

</div>
</div>