Michiru's profile (punpun's code)

<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Playfair Display SC);
@import url(https://fonts.googleapis.com/css?family=Questrial);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@import url(https://fonts.googleapis.com/css?family=Oxygen);

/*coded by [punpun]. do not steal the concept. do not remove the credit. do not remove this.*/
::-webkit-scrollbar-thumb {background-color: #8B9BA8; width: 1px; }
::-webkit-scrollbar {background-color: transparent; width: 1px;}

 body {background: linear-gradient(to bottom, #eee 0%,#cccccc 250%); cursor:url(http://media.tumblr.com/tumblr_lqcmexUvFW1qfc7qm.png), auto !important; }

a {
 color: #aeaeae;
 text-decoration: none;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;}
a:hover {
 color: #ffffff;background-color: #000; cursor:url(http://media.tumblr.com/d867d8c0827140bcce868f3bdbbd5e4f/tumblr_inline_mwwd9dv65Z1srowmh.png), auto !important;
 text-decoration: none;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;}

.tatami1
{ position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
height: 145px;
width: 145px;
border: 7px solid #eee;
z-index:10;
background-image: url('');
background-repeat: no-repeat;
background-size: 270px; /*width, height*/
background-position: -80px 0px;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity:0.75;
transition:all 0.3s ease-out;
}
.text1
{ position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
height: 105px;
width: 105px;
border: 0px solid #eee;
z-index:9;
font-size:19px;
background:#f3f3f3;
line-height:5;
border-right: 2px solid #eee;
border-left: 2px solid #eee;
padding:30px;
color: #aeaeae;
letter-spacing: 0.3px;
text-align: justify;
font-family: roboto;
overflow-y:auto;
overflow-x:hidden;
opacity:0.2;
-webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}
.tatami1:hover {opacity:0;}




.tatami2
{ position: fixed; margin: auto; right: 157px; left:0; top: 0; bottom: 315;
height: 145px;
width: 303px;
border: 7px solid #eee;
z-index:10;
background-image: url('https://i.imgur.com/kUh1RZb.jpg');
background-repeat: no-repeat;
background-size: 400px; /*width, height*/
background-position: -15px -30px;
-webkit-filter: grayscale(10%);
filter: grayscale(10%);
opacity:0.75;
transition:all 0.3s ease-out;
}



.tatami3
{ position: fixed; margin: auto; right: 0; left:157px; top: 315; bottom: 0;
height: 145px;
width: 303px;
border: 7px solid #eee;
z-index:10;
background-image: url('https://i.imgur.com/fPcke0H.png');
background-repeat: no-repeat;
background-size: 400px; /*width, height*/
background-position: -15px -50px;
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
opacity:0.75;
transition:all 0.3s ease-out;}

.tatami4
{ position: fixed; margin: auto; right: 315px; left:0; top: 160; bottom: 0;
height: 301px;
width: 145px;
border: 7px solid #eee;
z-index:10;
background-image: url('https://i.imgur.com/3hBd9ny.png');
background-repeat: no-repeat;
background-size: 500px; /*width, height*/
background-position: -45px -20px;
 -webkit-filter: hue-rotate(30deg);
 filter: hue-rotate(30deg);
opacity:0.75;
transition:all 0.3s ease-out;
}

.tatami5
{ position: fixed; margin: auto; right: 0px; left:315; top: 0; bottom: 159;
height: 301px;
width: 145px;
border: 7px solid #eee;
z-index:10;
background-image: url('https://i.imgur.com/t2FFQwk.png');
background-repeat: no-repeat;
background-size: 550px; /*width, height*/
background-position: -265px 0px;
opacity:0.75;
transition:all 0.3s ease-out;
}



.was {
position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height: 100%;
background-color:#f3f3f3;
 opacity: 0; border: 20.99px solid #;
 z-index: 5;
 text-align: justify;
 transition: all 0.3s linear;
}

.was:target {
 z-index: 30;
 opacity: 1;
 transition: all 0.3s linear;
}


.container {position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height:100%;
background-color:#;
 opacity: 0; border: 1px solid #;
 z-index: 11;
 text-align: justify;
-webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;}

.tat1
{ position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
height: 145px;
width: 145px;
border: 7px solid #eee;
z-index:30;
background-image: url('https://i.imgur.com/Bw9oozY.png');
background-repeat: no-repeat;
background-size: 270px; /*width, height*/
background-position: -80px 0px;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity:0.75;
transition:all 1.5s ease-out;
}


.tattxt
{
height: 125px;
width: 215px;
border: px solid #eee;
z-index:30;
font-size:11px;
background:#;
padding:px;
color: #8B9BA8;
letter-spacing: 0.3px;
text-align: justify;
font-family: Questrial;
overflow-y:auto;
overflow-x:hidden;
opacity:0;
-webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}
.was:hover .tattxt{opacity:1;}


.tattxta
{
height: 145px;
width: 105px;
border: px solid #000;
z-index:30;
font-size:11px;
background:#;
padding:10px;
color: #8B9BA8;
letter-spacing: 0.3px;
text-align: justify;
font-family: Questrial;
overflow-y:auto;
overflow-x:hidden;
opacity:0;
-webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}
.was:hover .tattxta{opacity:1;}

.sts2 {
 font-family: Questrial;
 font-size: 10px;width:97px; height: 8px;
 text-align: left;
 font-weight:100;
 color: #8B9BA8;
 background-color: #;
 padding: 3px;
 margin-bottom: px;
 margin-top: px;
 line-height: 10px;
 border-bottom: 1px solid #8B9BA8; border-right: 2px solid #8B9BA8;
}
.sts2:hover{ background-color: #000;-webkit-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;}

</style>

<a href="#1"><div class="tatami1"></div></a>
<a href="#3"><div class="tatami2"></div></a>
<a href="#4"><div class="tatami3"></div></a>
<a href="#2"><div class="tatami4"></div></a>
<a href="#5"><div class="tatami5"></div></a>

<div class="text1"><center><i>ENTER</i></center></div>


<div id="1" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tat1" ></div></a>
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:400; top: 0; bottom: 0;"><b>[ OOC ]</b> Basic rules apply; IC ≠ OOC, real life over roleplay, no means no. I am not a mind reader, so please be upfront if there is something you want or expect. <br><br>

<b>Smut</b> allowed <i>if</i> OOC conditions are met (i.e., I am interested and can trust you won’t make things weird.) <br>

<b>Combat</b> for story only. </div>

<div class="tattxta" style="position: absolute; margin: auto; right: 300px; left:0; top: 20; bottom: 0;">

CONTACT INFO:
<div class="sts2">SMUT: ✓* </div>
<div class="sts2">PM-FRIENDLY: ✓</div>
<div class="sts2">DISCORD: ✓ </div>
<div class="sts2">TIMEZONE: EST</div><br>
ALTS:
<a target="_blank" href="https://roleplay.chat/profile.php?user=Charade" title=""><div class="sts2">CHARADE</div></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=ALIEN+QUEEN" title=""><div class="sts2">ALIEN QUEEN</div></a>
<br>
 <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#4">▼</a> / <a href="#5">►</a>
</div></div>

<div id="2" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami4"></div></a>
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:100; top: 0; bottom: 0;"><b>[ PERSONALITY ]</b>
At first, Michiru appears quiet and softspoken. Refined. To others she may appear privileged and spoiled, and... They aren’t <i>wrong,</i> per se. She is used to a certain level of comfort most never experience. ‘Generic’ is a dirty word. It is rare to see her pull out her own chairs, or physically open doors for herself; usually, someone does it for her.
<br><i>(cont.)</i>

<p>To an even smaller, select group, she is catty and vindictive. </div>

<div class="tattxta" style="position: absolute; margin: auto; right: 12px; left:0; top: 300; bottom: 0;">

FRIENDS:
<a target="_blank" href="https://roleplay.chat/profile.php?user=Yuna+Usui" title=""><div class="sts2">YUNA USUI</div></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Best+Jeanist" title=""><div class="sts2">BEST JEANIST</div></a>
<div class="sts2"><a target="_blank" href="LINK" title="">n/a</a></div>
<br>
OTHER:
<a target="_blank" href="https://roleplay.chat/profile.php?user=Endeavor" title=""><div class="sts2">ENDEAVOR</div></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=Hawk" title=""><div class="sts2">HAWKS</div></a>
 <a href="#1">◥</a> / <a href="#3">▲</a> / <a href="#4">►</a> / <a href="#5">◥</a>
</div></div>


<div id="3" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami2"></div></a>

<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 20;"><b>[ HISTORY ]</b>
Michiru’s mother married up, ensuring a lavish and comfortable childhood for her daughter. However, she couldn’t quite escape her roots; her brother in particular was a constant source of embarrassment. Still, family was family, so while he was away in jail Michiru’s cousins were sometimes invited over— and Michiru found them both frustrating and fascinating. <i>(cont.)</i>

<p>Despite their ‘white trash’ ways and general insanity, Asami and her sisters were a regular presence in Michiru’s life. In fact, it was partly their influence that days before her wedding (an arranged marriage at her father’s behest), she turned her fiancé into a pig. Months of harassment, lectures, and even threats followed before they finally backed off. By the time the dust had settled, she had already her things packed, funds allocated, and a room booked at another hotel.

<p>At present she lives with Asami. Though she still harbors some distaste for the rest of their family, she has yet to discard their name, wealth or connections, and likely never will. </div>

<div class="tattxta" style="position: absolute; margin: auto; right: 350px; left:0; top: 0; bottom: 0;">

NAME:
<div class="sts2">MICHIRU KAIOH</div>
<div class="sts2">AGE —25</div>
<div class="sts2">HEIGHT —5'6</div>
<div class="sts2">NEUTRAL EVIL</div><br>
FAMILY:
<a target="_blank" href="https://roleplay.chat/profile.php?user=Pestilence" title="a pest."><div class="sts2">ASAMI ISHIDA</div></a>
<br>
 <a href="#1">◢ </a> / <a href="#2">◣</a> / <a href="#4">▼</a> / <a href="#5">►</a>
</div></div>


<div id="4" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami3"></div></a>

<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;"><b>[ QUIRK: WITCH’S BLOOD ]</b>

<p>User takes on a desiccated, corpse-like appearance and gains telekinetic abilities, which they can use to bolster their strength, speed, screams, and even give them the ability to fly (albeit for a short amount of time). Transformations can be deliberate or emotionally triggered. <i>(cont.)</i>

<p> <i>Passive.</i> While transformed, the user's blood has a catalyzing quality when used in conjunction with other substances.

<p><i>Drawbacks/Limits.</i> Telekinetic abilities are accessible only while user is transformed. Using said telekinesis takes up energy, and some activities (screaming, flight) vastly expend more energy than others (enhancing speed or strength) — cutting her reserves to little more than a few hours (2 - 3) or less. Pushing an ability or stat to the max, or in combination, will also quickly expend energy, cutting down the transformation to an hour or less, even minutes. User is unable to lift extremely fast or heavy objects without considerable strain or training.

<p>Power: <b>+2</b> <i>(if speed is also enhanced)</i>
<br>Speed: <b>+1</b> <i>(if physical strength is also enhanced)</i> </div>


<div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:350; top: 20; bottom: 0;">

STATS:
<div class="sts2">POWER —2*/5 </div>
<div class="sts2">SPEED —2*/5 </div>
<div class="sts2">TECHNIQUE —4/5</div>
<div class="sts2">INTELLECT —4/5</div>
<div class="sts2">TEAMWORK —4/5</div><br>
 <a href="#1">◤</a> / <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#5">◥</a>
</div></div>


<div id="5" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami5"></div></a>

<div class="tattxt" style="position: absolute; margin: auto; right: 80px; left:0; top: 0; bottom: 280;"><b>[ OCCUPATION: PR AGENT ]</b>

<br><br><br><center><i>for: <a target="_blank" href="https://roleplay.chat/profile.php?user=Endeavor" title="">Endeavor</a></i></center>

<br>Duties include: serving as a liaison to the press; supervision of all official social media accounts; occasionally acting as Endeavor’s spokesperson and providing legal counsel. (She has a degree in law.) </div>

<div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:30; top: 20; bottom: 0;">
PLOTS:
<div class="sts2">“HOT WINGS”</div>
<div class="sts2">n/a </div>
<div class="sts2">n/a </div>
<div class="sts2">n/a </div>
<div class="sts2">n/a </div><br>
 <a href="#2">◣</a> / <a href="#1">◄</a> / <a href="#3">◤</a> / <a href="#4">▼</a>
</div></div>


<a href="profile.php?user=Punpun" title="Coded by Punpun." target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; left:10; bottom:0;width:25;-webkit-transform: scaleX(-1); filter: FlipH;"></a>