Mochafix

<link href="rpc.css" rel="stylesheet" type="text/css">
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
		<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/dark-hive/jquery-ui.min.css" rel="stylesheet">
		<center>
		<h3 class="pfor">Profile for &quot;Mocha&quot;</h3><div id="profile"></center>

<style type="text/css">

h3.pfor{
  display: none;
}

#profile{
  border-width: 0px;
  background: transparent;
}

body{
  background-color: white;
}

.navigation {
  font-size: 120%;
  z-index: 0;
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 95px;
  left: 31%;
  transition: all 1s ease;
}

.navigation a {
  transition: all 0.5s ease;
  text-decoration: none;
  display: inline-block;
  padding: 10px;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 70px;
  color: #BFA06E;
  background: #8E7752;
  border: 2px solid #BFA06E;
  width: 50px;
  text-align: center;
  border-top-right-radius: 1em;
}

#effect1:target #navi1 a,
#effect2:target #navi2 a,
#effect3:target #navi3 a,
.navigation a:hover{
  background: #6B593E;
}

#effect1:target #navi1,
#effect2:target #navi2,
#effect3:target #navi3,
.navigation:hover{
  top: 50px;
}

.items {
  transition: all 0.5s ease-in-out;
  opacity: 0;
  display: flex;
  position: fixed;
  left: 31%;
  border: 2px solid #BFA06E;
  width: 620;
  height: 400;
  flex-wrap: wrap;
  z-index: 1;
  margin-top: 126px;
  overflow: hidden;
  color: #BFA06E;
  font-size: 110%;
  background: #8E7752;
  z-index: 1;
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
}

#effect1:target #l1,
#effect2:target #l3,
#effect3:target #l4,
.items:target, .b1 {
  transition: all 0.5s ease-in-out;
  opacity: 1;
  display: flex;
  position: fixed;
  left: 31%;
  border: 2px solid #BFA06E;
  width: 620;
  height: 400;
  flex-wrap: wrap;
  z-index: 1;
  margin-top: 126px;
  overflow: hidden;
  color: #BFA06E;
  font-size: 110%;
  background: #8E7752;
  z-index: 2;
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em;
}


p.t1{
  font-size: 110%;
  width: 50%;
  padding-left: 20px;
  margin-top: 5px;
}

</style>

<div id="effect1">
<div id="effect2">
<div id="effect3">

<img src="http://i.picpar.com/c9Gb.png" width="30%" height="92%" style="position: absolute;">

<span class="b1"> </span>

<span class="navigation" style="border-top-left-radius: 2em;" id="navi1"><a href="#effect1">About</a></span>
<span class="navigation" style="left: 38%;" id="navi2"><a href="#effect2">OOC</a></span>
<span class="navigation" style="left: 45%;" id="navi3">

<a href="#effect3">Pics</a>
</span>

<span id="l1" class="items">
<p class="t1">
<br>
Name: Mocha<br>
<br>
Gender: Female<br>
<br>
Age: 25<br>
<br>
Weight: You're not supposed to ask!<br>
<br>
Orientation: Pansexual<br>
<br>
Relationship: Taken<br>
<br>
</p>
</span>

<span id="l2" class="items">
<p class="t1">

</p>
</span>

<span id="l3" class="items">
<p class="t1">

</p>
</span>

<span id="l4" class="items" style="overflow-y: scroll;">
<img src="http://i.imgur.com/J8WeeQc.jpg" height="400" width="600"><br>
<img src="http://i.imgur.com/YZ2ZDe8.jpg" height="400" width="300"><br>
<img src="http://i.imgur.com/5pxO3Zb.png" height="400" width="300"><br>
<img src="http://i.imgur.com/IqgikGu.jpg" height="400" width="600"><br>
</span>

</div></div></div>