Trev Layout

<style>
@import url(https://fonts.googleapis.com/css?family=Cinzel);
::-webkit-scrollbar { width: 0.8vw; height: 0.8vw;}
::-webkit-scrollbar-track { border-radius: 0px; background-color: #8f0101;}
::-webkit-scrollbar-thumb { border: 0.4vh solid #610101; border-radius:0px; background-color: #FFFFFF;}

body{
 background-color: #000000;
 background-image:url('http://i.imgur.com/AKfmHBv.png');
}

.player{
 position: relative;
 z-index: 5;
 width: 45px;
 border: 0.3vw solid #FFFFFF;
 background: #8f0101;
 box-shadow: -0.3vw 0.3vw 0.3vw #000000;
 overflow: hidden;
}

#image{
 position: fixed;
 z-index: 6;
 bottom: 0vh;
 right: 0vw;
 width: 30vw;
 opacity:0;
 -webkit-animation:picturein 0.5s 1;
 animation:picturein 0.5s 1;
 animation-delay:1s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:1s;
 -webkit-animation-fill-mode:forwards;
}
#image img{
 height: 98.5vh;
 border: 0.5vw solid #610101;
 box-shadow: -0.5vw 0.5vw 0.5vw #000000;
}

@keyframes picturein{
from{opacity:0; right: -30vw;}
to{opacity:1;}
}
@-webkit-keyframes statanim{
from{opacity:0; right: -30vw;}
to{opacity:1;}
}

#titlebar{
 position: fixed;
 z-index: 1;
 left: 12vw;
 top: 8.2vh;
 width: 60vw;
 height: 7.5vh;
 background: #8f0101;
 border-bottom: 0.5vw solid #610101;
 border-left: 0.5vw solid #610101;
 overflow: hidden;
 -ms-transform: skewX(30deg);
 -webkit-transform: skewX(30deg);
 transform: skewX(30deg);
 box-shadow: -0.5vw 0.5vw 0.5vw #000000;
 opacity:0;
 -webkit-animation:titlebarin 0.5s 1;
 animation:titlebarin 0.5s 1;
 animation-delay:2s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:2s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes titlebarin{
from{opacity:1; left: 80vw;}
to{opacity:1; left: 12vw;}
}
@-webkit-keyframes titlebarin{
from{opacity:1; left: 80vw;}
to{opacity:1; left: 12vw;}
}

#titlebar2{
 position: fixed;
 z-index: 1;
 left: 12vw;
 top: 0vh;
 width: 60vw;
 height: 7.5vh;
 background: #8f0101;
 border-top: 0.5vw solid #610101;
 border-left: 0.5vw solid #610101;
 overflow: hidden;
 -ms-transform: skewX(-30deg);
 -webkit-transform: skewX(-30deg);
 transform: skewX(-30deg);
 opacity:0;
 -webkit-animation:titlebarin 0.5s 1;
 animation:titlebarin 0.5s 1;
 animation-delay:2s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:2s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes titlebarin{
from{opacity:1; left: 80vw;}
to{opacity:1; left: 12vw;}
}
@-webkit-keyframes titlebarin{
from{opacity:1; left: 80vw;}
to{opacity:1; left: 12vw;}
}

#infobackground{
 position: fixed;
 z-index: 0;
 top: 15vh;
 left: 20vw;
 height: 83.5vh;
 width: 49vw;
 background: #8f0101;
 border-bottom: 0.5vw solid #610101;
 border-left: 0.5vw solid #610101;
 border-right: 0.5vw solid #610101;
 box-shadow: -0.5vw 0.5vw 0.5vw #000000;
 overflow: hidden;
 color: #000000;
 font-family: Cinzel;
 font-size: 10vh;
 opacity:0;
 -webkit-animation:infobackin 0.5s 1;
 animation:infobackin 0.5s 1;
 animation-delay:2.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:2.5s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes infobackin{
from{opacity:0; top: -30vw;}
to{opacity:1; top: 15vh;}
}
@-webkit-keyframes infobackin{
from{opacity:0; top: -30vw;}
to{opacity:1; top: 15vh;}
}

#infobox{
 position: static;
 z-index: 2;
 top: 15vh;
 left: 20vw;
 height: 83.5vh;
 width: 49vw;
 overflow: hidden;
 color: #000000;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-family: Cinzel;
 font-size: 4.5vh;
 opacity:0;
 -webkit-animation:infoboxin 0.5s 1;
 animation:infoboxin 0.5s 1;
 animation-delay:2.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:2.5s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes infoboxin{
from{opacity:0;}
to{opacity:1;}
}
@-webkit-keyframes infoboxin{
from{opacity:0;}
to{opacity:1;}
}

#name{
 position: fixed;
 z-index:2;
 left: 18vw;
 top: -2.5vh;
 color: #FFFFFF;
 text-shadow: -0.3vw 0.3vw 0.3vw #610101;
 font-family: Cinzel;
 font-size: 9vw;
 letter-spacing: 0.5vw;
 opacity:0;
 -webkit-animation:namefade 0.5s 1;
 animation:namefade 0.5s 1;
 animation-delay:2.5s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:2.5s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes namefade{
from{opacity:0;}
to{opacity:1;}
}
@-webkit-keyframes namefade{
from{opacity:0;}
to{opacity:1;}
}

#buttonbackground{
 position: fixed;
 z-index: -3;
 top: 14.5vh;
 left: 16.5vw;
 width: 2.5vw;
 height: 20vh;
 background-color: #8f0101;
 border-right: 0.3vw solid #610101;
 border-bottom: 0.3vw solid #610101;
 box-shadow: -0.5vw 0.5vw 0.5vw #000000;
 -ms-transform: skewY(-30deg);
 -webkit-transform: skewY(-30deg);
 transform: skewY(-30deg);
 opacity:0;
 -webkit-animation:buttonslide 0.3s 1;
 animation:buttonslide 0.3s 1;
 animation-delay:3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes buttonslide{
from{opacity:1; top: 0vw;}
to{opacity:1; top: 14.5vh;}
}
@-webkit-keyframes buttonslide{
from{opacity:1; top: 0vw;}
to{opacity:1; top: 14.5vh;}
}

#buttonbackground2{
 position: fixed;
 z-index: -3;
 top: 14.5vh;
 left: 13.8vw;
 width: 2.5vw;
 height: 20vh;
 background-color: #8f0101;
 border-left: 0.3vw solid #610101;
 border-bottom: 0.3vw solid #610101;
 box-shadow: -0.5vw 0.5vw 0.5vw #000000;
 -ms-transform: skewY(30deg);
 -webkit-transform: skewY(30deg);
 transform: skewY(30deg);
 opacity:0;
 -webkit-animation:buttonslide 0.3s 1;
 animation:buttonslide 0.3s 1;
 animation-delay:3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes buttonslide{
from{opacity:1; top: 0vw;}
to{opacity:1; top: 14.5vh;}
}
@-webkit-keyframes buttonslide{
from{opacity:1; top: 0vw;}
to{opacity:1; top: 14.5vh;}
}

#buttons {
 z-index:2;
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 5vw;
 background-color: transparent;
 position: fixed;
 top: 18vh;
 left: 14vw;
 overflow: auto;
 font-family: Cinzel;
 opacity:0;
 -webkit-animation:buttonfade 0.5s 1;
 animation:buttonfade 0.5s 1;
 animation-delay:3.3s;
 animation-fill-mode:forwards;
 -webkit-animation-delay:3.3s;
 -webkit-animation-fill-mode:forwards;
}

@keyframes buttonfade{
from{opacity:0;}
to{opacity:1;}
}
@-webkit-keyframes buttonfade{
from{opacity:0;}
to{opacity:1;}
}

#buttons a {
 display: block;
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-size: 2vh;
 padding: 1vh 0vh 1vh 0vh;
 text-decoration: none;
 transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -webkit-transition: all 0.3s ease-in-out;
}

#buttons a:hover{
 background-color: #610101;
 color:#8f0101;
 text-shadow: -0.2vw 0.2vw 0.2vw #000000;
 font-size: 2vh;
}

#credit{
 position: fixed;
 left: 0vw;
 bottom: 0vh;
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #000000;
 font-family: Cinzel;
 font-size: 2.5vh;
}

h1{
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-family: Cinzel;
 font-size: 4.5vh;
 letter-spacing: 1.5vw;
 font-weight: normal;
}

h2{
 color: #000000;
 text-shadow: -0.1vw 0.1vw 0.1vw #610101;
 font-family: Cinzel;
 font-size: 3.5vh;
 font-weight: normal;
}

h3{
 color: #FFFFFF;
 text-shadow: -0.2vw 0.2vw 0.2vw #610101;
 font-family: Cinzel;
 font-size: 5vh;
 letter-spacing: 1.5vw;
 font-weight: normal;
}

h4{
 color: #000000;
 text-shadow: -0.1vw 0.1vw 0.1vw #610101;
 font-family: Cinzel;
 font-size: 4vh;
 font-weight: normal;
}

hr{
 border: 0.2vh solid #FFFFFF;
 outline: 0.2vw solid #610101;
 box-shadow: -0.2vw 0.2vw 0.2vw #610101;
 width: 90%;
}
</style>


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

<div id="titlebar">
</div>
<div id="titlebar2">
</div>

<div id="credit">
Code by Aishurel
<br>
Please steal
</div>

<div id="name">
 Trevoiaus
</div>

<div id="buttonbackground">
</div>

<div id="buttonbackground2">
</div>

<div id="buttons">
<center>
<a href="#stats"><b>Stats</b></a>
<a href="#bio"><b>Bio</b></a>
<a href="#ooc"><b>OOC</b></a>
</center>
</div>

<div id="infobackground">
<div id="infobox">
<center>
<div style="height: 100%; overflow-y: hidden;">
<a name="stats"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<h1>Age</h1>
30's
<h1>Orientation</h1>
"Eh..."
<h1>Position</h1>
Dominant
<hr>
<h1>Voice samples</h1>
<h2>This character is occasionally voice-acted by the writer</h2>
<div class="player"><audio controls><source src="http://orig14.deviantart.net/f445/f/2016/162/5/a/trevoiaus_one_by_rashayritto-da5uro6.mp3" type="audio/mpeg"></audio></div>
<div class="player"><audio controls><source src="http://orig13.deviantart.net/6aad/f/2016/162/6/9/trevoiaus_two_by_rashayritto-da5urnr.mp3" type="audio/mpeg"></audio></div>
<div class="player"><audio controls><source src="http://orig14.deviantart.net/f797/f/2016/162/8/a/trevoiaus_three_by_rashayritto-da5urnj.mp3" type="audio/mpeg"></audio></div>
</div>

<a name="bio"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<br>
Gruff, tough, and probably
<h3>rough</h3>
--Trev wanders wherever his whims take him to indulge in bad habits and
<h3>bad women</h3>
He isn't one to be bothered with starting trouble like a lot of younger males with something to prove. He keeps to himself and lets his
<h3>presence</h3>
do the talking. Bold approaches are the best way to catch this lion's eye--though he's
<h3>not easily impressed</h3>
Catch him in the right mood or take a rain check for later--
<h3>no offense</h3>
</div>

<a name="ooc"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center">
<h3>Room RP preferred</h3>
Semi to para+
<h3>Not here to date you</h3>
Image is not mine
<h3>Steal my code</h3>
But you'll have some big shoes to fill
</div>
</div>
</center>
</div>
</div>