Pawn of Fire Code

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Niconne|Mrs+Saint+Delafield|Poiret+One);

body, a:hover {cursor: url(https://66.media.tumblr.com/da5a12cc0fb8f866b7d3a1cd8b47e072/tumblr_inline_mnmr02HZLH1qz4rgp.gif), progress !important;}

::-webkit-scrollbar-thumb:vertical {
background: #fff;
border: 0px solid #fff;
height: 0px;
opacity: 0.1;
}

 ::-webkit-scrollbar-thumb:horizontal {
background-color: #fff;
border: 0px solid #fff;
height: 0px;
opacity: 0.1;
}

::-webkit-scrollbar {
height:10px;
width: 0px;
background-color: #fff;
border: 0px solid #fff;
opacity: 0.1;
}


body {
background-color: #1a1a1a;
}

#img {
position: fixed;
top: 0%;
left: 28%;
background-image: url('http://i.imgur.com/mXH5o4V.png');
width: 42%;
height: 110%;
background-size: 100%;
background-repeat: no-repeat;
z-index: 999;
}

#img2 {
position: fixed;
top: 55%;
left: 5%;
background-image: url('http://i.imgur.com/pCfTCIG.jpg');
width: 8%;
height: 40%;
background-size: 100%;
background-repeat: no-repeat;
background-position: bottom;
background-color: #222;
border: 5px solid #602020;
opacity: 1;
-webkit-filter: brightness(110%);
}

#img3 {
position: fixed;
top: 55%;
left: 5%;
background-image: url('https://media.giphy.com/media/owmc9OD22Dlu0/giphy.gif');
width: 8%;
height: 40%;
background-size: 500%;
background-repeat: no-repeat;
background-position: center;
background-color: #222;
border: 5px solid #602020;
opacity: 0.15;
}


#img4 {
position: fixed;
top: 5%;
left: 5%;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/2e/78/c7/2e78c79cebbd4632cd41546a3138013e.gif');
width: 35%;
height: 40%;
background-size: 110%;
background-repeat: no-repeat;
background-position: center;
background-color: #222;
border: 5px solid #602020;
opacity: 0.8; ;
}

#img5 {
position: fixed;
top: 5%;
left: 5%;
background-image: url('http://i.imgur.com/C4pnKjh.png');
width: 35%;
height: 40%;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-color: ;
border: 5px solid #602020;
opacity: ;
}

#infobox {
position: fixed;
top: 55%;
left: 15%;
width: 25%;
height: 40%;
background-color: #e6e6e6;
border: 5px solid #732626;
z-index: 999;
overflow: hidden;
}

#nav{
position: fixed;
float: left;
top: 44%;
left: 13.7%;
background-color: none;
width: 35%;
height: 15%;
opacity: 1;
transition-duration: 1s;
z-index: 9999;
}

#nav a{
display: block;
text-decoration: none;
text-align: center;
width: 8%;
height: 34%;
font-family: calibri;
font-size: 11px;
color: #602020;
background-color: #e6e6e6;
letter-spacing: 1px;
border: 3px solid ;
margin-top: 5%;
margin-left: 3.5%;
float: left;
opacity: 1;
}

#nav a:hover {

background-color: #993333;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

#text {
margin-top: 0%;
font-family: calibri;
font-size: 13px;
color: #862d2d;
margin-left: 0%;
background-color: ;
width: 90%;
height: 100%;
padding: 15px;
text-align: left;
line-height: 10px;
overflow: auto;
opacity: 0.9;
}

#music {
position: fixed;
top: 47.8%;
left: 5%;
background-color: #993333;
width: 8.5%;
height: 5%;
border: 3px solid #732626;
}

#bo {
top: 48.7%; /* use to position the box */
left: 5.5%; /* use to position the box */
 overflow: hidden;
 position: fixed;
 width: 24px; /* use to change the size of the box */
 height: 24px; /* use to change the size of the box */
 border-radius: 90px;
border: 2px solid #732626;
 background-color:#862d2d ;
 opacity: 1;
z-index: 9999;
}

#bo img {
 margin-top: 9px;
 margin-left: -8px;
 position: fixed;
opacity: 0.8;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 transition: all 0.7s ease-in-out;
}

#bo:hover img {
 opacity: 0;
 margin-top: 30px;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 transition: all 0.7s ease-in-out;
}

#player {
 margin-top: -4px;
 margin-left: -5px;
 overflow: hidden;
 opacity: 0;
 width: 54px;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 transition: all 0.7s ease-in-out;
}

#bo:hover #player {
 opacity: 1;
 -webkit-transition: all 0.7s ease-in-out;
 -moz-transition: all 0.7s ease-in-out;
 -o-transition: all 0.7s ease-in-out;
 -ms-transition: all 0.7s ease-in-out;
 transition: all 0.7s ease-in-out;
}

h1{
font-family: Niconne;
font-size: 40px;
text-align: right;
color: #602020;
text-shadow: 0px 2px 2px rgba(0, 0, 0,1);
padding-top: 00px;
padding-right: 0px;
margin-bottom: 5px;
margin-top: 0px;
line-height: 25px;
border-bottom: 1px dotted #666;
}

h2{
font-family: poiret one;
font-size: 15px;
text-align: center;
color: #e6e6e6;
text-shadow: 0px 2px 2px rgba(0, 0, 0,1);
padding-top: 00px;
padding-right: 0px;
margin-bottom: 5px;
margin-top: 0px;
line-height: 5px;

}

a {
text-decoration: none;
color: #3d1010;
}

</style>

<div id="img"></div>
<div id="img2"></div>
<div id="img3"></div>

<div id="img4"></div>
<div id="img5"></div>



<div id="nav">
<a href="#one"></a>
<a href="#two"></a>
<a href="#three"></a>
<a href="#four"></a>
<a href="#five"></a>
<a href="#six"></a>
</div>

<div id="music">
<div id="text">
<h2>firework</h2>
</div>
</div>

<div id="infobox">

<a name="one"></a>
<div id="text">
<h1>Dossier</h1>

<div style="float: left; clear: left;">
<b>STAT</b> -
</div>
<div style="float: right; clear: right;">
stat
</div><br>

<div style="float: left; clear: left;">
<b>STAT</b> -
</div>
<div style="float: right; clear: right;">
stat
</div><br>

<div style="float: left; clear: left;">
<b>STAT</b> -
</div>
<div style="float: right; clear: right;">
stat
</div><br>

<div style="float: left; clear: left;">
<b>STAT</b> -
</div>
<div style="float: right; clear: right;">
stat
</div><br>

<div style="float: left; clear: left;">
<b>STAT</b> -
</div>
<div style="float: right; clear: right;">
stat
</div><br>

<div style="float: left; clear: left;">
<b>STAT</b> -
</div>
<div style="float: right; clear: right;">
stat
</div><br>

</div>

<a name="two"></a>
<div id="text">
<h1>History</h1>
two
</div>

<a name="three"></a>
<div id="text">
<h1>Abilities</h1>
three
</div>

<a name="four"></a>
<div id="text">
<h1>Inventory</h1>
four
</div>

<a name="five"></a>
<div id="text">
<h1>Acquaintances</h1>
five
</div>

<a name="six"></a>
<div id="text">
<h1>Notes</h1>

<div style="float: left; clear: left;">
I -
</div>
<div style="float: right; clear: right;">
Profile coded by <a href="https://roleplay.chat/profile.php?user=Pawn+of+Roses">Aselia</a>. Do not steal/edit/etc.
</div><br>

<div style="float: left; clear: left;">
II -
</div>
<div style="float: right; clear: right;">
Rule
</div><br>

<div style="float: left; clear: left;">
III -
</div>
<div style="float: right; clear: right;">
Rule
</div><br>

<div style="float: left; clear: left;">
IV -
</div>
<div style="float: right; clear: right;">
Rule
</div><br>

<div style="float: left; clear: left;">
V -
</div>
<div style="float: right; clear: right;">
Rule
</div><br>

<div style="float: left; clear: left;">
VI -
</div>
<div style="float: right; clear: right;">
Rule
</div><br>

</div>

</div>


<div id="bo">
 <center><img src="http://media.tumblr.com/tumblr_m7w2p9qThT1r6o8v2.gif"; style="margin-top: 7px; "></center>

<div id="player">

<audio controls style="opacity: 0.05;"><source src="http://k003.kiwi6.com/hotlink/84w9owoga3/Firework-Katy_Perry.mp3






"></audio>
</div>