Serena's code

<style>
@import url('https://fonts.googleapis.com/css?family=Audiowide|Special+Elite');

body {
background-image: url("https://i.imgur.com/KvkSl6W.png");
background-attachment: fixed;
background-position: top;
color: black;
background-color:#000000;
font-family: "Special Elite";
font-size: 16px;
}

#credit {
Position: fixed; bottom: 10px; left: 10px;
font-family: "Audiowide";
font-size: 14px;
z-index: 99;
text-shadow: 2px 0 0 #4C9DCC, -2px 0 0 #4C9DCC, 0 2px 0 #4C9DCC, 0 -2px 0 #4C9DCC, 1px 1px #4C9DCC, -1px -1px 0 #4C9DCC, 1px -1px 0 #4C9DCC, -1px 1px 0 #4C9DCC;
z-index: 99;
}

#nav1 {
position: fixed; left: -1000px; right: 0px; top: -450px; bottom: 0px; margin: auto;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
z-index: 2;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#nav1:hover {
border: 10px solid white;
border-radius: 50%;
}

#nav2 {
position: fixed; left: -650px; right: 0px; top: -450px; bottom: 0px; margin: auto;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
z-index: 2;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#nav2:hover {
border: 10px solid white;
border-radius: 50%;
}

#nav3 {
position: fixed; left: -300px; right: 0px; top: -450px; bottom: 0px; margin: auto;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
z-index: 2;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#nav3:hover {
border: 10px solid white;
border-radius: 50%;
}

#nav4 {
position: fixed; left: 0px; right: -50px; top: -450px; bottom: 0px; margin: auto;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
z-index: 2;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#nav4:hover {
border: 10px solid white;
border-radius: 50%;
}

#nav5 {
position: fixed; left: 0px; right: -400px; top: -450px; bottom: 0px; margin: auto;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
z-index: 2;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#nav5:hover {
border: 10px solid white;
border-radius: 50%;
}

#nav6 {
position: fixed; left: 0px; right: -750px; top: -450px; bottom: 0px; margin: auto;
height: 150px;
width: 150px;
border: 10px solid black;
border-radius: 50%;
z-index: 2;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#nav6:hover {
border: 10px solid white;
border-radius: 50%;
}

#mainpic {
position: fixed; left: -800px; right: 0px; top: 0px; bottom: -185px; margin: auto;
height: 400px;
border: 8px solid black;
z-index: 2;
}

#mainpic2 {
position: fixed; left: -800px; right: 0px; top: 0px; bottom: -185px; margin: auto;
height: 400px;
border: 8px solid black;
z-index: 3;
opacity: 0;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#mainpic2:hover {
opacity: 1;
}

#tab { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;
height: 360px;
width: 490px;
z-index:2;
display: none;
}

#OOC #tab {
display: block;
}

#OOC:target #tab, #Stats:target #tab, #About:target #tab, #Abilities:target #tab, #History:target #tab, #Friends:target #tab {
display: block;
z-index: 99;
}

#header {
position: fixed; left: 0px; right: 0px; top: -145px; bottom: 0px; margin: auto;
width: 300px;
height: 25px;
padding: 10px;
border: 8px black solid;
background-color: white;
background-image: url("https://i.imgur.com/G2YVayE.png");
font-family: "Griffy";
}

#box {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -240px; margin: auto;
width: 400px;
height: 230px;
padding: 10px;
border: 8px black solid;
background-color: white;
background-image: url("https://i.imgur.com/G2YVayE.png");
overflow: auto;
}

.friendpic {
border: 5px solid black;
width: 100px;
height: 100px;
margin: 5px;
pointer-events: auto;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

.friendpic:hover {border: 5px solid white;}

#bordertop {
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -55px; margin: auto;
border-top: 8px solid black;
border-left: 8px solid black;
height: 500px;
width: 1200px;
z-index: 1;
}

#borderbottom {
position: fixed; left: -200px; right: 0px; top: 0px; bottom: -55px; margin: auto;
border-bottom: 8px solid black;
height: 500px;
width: 1000px;
z-index: 1;
}

#title {
position: fixed; left: 0px; right: -800px; top: 0px; bottom: -100px; margin: auto;
line-height: normal;
font-size: 100px;
height: 300px;
width: 300px;
z-index: 1;
}

a.credit:link {color:#f0f0f0;}
a.credit:visited {color:#f0f0f0;}
a.credit:hover {color:#6f52be;}
a.credit {text-decoration:none;}

a {text-decoration: none; color: white;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;}
a:visited {color: white;}
a:hover {color: red;}

b {color:#f0f0f0;}

h1, h2, h3 {
text-align: center;
margin: 0px;
padding: 0px;
font-family: "Special Elite";
}


::-webkit-scrollbar {
width: 4px;
height: 1px;
}

::-webkit-scrollbar-track {
border-radius: 4px;
}

::-webkit-scrollbar-thumb {
background: black;
}
</style>
<body>
<div id="bordertop"></div>
<div id="borderbottom"></div>

<a href="#OOC"><img id="nav1" src="http://i.picpar.com/pk0e.jpg"></div></a>
<a href="#Stats"><img id="nav2" src="http://i.picpar.com/qk0e.jpg"></div></a>
<a href="#About"><img id="nav3" src="http://i.picpar.com/rk0e.jpg"></div></a>
<a href="#Abilities"><img id="nav4" src="http://i.picpar.com/sk0e.jpg"></div></a>
<a href="#History"><img id="nav5" src="http://i.picpar.com/tk0e.jpg"></div></a>
<a href="#Friends"><img id="nav6" src="http://i.picpar.com/uk0e.png"></div></a>

<img id="mainpic" src="http://i.picpar.com/nk0e.jpg" alt="Main Picture"/>
<img id="mainpic2" src="http://i.picpar.com/ok0e.jpg" alt="Hover Picture"/>

<div id="title">Les<br>Anciens</div>



<div id="OOC">
<div id="tab">
<div id="header">
<h1>Out of Character</h1>
</div>
<div id="box">
<center>
<li>Dont force me things I dont like.</li>
<li>Dont be afraid to say hello.</li>
<li>Ic =/= OOC</li>
<li>Happily Married IRL.</li>
<li>Story before smut!!!</li>
<li>Once taken, sex with ONLY partner. </li>
<li>SEX IS EARNED!!!</li>
</center>
</div>
</div></div>

<div id="Stats">
<div id="tab">
<div id="header">
<h1>Stats</h1>
</div>
<div id="box">
<b>Name:</b><span style=float:right>Serena Bellerose</span><br>
<b>Alias:</b><span style=float:right>Le Vampyre</span><br>
<b>Age:</b><span style=float:right>Too old</span><br>
<b>Species:</b><span style=float:right>Vampyre</span><br>
<b>Home residence:</b><span style=float:right>Paris, France</span><br>
<b>Native Language:</b><span style=float:right>French</span><br>
<b>Status:</b><span style=float:right>Single</span><br>
<b>Sexuality:</b><span style=float:right>Sapiosexual</span><br>
<b>Occupation:</b><span style=float:right>Assassin for hire</span><br>
</div>
</div></div>

<div id="About">
<div id="tab">
<div id="header">
<h1>Personality</h1>
</div>
<div id="box">
Kind, Intelligent, Can be bitchy (Depending on person), Very out going. Doesn't like human's very much.
</div>
</div></div>

<div id="Abilities">
<div id="tab">
<div id="header">
<h1>Skills</h1>
</div>
<div id="box">
<li>Enhanced bite </li>
<li>Enhanced speed </li>
<li>Enhanced strength </li>
<li>Enhanced durability </li>
<li>Enhanced healing </li>
<li>Enhanced senses </li>
<li>Predator instinct </li>
</div>
</div></div>

<div id="History">
<div id="tab">
<div id="header">
<h1>History</h1>
</div>
<div id="box">
Very long story....
</div>
</div></div>

<div id="Friends">
<div id="tab">
<div id="header">
<h1>Friends</h1>
</div>
<div id="box">
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="http://i.picpar.com/vk0e.jpg" class="friendpic" title="DESCRIPTION OF FRIEND HERE" alt="friend"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="http://i.picpar.com/vk0e.jpg" class="friendpic" title="DESCRIPTION OF FRIEND HERE" alt="friend"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="http://i.picpar.com/vk0e.jpg" class="friendpic" title="DESCRIPTION OF FRIEND HERE" alt="friend"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="http://i.picpar.com/vk0e.jpg" class="friendpic" title="DESCRIPTION OF FRIEND HERE" alt="friend"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="http://i.picpar.com/vk0e.jpg" class="friendpic" title="DESCRIPTION OF FRIEND HERE" alt="friend"></a>
</center>
</div>
</div></div>

<div id="credit"><a class="credit" href="https://roleplay.chat/profile.php?user=Spaceman+Codes">Spaceman</a></div>
</body>