PokeBlood

<!DOCTYPE html>
<body>
<style>
@import url('https://fonts.googleapis.com/css?family=Fontdiner+Swanky');
body {
background-image: url(http://www.hdwallpaperspop.com/wp-content/uploads/2016/10/red-and-black-wallpaper.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-size:auto 130%;
background-position:center;
background-color:#000000;
color:#D10000;
text-align:left;
font-family: 'Fontdiner Swanky', serif;
}
#mugshot {
z-index:2;
position:fixed;
top:3%;
right:10%;
height:95%;
}
#mugshot img {
height:102%;
}
#box, #navbar, .infobox, #statbox, #obox {
position:fixed;
border:2px solid #D10000;
background-color:#111111;
overflow-y:auto;
}
#box {
z-index:1;
top:48%;
right:4%;
height:49%;
width:52%;
}
#navbar {
z-index:4;
top:50%;
right:5%;
width:50%;
height:5%;
text-align:center;
font-size:110%;
overflow-x:auto;
overflow-y:hidden;
opacity:0.95;
}
#navbar a {
display:inline-block;
height:92%;
width:20%;
padding:0.5%;
transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
}
#navbar a:hover {
background-color:#ffffff;
color:#000000;
}
.infobox {
z-index:2;
top:57%;
right:6%;
height:33%;
width:44%;
padding:1%;
opacity:0;
transition:1s ease-in;
-o-transition:1s ease-in;
-ms-transition:1s ease-in;
-moz-transition:1s ease-in;
-webkit-transition:1s ease-in;
}
.infobox:target {
z-index:3;
opacity:0.95;
}
#statbox, #obox {
top:57%;
height:33%;
width:20%;
padding:1%;
}
#statbox {
right:30%;
}
#obox {
right:6%;
}
h2, b {
color:#D10000;
}
p {
text-indent:2%;
}
a {
text-decoration:none;
color:#FFFFFF;
}
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#ffffff;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#D10000;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#D10000;
}
#credit {
text-decoration:none;
color:#FFFFFF;
position:fixed;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
font-family: UnifrakturCook, Brush Script MT, script, cursive;
font-size:16px;
}
</style>
<div id="mugshot">
<img src="https://lh3.googleusercontent.com/-mLIJXPMwAIw/VyGMbqWb_uI/AAAAAAAABzA/WJ6GQTRWHSsCCfMf40mzy64l0JufGylZg/w900-h1305/yakumo_saito_render_1_by_nyaediter-d5m9cto.png"/>
</div>

<div id="box">
</div>

<div id="navbar">
<a href="#01">Stats/OOC</a>
<a href="#02">About</a>
<a href="#03">Extras</a>
<a href="#00">Reset</a>
</div>

<div class="infobox" id="01" style="background-color:transparent;border:none;overflow:visible;">
<div id="statbox">
<h2>Stats</h2>
<p style="text-indent:0%;">
<b><Font Color=White>Name:</font></b>PokeBlood<br>
<br>
<b><Font Color=White>Species:</font></b>Demon<br>
<br>
<b><Font Color=White>Nicknames:</font></b>PB/Poke (By LilKinkyBunny) <br>
<br>
<b><Font Color=White>Gender:</font></b>Male<br>
<br>
<b><Font Color=White>Date Of Birth:</font></b> Confidential<br>
<br>
<b><Font Color=White>Age:</font></b>20<br>
<br>
<b><Font Color=White>Hair:</font></b>Black with Silver highlights <br>
<br>
<b><Font Color=White>Eyes:</font></b>red<br>
<br>
<b><Font Color=White>Height:</font></b>5'11<br>
<br>
<b><Font Color=White>Build:</font></b>Strong, Resilient, Agile.<br>
<br>
<b><Font Color=White>Orientation:</font></b> My Choose<br>
<br>
<br>
</p>
</div>

<div id="obox">
<h2>OOC:</h2>


</div>
</div>
</div>

<div class="infobox" id="02">
<h2>About</h2>
<p>
<font color= white>Joseph was often the scapegoat for bullying in junior high and high school, that has made him wary of anything that could be even remotely considered hurtful, and he is ready to jump to someone else's defense. He was the center of bullying because he was abnormal. With control over darkness, shadows, telekinesis. People would think with cool abilities like that, he would have friends right? Unfortunately, its the exact opposite. Everyone thought of him as dangerous, and he was even under the close eye of the american government. Yet he has somehow remained friendly through all of this. Always looking for someone to help, and anyone to befriend. The 20 year old really is too trusting. Andrea (SoftKitten) helped him through a tough time in his life, and she is like a sister to him. Through her, he gained the power to shape shift.</font>
</p>
</div>

<div class="infobox" id="03">
<h2>Extras</h2>
<p>
Some text.
</p>
<a href="" target="_blank">Link</a>
</div>

</div>
</div>


</body>
</html>