Profile Layout

<style>
.pfor{display:none;}
body {background-color: #000000;}
body {background-image:url("BACKGROUND URL"); background-attachment:fixed; background-size:cover;}
#pbox {margin: auto;
width: 600px;
background-color:black;
border-style: solid;
border-width: 2px;
border-color: #333;
padding: 5px;
}
</style>


<style type="text/css">
!-- Copy from here, into the Style section --!
#player{
 position: fixed;
 z-index:2;
 bottom: 230px;
 left: 934px;
 border-radius: 15px;
 width: 32px;
 height: 32px;
 border: 5px solid #D5D5D5;
 box-shadow: 0px 0px 19px #D5D5D5;
 overflow:hidden;}


</style>


<div id="player">
<audio controls loop="1"><source src="(MUSIC URL)" type="audio/mpeg"></audio>
</div>

<style>
ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 200px;
 background-color: #131313;
}

li a {
 display: block;
 color: #BBBBBB;
 padding: 8px 16px;
 text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
 background-color: #343434;
 color: darkviolet;
}

.tabs{
float: left;
margin-right: 15px;
margin-bottom: 15px;
width: 54px;
height: 54px;
text-align: left;
}

.info{
position: fixed;
right: 50;
bottom: 125;
margin-top: 234px;
width: 326px;
height: 425px;
padding: 10px;
background: #131313;
font-family: 'Amaranth', sans-serif;
color: purple;
font-size: 12px;
line-height: 10px;
text-align: justify;
border: 2px solid #9E3DAC;
outline-offset: 2px;
opacity: 0;
overflow: auto;
transition: 1s;
}

.info:target{
opacity: 1;
transition: 1s;
z-index: 1;
}

</style>

<br>






<div class="tabs">

<ul>
 <li><a href="#one">Stats</a></li>
 <li><a href="#two">Personality</a></li>
 <li><a href="#three">History</a></li>
 <li><a href="#four">Abilites</a></li>
 <li><a href="#five">OOC/Gallery</a></li>

</ul>
</div>

<br>



<div class="info" id="one"><h1>Stats</h1><strong>Full Name:</strong> - <br>
<strong>Age:</strong> - <br>
<strong>Gender:</strong> - <br>
<strong>Race:</strong> - <br>
<strong>Height:</strong> - <br>
<strong>Weight:</strong> - <br>
<strong>Alias:</strong> - <br>
<strong>Sexual Orientation:</strong> - <br>
<strong>Status:</strong> - <br>
<strong>Occupation:</strong> - </div>

<div class="info" id="two"><h1>Persona</h1></div>

<div class="info" id="three"><h1>History</h1></div>

<div class="info" id="four"><h1>Abilities</h1></div>

<div class="info" id="five"><h1>OOC</h1></div>