yamcha

css
  @import url("https://fonts.googleapis.com/css?family=Voltaire|Abel");
::-webkit-scrollbar {
  width: 0.3vw;
  height: 0.3vw;
}
::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: transparent;
}
body{background: #000;
background-image: url('https://i.imgur.com/1v0fePp.png');
background-size: cover;}
.doors {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }

.doors .key {
  position: absolute;
  top: 0%;
  width: 100%;
  color: yellow;
  z-index: 10;
  text-align: center;
  font-size: 48px;
  font-family: "Trebuchet MS";
  text-transform: uppercase;
  text-shadow: 5px 0 2px #000;
  transition: transform 2s ease-in-out;
}

.doors:hover .key {
  transform: scale(0);
}

.doors .left {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  box-shadow: 3px 0 4px #111;
  background-image: url("https://i.ytimg.com/vi/cQNACPPGUA8/maxresdefault.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  transition: width 2s ease-in-out;
}
.doors .right {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  box-shadow: 3px 0 4px #111;
  background-image: url("https://i.ytimg.com/vi/cQNACPPGUA8/maxresdefault.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  transition: width 2s ease-in-out;
}

.doors:hover .left, .doors:hover .right {
  width: 5%;
}

.inner {
  width: 100%;
  height: 100%;
}

.image {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.image:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}







#content {
  position: fixed;
  width: 100%;
  height: 70%;
  background: transparent;
  top: 15%;
  left: 0%;
  transition-duration: 1s;
}



@keyframes whoosh {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes whoosh {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


#pluto {
  position: fixed;
  height: 96%;
  width: 25%;
  background: transparent;
  left: 36.7%;
  transition-duration: 1s;
}

#content:hover #garnet {
  opacity: 1;
  left: 6%;
  transition-duration: 1.5s;
}

#content:hover #guarding {
  opacity: 1;
  right: 6%;
  transition-duration: 1.5s;
}

#garnet {
  position: absolute;
  overflow: auto;
  height: 92.5%;
  width: 25%;
  background: #161616;
  border-radius: 10px;
  border: 3px solid;
  border-color: #940017;
  left: 35%;
  padding: 15px;
  opacity: 0;
  transition-duration: 1s;
  font-family: "Forum";
  font-size: 2.3vh;
  color: #eee;

}

#guarding {
  position: absolute;
  overflow: auto;
  height: 92.5%;
  width: 25%;
  background: #161616;
  border-radius: 10px;
  border: 3px solid;
  border-color: #940017;
  right: 35%;
  padding: 15px;
  opacity: 0;
  transition-duration: 1s;
  font-family: "Forum";
  font-size: 2.3vh;
  color: #eee;
}

#gate,
#time {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

}

#leftbox,
#right {
  width: 100%;
  height: 100%;
  overflow: auto;

}
}

#leftbox:target,
#rightbox:target {
  animation: appear 1.5s 1;
  -webkit-animation: appear 1.5s 1;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

h1 {
font-family: century;
font-weight: normal;
line-height: 8px;
text-transform: uppercase;
text-align: center;
}

a {
  font-family: 'Voltaire', sans-serif;
  color: #940017;
  text-decoration: none;
}

a:hover {
  color: #eee;
}

.hue {
  float: right;
}

html
<div class="doors">
 <div class="key"><img src="https://i.imgur.com/hpEygnX.png" height="500px" class="image"></div>
 <div class="left"></div>
 <div class="inner">
<div id="sheet"></div>
<div id="content">
 <div id="pluto">

 </div>

 <div id="garnet">
 <div id="gate">
 <div id="leftbox">
<center><h1>Stats</h1></center>
 <a>Name</a> <div class="hue"><font size="-2px">Yamcha</font></div><br>
 <a>Age</a> <div class="hue"><font size="-2px">46</font></div><br>
 <a>Height + Weight</a> <div class="hue"><font size="-2px">6'0"/183cm// 150lbs/68kg</font></div><br>
 <a>Birthday</a> <div class="hue"><font size="-2px">March 20th</font></div><br>
 <a>Species</a> <div class="hue"><font size="-2px">Human </font></div><br>
 <a>Gender</a> <div class="hue"><font size="-2px"> Male</font></div><br>
 <a>Hair</a> <div class="hue"><font size="-2px">Long Black, Shaggy and wavy</font></div><br>
 <a>Eyes</a> <div class="hue"><font size="-2px">Black</font></div><br>
 <a>Occupation</a> <div class="hue"><font size="-2px">Frelance Bodyguard</font></div><br>
 <a>Sexual Orientation</a> <div class="hue"><font size="-2px">Heterosexual</font>l</div><br>
 <a>Status</a> <div class="hue"><font size="-2px">Singular</font></div><br>

<Center><h1>Personality</h1></center>
<font size="-2px"><p>In his younger days Yamcha was a desert bandit. Often striving to be the best and feared nothing... Aside from women. He's determined and strong, compared the average human. However, despite this factor, he knows he is greatly outmatched by his comrades. And will willingly step back and remain on the sidelines if he feels he is out of his own league.</p>

<p>He can be a smidge bit of a pervert, but this isn't his only trait. Neither is the fact he is seen as one of the weaker of the Z-fighters. In fact, in time he would develop his status as a martial artist and become a professional baseball player. Proving has pique physical status compared to other humans minus those of the Z warriors.</p>

<p>However after the Saiyans arrived he found himself outclassed... Often turning to the clown of the group, even when fighting. His passion for the fight was extinguished due to the ever-growing gap between him and the aliens of the group. Even Krillian and Tien.</p>

<p>But unlike Tien, he finds himself being left in the dust. ANd knows how easily he could be overpowered and killed again.
Yamcha accepts that his contribution would be futile, and instead opts to stand aside and keep watch, instead of engaging in combat. But he will take up arms if he absolutely must.</p>

<p>In recent years though he continues to train. Often going off on his own, to become stronger. He still has a small lingering passion for fighting, and honestly had hoped he would be asked to join the Tournament of Power. But he also understood when he was not asked, and instead, Frieza was brought onto the scene. He was disappointed but capable of knowing the stakes were truly large, and he would possibly hinder the progression. </p>
</font>






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


 <div id="guarding">
 <div id="time">
 <div id="rightbox">
 <center><h1>Abilities + Tools</h1></center>
<font size="-2px"> Ki manipulation – This includes flight, blasts and sensing.<br>
Kamehameha//Super Kamehameha<Br>
Wolf Fang Fist – Yamcha's trademark attack. It is a very fast series of powerful punches, swipes, and kicks. Before the attack, a wolf's howl can be heard, along with an aura around Yamcha. <Br>
Blinding Wolf Fang Fist – A one-hit variant of the Wolf Fang Fist.<Br>
Wolf Klaw - A single technique where Yamcha leaps forward, and slashes the air with invisible claws.<Br>
Tiger Jackhammer Fist – Yamcha punches his opponent repeatedly before finishing with a kick.<Br>
Neo Wolf Fang Fist – An upgraded version of the Wolf Fang Fist. Also called Wolf Fang Blowing Wind, or Wolf Fang Whirlwind Claw.<Br>
Wolf Hurricane – A weaker version of the Wolf Fang Fist<Br>
Wolf Slice Fist – Yamcha kicks the opponent up in the air, and then he kicks and punches them down again. <Br>
Spirit Ball – One of Yamcha's signature moves. He produces a concentrated ball of energy from his palm, and is able to precisely control its directional pattern using two fingers to guide it.<Br>
Super Spirit Ball – A much more powerful version of the Spirit Ball, and is even bigger than Yamcha himself.<Br>
Wolf Fang Blast – Yamcha uppercuts his opponent up in the air, then he flies up and knock them down to the ground again. Yamcha then fires a barrage of ki blasts on the opponent, only to finish the attack with a large ball of ki.<Br>
Energy Wave Combo<Br>
Afterimage Technique<Br>
Phantom Fist <Br>
Ki Blast Thrust - A ki-enhanced punch attack.<Br>
</font>
<center><h1>Rules/OOC</h1></center>
<font size="-2px">✧ You wanna make a joke?Ok. But jokes get old very quick. Keep this in mind.<br>
✦ NOT PM friendly. Unless you are respectful<br>
✧ IC=/= OOC. <br>
✦ Semi to Novella. I mirror.<br>
✧ This character is from the Dragon Ball series.<br>
✦ Story > Sex <br>
✧ I'll play Yamcha to the best of my ability. But not the 'meme' you expect.<br>
✦ None of the art is mine. And I shall remove them upon request.<br>
✧ Code belongs to me! Do not snatch. Jut ask<Br>
✦ Sorry private rps will be rare. You can try though.<br>
✧ Skype and discord are no options for communication.<br>
✦ If you read this far send me a PM with the tagline #catlikesfoodNONONO. It'll actually increase your chances of a positive reaction and possible private roleplay. <br>
</font>
 </div>

 </div>
 </div>
</div>
<img src="https://i.imgur.com/AEdBjEh.png" Width="160px" style="float:left; margin-left: 700px; margin-top: 250px">


 <div class="right"></div>
</div>