Opal Rose

<!DOCTYPE html>
<body>
<style>
body {
background-image: url(http://cdn.paper4pc.com/?module=images&act=downloadResize&file=sakura-flower-wallpaper-8.jpg&x=3750x3000&y=);
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 105%;
color:#;
}
#content {
position:fixed;
top:0%;
left:15%;
height:95%;
width:90%;
}
#splatter, #mugshot, #title, #navbar, #infobox, #infobox audio, #info {
position:absolute;
}
#mugshot, #navbar a, #infobox {
border:2px solid #000000;
}
#splatter {
top:-40%;
height:205%;
width:120%;
background-image: url();
background-size:100% 100%;
}
#mugshot {
top:41%;
left:32%;
width:18%;
}
#title {
top:25%;
left:48%;
height:0%;
width:40%;
text-align:left;
font-size:70px;
font-weight:bold;
color:#b900fc;
}
#navbar {
top:50%;
left:80%;
height:20%;
width:10%;
}
#navbar a {
height:20%;
width:100%;
margin-bottom:2%;
background-color:#9800ff;
display:block;
-o-transition:.8s;
-ms-transition:.8s;
 -moz-transition:.8s;
-webkit-transition:.8s;
transition:.8s;
}
#navbar a:hover {
color:#dc143c;
background-color:#000000;
}
#infobox {
top:45.5%;
left:50.5%;
height:38%;
width:28%;
background-color:#000000;
}
#infobox audio {
top:0%;
left:0%;
height:12%;
width:100%;
}
#info {
left:3%;
top:13%;
height:82%;
width:94%;
overflow:hidden;
}
.tab {
height:100%;
width:100%;
overflow-y:auto;
}
a {
color:#b900fc;
}
p {
text-indent:5%;
}
h2 {
color:#ffffff;
text-align:center;
}
b {
color:#b900fc;
}
i {
color:#ffffff;
}
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#ffffff;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#6B0075;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#6B0075;
}
#credit {
text-decoration:none;
color:#007ba7;
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="content">
<div id="splatter"></div>

<div id="title">

</div>
<img src="http://i.imgur.com/2BySUen.jpg" id="mugshot"/>

<div id="navbar">
<a href="#01"></a>
<a href="#02"></a>
<a href="#03"></a>
<a href="#04"></a>
</div>

<div id="infobox">

<div id="info">

<div class="tab" id="01">
<h2><img src="https://images.cooltext.com/4878953.png" width="200" height="70" alt="Opal Rose" /></a></h2>
<br>
<font color=white>
<b>Species:</b> Goddess/Heroic Spirit
<br>
<b>Gender:</b> Female
<br>
<b>Age:</b> 16
<br>
<b>Hair:</b> White
<br>
<b>Eyes:</b> Crimson
<br>
<b>Height:</b> 5'3
<br>
<b>Weight:</b> Rude!
<br>
<b>Build:</b> Petite
<br>
<b>Orientation:</b>My Father would Kill you
<br>
<b>Father:</b><a href="" target="https://roleplay.chat/profile.php?user=King+Gilgamesh"><i>King Gilgamesh</i> </a>
<br>
<b>Mother:</b>Lapillus Goddess of Nature (Deceased)
<br>
<b>Family:</b>Unkown
</font>
</p>
</div>

<div class="tab" id="02">
<h2>About</h2>
<p><Font Color=White>
People think it is stressful being the daughter or son of a god or goddess, But being the daughter to a god who is also a King and a Heroic spirit. My father has told me many stories of his past seeing as my mother  passed away when I was a young girl but it is not like I am not loved, My Father takes great care of me though sometimes I wonder what is with the woman always clinging to him.<br><br>
My mother was the goddess of nature and had the powers to make plants and trees grow while also helping them survive in areas they normally would die in, Father told me when he first met mother that she was only a young Maiden working in the garden and he fell in love with her at first site. Though my Father says I look exactly like my mother and I remind him of her very much. Sometimes I wonder if looking for much like my mother but with crimson eyes hurts my father because I remind him of my mother, but he assures me that I am not hurting him.<br><br>
My Father is Gilgamesh The King of all Kings and is also a Demi god, so between my mother and father I have more god blood in me then I do human blood. Though I do have some of his powers it feel weird to use them. Though I must say when my father is focused on me and talking to me he is very different from that of how he acts around woman.
</font>
</p>
</div>

<div class="tab" id="03">
<h2>Extras</h2>
<p><font color=white>
<center> Opal at 6<br><img src="http://s3.zerochan.net/Kushina.Anna.240.1964793.jpg" height="150" width="150"><br>
Opal at 12<br>
<img src="http://data.whicdn.com/images/219569185/large.jpg" height="150" width="150"><br>
Opal at 16<br>
<img src="http://i.imgur.com/2BySUen.jpg" height="150" width="150"><br>
<br>
My Mother<br>
<img src="http://i869.photobucket.com/albums/ab259/guitarangel14/anime/animegoddessofnaturewithbirds.jpg" height="150" width="150"><br>
My Father & Lil Brother<br>
<img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e15/11374468_1588521634769863_315158612_n.jpg?ig_cache_key=MTAxNjczODE2ODQ0NTIyODI5OQ%3D%3D.2" height="150" width="150"><br>


</center></font>
</p>
</div>

<div class="tab" id="04">
<h2>OOC</h2>
<font color=white>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
<li>Bullet three</li>
<li>Bullet four</li>
<li>Bullet five</li>
<li>Bullet six</li>
<li>Bullet seven</li>
<li>Bullet eight</li>
</ul>
</font>
</div>

</div>
</div>

</div>


</body>
</html>