yoi codes

<style>@import url('https://fonts.googleapis.com/css?family=Questrial');@import url('https://fonts.googleapis.com/css?family=Questrial');
 body {
background: #575E8E;
 overflow-y:hidden;
overflow-x:hidden;}

/*coded by [punpun]. do not steal the character. do not remove the credit. do not remove this.*/

::-webkit-scrollbar-thumb {
 width: 3px;
 background-color: #9E988B;}
::-webkit-scrollbar {
 width: 3px;
 background-color: transparent;}

h1{
 font-family: Questrial;
 font-size: 22px;
 text-align: center;
 color: #888888;
 padding-right: 5px;
 margin-bottom: 5px;
 margin-top: 1px;
 line-height: 31px;
 border-bottom: 3px double #000000;
}


#main {
 position: fixed; margin: auto; right: 0px; left:400px; top: 0; bottom: 0; width: 300px; height: 490px; background: #trans; border: 2px solid #9E988B; border-radius: 17px 0px 17px 0px; box-shadow: #9E988B 0px 0px 5px 0px; overflow: hidden; text-align: left;}

 #pic {position: absolute;right: -95px;top: -7; z-index:0; opacity: 1;}
 #pic img {width: ; height: 570;}

 #pic2 {position: absolute;right: -70px;top: -7; z-index:0; opacity: 1;}
 #pic2 img {width: ; height: 230;}

 #pic3 {position: absolute;right: -50;top: 0; z-index:0; opacity: 1;}
 #pic3 img {width: ; height: 220;}

 #pic4 {position: absolute;right: -80;top: 0; z-index:0; opacity: 1;}
 #pic4 img {width: ; height: 280;}

#botline {
 width: 0px;height: 5px;
 background: #000000;
 position: absolute;
 bottom: 100;left: 160;z-index:30;
 display:block;
-webkit-transition: all 1.2s ease-out;
-moz-transition: all 1.2s ease-out;
-ms-transition: all 1.2s ease-out;
-o-transition: all 1.2s ease-out;
 transition: all 1.2s ease-out;}
body:hover #botline{ position: absolute;
 width: 220px; left: 40; opactiy:1;
}
#main2 {
 position: fixed; margin: auto;
 right: 0px; left:400px; top: 0; bottom: 0;
 width: 300px; height: 490px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 border-radius: 17px 0px 17px 0px;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:1;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

#submain {
 position: fixed; margin: auto;
 right: 0px; left:400px; top: 0; bottom: 0;
 width: 300px; height: 490px;
 background: #888888;
 border: 2px solid #9E988B; z-index:20;
 border-radius: 17px 0px 17px 0px;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0.35;
-webkit-transition: all 1.6s ease-out;
-moz-transition: all 1.6s ease-out;
-ms-transition: all 1.6s ease-out;
-o-transition: all 1.6s ease-out;
 transition: all 1.6s ease-out;}
body:hover #submain{
opacity: 0.60;
filter:alpha(opacity=100);
}

 .head {
 position: absolute;
 left: 45;
 bottom: 130;
 color: #E6CACA;
 font-family: Playfair Display SC;
 font-size: 40px; opacity: 0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}
body:hover .head{opacity: 1; bottom: 100;
-webkit-transition-delay: 1.6s ;
-moz-transition-delay: 1.6s ;
-ms-transition-delay: 1.6s ;
-o-transition-delay: 1.6s ;
 transition-delay: 1.6s ;
}

.head2 {
 position: absolute;
 left: 67;
 bottom: 90;
 color: #E6CACA;
 font-family: Questrial;opacity: 0;
 font-size: 20px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}
body:hover .head2{
 bottom: 77;;opacity: 1;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;
}


.head3 {
 position: absolute; margin: auto;
 left:18; top: 100;
 color: #000000;
 font-family: Questrial;opacity: 1;
 font-size: 20px;z-index:100;
font-shadow: #cccc 1px 1px 1px 1px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}


.head4 {
 position: absolute; margin: auto;
 left:13; top: 100;
 color: #000000;
 font-family: Questrial;opacity: 1;
 font-size: 20px;z-index:100;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}

#line {opacity:1;/*change later pls*/
 width: 0%;height: 22px;
 background: #B8B0A1; border-radius: 4px;
 position: fixed; margin: auto;
 right: 0px; left:90px; top: 5; bottom: 0;
 display:block;
-webkit-transition: all 2.6s ease-out;
-moz-transition: all 2.6s ease-out;
-ms-transition: all 2.6s ease-out;
-o-transition: all 2.6s ease-out;
 transition: all 2.6s ease-out;}
body:hover #line{ position: fixed;
width: 815px; left:220;
}

#icon {
 position: fixed; margin: auto;
 right: 40px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon {opacity:1}
body:hover #icon {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:0.65}
#subicon {
 position: absolute; margin: auto;
 right: 0px; left:00px; top: 0; bottom:0;
 width: 100px; height: 220px;
 background: #888888;
 border: 2px solid #9E988B; z-index:99;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0.55;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
#subicon:hover{opacity:0}

#icon2 {
 position: fixed; margin: auto;
 right: 260px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon2 {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:1}

#icon3 {
 position: fixed; margin: auto;
 right: 480px; left:00px; top: 0; bottom: 260;
 width: 100px; height: 220px;
 background: #trans;
 border: 2px solid #9E988B; z-index:20;
 box-shadow: #9E988B 0px 0px 5px 0px;
 overflow: hidden;
 text-align: left;opacity:0;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}body:hover #icon3 {-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;opacity:1}

.darts {
 position: fixed; margin: auto;
 right: 260px; left:0px; top: 365; bottom: -200;
 height: 220;
 width: 325px;
 opacity: 0; z-index: 5;
 text-align: left;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

.darts:target {
 position: absolute; bottom: 0;top: 265;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
 opacity: 1;
}

.box {
 position: absolute;
 right: 0px;
 bottom: 5px;
 height: 200;
 width: 311px;
 background-color: #E8DECC;
 border: 2px solid #9E988B; z-index:21;
 box-shadow: #9E988B 0px 0px 5px 0px;
 z-index: 5;
 color: #9E988B;
	font-family: Questrial;
	font-style: normal;
	font-variant: ;
	font-weight: 400;
 text-align: justify;
 overflow-x: hidden;
 overflow-y: auto;
 font-size: 15px;
 padding: 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
opacity: 0;
filter:alpha(opacity=75);
}
body:hover .box {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}


#boxb {
 position: fixed; margin: auto;
 right: 260px; left:0px; top: 260; bottom: 00;
 height: 200;
 width: 311px;
 background-color: #E8DECC;
 border: 2px solid #9E988B; z-index:21;
 box-shadow: #9E988B 0px 0px 5px 0px;
 z-index: 1;
 color: #9E988B;
	font-family: Questrial;
	font-style: normal;
	font-variant: ;
	font-weight: 400;
 text-align: justify;
 overflow-x: hidden;
 overflow-y: auto;
 font-size: 15px;
 padding: 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
opacity: 0;
filter:alpha(opacity=75);
}
body:hover #boxb {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}
#maindick {
 position: fixed; margin: auto; right: 0px; left:1000px; top: 0; bottom: 10; width: 300px; height: 490px; background: #trans; border: 0px solid #9E988B; border-radius: 17px 0px 17px 0px; box-shadow: #9E988B 0px 0px 0px 0px; overflow: hidden; text-align: left; opacity: 0;}
body:hover #maindick {
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}

 .dick {position: absolute; overflow: hidden;
 right: 0px; left:00px; top: 0; bottom: 0; z-index:0; opacity: 1; display: inline-block;}
 .dick img {width: ; height: 250;}

#cocks {
position: fixed; margin: auto; right: 0px; left:840px; top: 170; bottom: 0;opacity: 0;
width: 110px;
height: 120px;
overflow-y: auto;
text-align: center;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
body:hover #cocks{
 opacity: 1;
 transition: all 1.2s ease-out;
 -o-transition: all 1.2s ease-out;
 -webkit-transition: all 1.2s ease-out;
 -moz-transition: all 1.2s ease-out;
-webkit-transition-delay: 2.4s ;
-moz-transition-delay: 2.4s;
-ms-transition-delay: 2.4s ;
-o-transition-delay: 2.4s ;
 transition-delay: 2.4s ;}

#cons{
background-color: #000000;opacity: 1;
width: 100px; height: 15px;
border-radius: 0px 8px 0px 8px;
font-family: Questrial; margin-bottom:4;
font-size: 14px;
color: #9E988B;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}

#cons:hover{
background-color: #888888;color: #000000;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}



</style><div id="maindick"><div class="dick"><img src="http://i.picpar.com/eQqc.jpg"></div></div>
<div id="line"></div>
<a href="#00"><div id="main">
<div id="pic"><img src="http://i.picpar.com/dQqc.jpg"></div>
</div>
<div id="main2"><div class="head">Yoite</div><div class="head2">Broken Angel</div>
<div id="submain"><div id="botline"></div></div></div>
</a>

<div id="top"></div><div id="bottom"></div>

<a href="#03"><div id="icon"><div id="subicon"></div><div class="head4"><b>POWER</b></div><div id="pic3"><b><img src="http://i.picpar.com/fQqc.jpg"></b></div></div></a><b>
<a href="#02"><div id="icon2"><div id="subicon"></div><div class="head3">STORY</div><div id="pic4"><img src="http://i.picpar.com/gQqc.jpg"></div></div></a>
<a href="#01"></a></b><a href="#01"><div id="icon3"><b><div id="subicon"></div></b><div class="head3"><b>STATS</b></div><div id="pic2"><img src="http://i.picpar.com/hQqc.jpg"></div></div></a>


<div id="01" class="darts"><div class="box"><h1>DOSSIER</h1>
Name - <font style="float: right;">Yoite</font><br>
Moniker (s) - <font style="float: right;">None yet</font><br>
Sex - <font style="float: right;">Male*</font><br>
Age - <font style="float: right;">17</font><br>
Orientation - <font style="float: right;">Bisexual</font><br>
Occupation - <font style="float: right;">None</font><br>
Height - <font style="float: right;">5'11 - 180 cm</font><br>
Weight - <font style="float: right;"> 117 lbs - 53 kg</font><br>
Build - <font style="float: right;">Slender, lithe</font><br>
Marital Status - <font style="float: right;">None</font><br><br>

</div></div>

<div id="02" class="darts"><div class="box">Yoite's mother had intended for him to be named Sora (そら) if he had been a girl. While he seems to have gone by that name for a while, he never considered himself to actually be Sora, since he's not a girl. <br> <br>
He was born intersex, and although he is referred to as male in anime and manga, he lived his life unsure of his gender and who he really was. His mother died in childbirth, and his remaining family considered him an 'angel of death' for that reason. He was confined to the basement and his half-brother Tsukasa Kōdō (香道司, Tsukasa Kōdō) was forbidden to approach him. <br> <br>

When Yoite turned fourteen, his family decided to kill him, slashing his throat and unsuccessfully attempting to force Tsukasa to do the same. After this desperate attempt on his life, being erased from existence became his goal. He ran from the house and was saved by Hattori, who accepted him into the Grey Wolves. Yoite spends a year studying the Kira technique and all required ninja skills. Hattori promises this would bring him closer to his goal of being erased. His desire to disappear comes from his trauma and his fear of death. By disappearing he wouldn't have experienced so much pain nor death. Yoite is then placed under Yukimi's care and is given the name "Yoite". <br>

</div>
</div>

<div id="03" class="darts"><div class="box">Yoite uses the Iga's kinjutsushō Kira. Kira can control the ki of the target it pierces by halting the flow of ki in the target's body, causing severe injury such as broken bones, or organ failure, leading to the target's ultimate demise. Conversely, it is capable of activating ki as well, as seen with his revival of Gau from his comatose state. The cost of using this technique is the loss of the user's ki or life force, gradually losing their five senses, and dying. With this, it is seen that Yoite's sense of taste and hearing decaying rapidly, and is the cause of his sickly health and scorched skin. When Yoite is extremely exhausted, he may even lose his vision, as shown in the anime when he fled from the hospital, and failed to see Miharu properly when he came to Yoite's rescue. This is also shown in the manga, when Yoite goes to rescue Miharu after he is abducted by two of Hattori's subordinates, whom is later assisted by Shijima and Kouichi. <br>
</div>
</div>

<div id="boxb">
<h1>OUT OF CHARACTER</h1>
[01] PM Friendly<br>
[02] Yoite is from Nabari No Ou.<br>
[03] I will play him as faithfully as possible.<br>
[04] I will not change his gender for your comfort.<br>
[05] Yoite is a cold character at first<br>
[06] If you have any questions, ask.<br>
[07] Have a profile.<br>
[08] No drama.
</div>

<div id="cocks">
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>
<a href="" target="_blank"><div id="cons">name</div></a>

</div>


<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>