Ruka

<style>
.pfor{display:none;}
body {background-color: #000000;}
body {background-image:url("http://img1.reactor.cc/pics/post/full/Anime-Ruka-Urushibara-Steins-Gate-Anime-Art-3701287.jpeg"); background-attachment:fixed; background-size:100%;}
#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>



<style>
ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #HexColor;
}

li {
 float: left;
}

li a {
 display: block;
 color: #HexColor;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

li a:hover {
 background-color: #HexColor;
}
</style>



<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">OOC</a></li>
 <li><a href="#five">Gallery</a></li>
 <li><a href="#home">Reset</a></li>
</ul>






<style>
img {
 border-radius: 50%;
}

img {
 display: block;
 margin: auto;
 font-size: 18px;
}


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

.info{
position: fixed;
right: 950;
bottom: 75;
margin-top: 234px;
width: 326px;
height: 425px;
padding: 10px;
background: #HexColor;
font-family: Arial Italic;
color: #HexColor;
font-size: 14px;
line-height: 15px;
text-align: justify;
border: 2px solid #HexColor;
outline-offset: 2px;
opacity: 0;
overflow: auto;
transition: 1s;
}

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


</style>


<div class="info" id="one"><h1>Stats</h1>
<strong>Full Name:</strong> Ruka Urushibara <br><br>
<strong>Age:</strong> 16 <br><br>
<strong>Gender:</strong> Male <br><br>
<strong>Race:</strong> Human <br><br>
<strong>Height:</strong> (161cm) <br><br>
<strong>Alias:</strong> Ruka, Ruky <br><br>
<strong>Build:</strong> Slender, has a curved butt <br><br>
<strong>Sexual Orientation:</strong> Bisexual(Always Sub) <br><br>
<strong>Status:</strong> Single <br> <br>
<strong>Occupation:</strong> Unemployed(Seeking Job!) </div>

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

He is very sensitive and emotional, as simple sudden responses from Rintarou can cause him to cry or tremble. He likes to wear girly clothing, which caused Kurisu to confuse him for a real girl when the two met in Rintarou's lab. Rintarou even described him as "more girly than any girl, more feminine than any female" in the game.
</div>

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

<div class="info" id="four"><h1>OOC</h1><strong>Pm friendly<br><br>Rp friendly<br><br><strong>No limits</strong><br><br>Starting with a post will get you better results for a response<br><br>I'm always in character!!<br><br>Semi to multi-para</div>

<div class="info" id="five"><h1>Gallery</h1><style>

div.img {
 margin: 5px;
 border: 1px solid #ccc;
 float: left;
 width: 180px;
}

div.img:hover {
 border: px solid #777;
}

div.img img {
 width: 100%;
 height: 80%;
}

div.desc {
 padding: 15px;
 text-align: center;
}
</style>


<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>

<div class="img">
 <a target="_blank" href="URL">
 <img src="URL" width="300" height="200">
 </a>
</div>


</div>



<div id="player">
<audio controls loop="1"><source src="MUSIC"></audio>
</div>




<style>
img {
 border-radius: 50%;
 display: block;
 margin: auto;
 height:60%;
 width: auto;
}
</style>