Lord H

<style>
/*
INVISIBLE CREDIT; PLEASE DON'T REMOVE

Author: Elle
For: Abandoned;
Text type: CSS/HTML
*/
<style>
/*
INVISIBLE CREDIT; PLEASE DON'T REMOVE

Author: Elle
For: Abandoned;
Text type: CSS/HTML
*/
@import url('https://fonts.googleapis.com/css?family=Eater|Freckle+Face|Metal+Mania|Rye|Special+Elite|Trade+Winds');

 ::-webkit-scrollbar {width: 0.3vw; height: 0.3vw;}
 ::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent;}
 ::-webkit-scrollbar-thumb { border-radius: 0px; background-color: transparent;}

  *{
  box-sizing: border-box;
}
body{
  background-color: #444;
  background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/13236d88752111.5ddfa82a12e2b.jpg');
  background-size:100% 100%;
  overflow:hidden;
}

img {
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}

.r{float:right;}

.nav-container{
  position:absolute;
  top: 5%;
  width:13%;
  margin-top:10px;
  box-shadow: 0 2px 2px 2px black;
  transition-duration: 0.3s;
  background: transparent;
  z-index: 100;
}

a.nav {
 border-top: 1px solid rgba(255,255,255,0.1);
 border-bottom: 1px solid black;
 text-decoration:none;
 display:block;
 width:100%;
 line-height:50px;
 color:#792424;
 text-transform: uppercase;
 font-family: avanti serif regular;
 font-weight: bold;
 padding-left: 25%;
 border-left:5px solid transparent;
 letter-spacing:1px;
 border-radius: 10px;
}

a.nav:hover{
  color: #eee;
 border-left: 5px solid #FCFCFC;
 background-color: #1B1B1B;
}

#shark {
  height:100%;
  width:25%;
  left: 10%;
  position: absolute;
  animation: shark 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index:-1;
}

@keyframes shark{
  from{opacity:1;top:-2%;}
  to{opacity:0.7;top:0%;}
}

#content {
  position: absolute;
  height: 80%;
  width: 50%;
  background: transparent;
  top: 16%;
  left: 45%;
  overflow:hidden;
}

#sheet {
  position: absolute;
  z-index: -1;
  left: 0%;
  top:0%;
  bottom:0%;
  right:0%;
  background: black;
  opacity:0.8;
}

#one, #two, #three, #four, #five {
  min-height: 100%;
  width: 100%;
  background: transparent;
  top: 0%;
  left: 0%;
  opacity: 1;
}

 #host{
    min-height:100%;
    width:100%;
    overflow:hidden;
  }

.top {
  height: 13.5%;
  width: 87%;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none
  border-left: 1px solid black;
  background: url('http://i.imgur.com/yE6vfo4.jpg');
  background-size:cover;
  top: 16%;
  border-radius: 10px;
  opacity: 1;
  padding: 10px;
  font-size: 5vh;
  font-family: Trade Winds;
  color: #eee;
}

.information {
  height: 74%;
  width: 87%;
  border-top: 3px solid rgba(255,255,255,0.1);
  border-bottom: 3px solid black;
  text-decoration:none;
  background: #1B1B1B;
  border-radius: 10px;
  top: 28%;
  opacity: 1;
  font-family: Special Elite;
  font-size: 3vh;
  color: #eee;
  padding: 30px;
  overflow: auto;
  z-index: 1;
  line-height: 95%
}

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

a:hover {
  color: #0c4299;
}

b {
  font-family: 'Rye';
  font-size: 2.8vh;
  color: #662117;
}

i {
  color: #ad4737;
}

</style>
<div id="sheet"></div>
<div id="shark">
  <img src="https://vignette.wikia.nocookie.net/woy/images/9/98/Lord_Hater.png/revision/latest?cb=20140604005435" style="height:100%" draggable="false">
</div>
<div class="nav-container">
<a href="#one" class="nav">Stats</a>
<a href="#two" class="nav">Bio</a>
<a href="#three" class="nav">Friends</a>
<a href="#four" class="nav">OOC</a>
<a href="https://ellexidecodes.github.io/" class="nav" title="&copy; Elle">coder</a>
</div>
<div id="content">
  <div id="host">
    <div id="one">
      <div class="top"><center>Statistics</center></div>
      <br>
      <div class="information">
      <b>Name</b> <div class="r">Abagail Leicester</div><br><br>
      <b>Moniker</b> <div class="r">Abby</div><br><br>
      <b>Age</b> <div class="r">i dunno fam</div><br><br>
      <b>Family</b> <div class="r">Shark</div><br><br>
      <b>Species</b> <div class="r">Great White</div><br><br>
      <b>Hair</b> <div class="r">Black</div><br><br>
      <b>Eyes</b> <div class="r">Blue</div><br><br>
      <b>Gender</b> <div class="r">Femme AF</div><br><br>
      <b>Orientation</b> <div class="r">lol</div><br><br>
      </div>
    </div>
    <br>
    <div id="two">
      <div class="top"><center>Biography</center></div>
      <br>
      <div class="information">
        <center>Work In Progress
        <br><br>
        I honestly don't know what to tell you, mate.
        <br>
        <b>bold</b> <i>italics</i> <s>strikethrough</s> <a href="">link</a>
        </center>
      </div>
    </div>
    <br>
    <div id="three">
      <div class="top"><center>Friends</center></div>
      <br>
      <div class="information">
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br>small note.</center><br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br>small note.</center><br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br>small note.</center><br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br>small note.</center><br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br>small note.</center><br><br><br>
      <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
      <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br>small note.</center><br><br><br>
      </div>
    </div>
    <br>
    <div id="four">
      <div class="top"><center>Out of Character</center></div>
      <br>
      <div class="information">
        <font color="#ffff80">&#9734;</font> In-room approach is your best bet.<br>
        <font color="#ffff80">&#9734;</font> PM Friendly.<br>
        <font color="##ffff80">&#9734;</font> lewd is earned.<br>
        <font color="#ffff80">&#9734;</font> What I do IC does not reflect on me OOC.<br>
        <font color="#ffff80">&#9734;</font> More here idk fam
      </div>
    </div>
    <br>
  </div>
</div>