---- JavaScript ----

WebFontConfig = {

    google: { families: [ 'Crimson+Text::latin', 'Vollkorn+SC::latin', 'IM+Fell+English::latin', 'Playball::latin' ] }

  };

  (function() {

    var wf = document.createElement('script');

    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +

      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

    wf.type = 'text/javascript';

    wf.async = 'true';

    var s = document.getElementsByTagName('script')[0];

    s.parentNode.insertBefore(wf, s);

  })();


$(document).ready(function(){
    $("#tab1").click(function(){
        $("#content2").delay(100).fadeOut(500);
        $("#content3").delay(100).fadeOut(500);
        $("#content4").delay(100).fadeOut(500);
        $("#content5").delay(100).fadeOut(500);
        $("#content1").delay(100).fadeIn(500);

        $("#cap2").delay(100).fadeOut(500);
        $("#cap3").delay(100).fadeOut(500);
        $("#cap4").delay(100).fadeOut(500);
        $("#cap5").delay(100).fadeOut(500);
        $("#cap1").delay(100).fadeIn(500);
    });
});

$(document).ready(function(){
    $("#tab2").click(function(){
        $("#content1").delay(100).fadeOut(500);
        $("#content3").delay(100).fadeOut(500);
        $("#content4").delay(100).fadeOut(500);
        $("#content5").delay(100).fadeOut(500);
        $("#content2").delay(100).fadeIn(500);

        $("#cap1").delay(100).fadeOut(500);
        $("#cap3").delay(100).fadeOut(500);
        $("#cap4").delay(100).fadeOut(500);
        $("#cap5").delay(100).fadeOut(500);
        $("#cap2").delay(100).fadeIn(500);
    });
});

$(document).ready(function(){
    $("#tab3").click(function(){
        $("#content1").delay(100).fadeOut(500);
        $("#content2").delay(100).fadeOut(500);
        $("#content4").delay(100).fadeOut(500);
        $("#content5").delay(100).fadeOut(500);
        $("#content3").delay(100).fadeIn(500);

        $("#cap1").delay(100).fadeOut(500);
        $("#cap2").delay(100).fadeOut(500);
        $("#cap4").delay(100).fadeOut(500);
        $("#cap5").delay(100).fadeOut(500);
        $("#cap3").delay(100).fadeIn(500);
    });
});

$(document).ready(function(){
    $("#tab4").click(function(){
        $("#content1").delay(100).fadeOut(500);
        $("#content2").delay(100).fadeOut(500);
        $("#content3").delay(100).fadeOut(500);
        $("#content5").delay(100).fadeOut(500);
        $("#content4").delay(100).fadeIn(500);

        $("#cap1").delay(100).fadeOut(500);
        $("#cap2").delay(100).fadeOut(500);
        $("#cap3").delay(100).fadeOut(500);
        $("#cap5").delay(100).fadeOut(500);
        $("#cap4").delay(100).fadeIn(500);
    });
});

$(document).ready(function(){
    $("#tab5").click(function(){
        $("#content1").delay(100).fadeOut(500);
        $("#content2").delay(100).fadeOut(500);
        $("#content3").delay(100).fadeOut(500);
        $("#content4").delay(100).fadeOut(500);
        $("#content5").delay(100).fadeIn(500);

        $("#cap1").delay(100).fadeOut(500);
        $("#cap2").delay(100).fadeOut(500);
        $("#cap3").delay(100).fadeOut(500);
        $("#cap4").delay(100).fadeOut(500);
        $("#cap5").delay(100).fadeIn(500);
    });
});

--- CSS ---

#profile-container{background: none; height: 100%}
body{background: #2a313a url("https://i.imgur.com/py6hvAV.png");}

#BoxIntro{
 width: 1000px;
 height: 600px;
 position: absolute;
 background: #191d1e url("https://i.imgur.com/fjoQ8wY.png");
 border: 1px solid #000;
 top: 50%;
 left: 50%;
 margin: -301px 0px 0px -501px;
}

.LeftSide{
 width: 500px;
 height: 600px;
 background: url("https://i.imgur.com/8kgGMG4.png");
 position: absolute;
 background-repeat: no-repeat;
 background-position: 120px 0px;
 transition: 0.5s;
 margin: 0px 0px 0px 0px;
 opacity: 1;
 transition: 0.7s 0.5s;
}

.RightSide{
 width: 500px;
 height: 600px;
 background: url("https://i.imgur.com/8kgGMG4.png");
 position: absolute;
 background-repeat: no-repeat;
 background-position: -380px 0px;
 transition: 0.5s;
 margin: 0px 0px 0px 500px;
 opacity: 1;
 transition: 0.7s 0.5s;
}

#BoxIntro:hover>.LeftSide{
 opacity: 0;
 margin: 0px 0px 0px -250px;
 transition: 0.5s;
}

#BoxIntro:hover>.RightSide{
 opacity: 0;
 margin: 0px 0px 0px 750px;
 transition: 0.5s;
}

#ProfileBox{
 width: 980px;
 height: 580px;
 background: #3a495e url("https://i.imgur.com/LOcaNTn.png");
 position: absolute;
 margin: 10px 0px 0px 10px;
 box-shadow: 0px 0px 0px 1px #000 inset;
 opacity: 0;
 transition: 0.7s 0.5s;
}

#BoxIntro:hover>#ProfileBox{
 opacity: 1;
}

.ImageBox{
 position: absolute;
 width: 300px;
 height: 560px;
 background: url("https://i.imgur.com/oNnYAGp.jpg");
 background-position: -20px 0px;
 box-shadow: 0px 0px 0px 1px #000 inset;
 margin: 10px 0px 0px 10px;
}

.ImageContent{
 width: 300px;
 height: 560px;
 background: #111;
 opacity: 0;
 transition: 0.5s;
}

.ImageContent:hover{
 opacity: 0.9;
 transition: 0.5s;
}

.IDPic{
 width: 215px;
 height: 235px;
 background: url("https://i.imgur.com/KvtaSQh.png");
 background-size: 230px;
 background-position: center right;
 box-shadow: 0px 0px 0px 1px #000 inset;
 position: absolute;
 top: 40px;
 left: 40px;
}

#StatBox{
 width: 215px;
 height: 230px;
 background: transparent;
 position: absolute;
 top: 305px;
 left: 40px;
}

.stats{
 width: 100%;
 height: 17px;
 padding-top: 3px;
 padding-bottom: 0px;
 float: left;
 background: #fff;
 box-shadow: 0px 0px 0px 1px #000 inset;
 text-align: Center;
 font-family: Calibri;
 font-size: 12px;
 color: #fff;
 transition: 0.3s;
}

.stats:hover{
 background: #000;
 transition: 0.3s;
}

#tabsBox{
 position: absolute;
 width: 300px;
 height: 205px;
 background: transparent;
 top: 370px;
 left: 670px;
}

.tabs{
 width: 280px;
 padding-right: 20px;
 height: 25px;
 padding-top: 10px;
 background: url("https://i.imgur.com/5DOJw4F.gif");
 background-size: 500px;
 float: left;
 margin-top: 5px;
 box-shadow: 0px 0px 0px 1px #000 inset;
 font-family: Calibri;
 font-size: 12px;
 text-align: Right;
 color: #fff;
 text-shadow: 1px 1px 0px #000;
}

.tabs:hover{
 background: url("https://i.imgur.com/d1nlTAw.gif");
}

#tab1{
 background-position: -200px 0px;
}

#tab2{
 background-position: -200px -40px;
}

#tab3{
 background-position: -200px -80px;
}

#tab4{
 background-position: -200px -120px;
}

#tab5{
 background-position: -200px -160px;
}

#TextBox{
 padding: 10px;
 width: 630px;
 height: 335px;
 background: #6b7b92;
 position: absolute;
 left: 320px;
 top: 10px;
 box-shadow: 0px 0px 0px 3px #2a313a inset;
}

.pages{
 width: 620px;
 height: 335px;
 margin-right: 10px;
 color: #000;
 font-family: Calibri;
 font-size: 12px;
 text-align: Justify;
 position: absolute;
}

#content2, #content3, #content4, #content5{
 display: none;
}


--- HTML ----

<div id="BoxIntro">
<div class="LeftSide">&nbsp;</div>
<div class="RightSide">&nbsp;</div>
<div id="ProfileBox">
<div class="ImageBox">
<div class="ImageContent">
<div class="IDPic">&nbsp;</div>
<div id="StatBox">
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Name.</div>
Joichi Tsukumo.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Age.</div>
Eighteen.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Birthday.</div>
July 22.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Height.</div>
Six feet; Eight inches.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Weight.</div>
189 lbs</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Year.</div>
Third-Year.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Orientation.</div>
Heterosexual.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">P.O.I.</div>
None.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Hobby.</div>
Basketball.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Location.</div>
Hokkaido High.</div>
<div class="stats">
<div style="float: left; color: #000; padding-left: 30px;">Theme.</div>
Pending.</div>
</div>
</div>
</div>
<div id="tabsBox">
<div class="tabs" id="tab1">OOC.</div>
<div class="tabs" id="tab2">HISTORY.</div>
<div class="tabs" id="tab3">PERSONALITY.</div>
<div class="tabs" id="tab4">PEOPLE.</div>
<div class="tabs" id="tab5">SKILLS.</div>
</div>
<div id="TextBox">
<div class="pages" id="content1">
<div style="float: left; width: 60px; font-family: Crimson Text; color: #fff; font-size: 10px; text-align: Right; padding-right: 10px; text-shadow: 1px 1px 0px #000;">IT ME.</div>
Guess who? Das right. It ya boy, bear.<br />
<div style="float: left; width: 60px; font-family: Crimson Text; color: #fff; font-size: 10px; text-align: Right; padding-right: 10px; text-shadow: 1px 1px 0px #000;">PINGS.</div>
Joichi and Tsukumoto ping me.<br />
<div style="float: left; width: 60px; font-family: Crimson Text; color: #fff; font-size: 10px; text-align: Right; padding-right: 10px; text-shadow: 1px 1px 0px #000;">WHAT.</div>
This character is made for the Hokkaido High room.<br />
<div style="float: left; width: 60px; font-family: Crimson Text; color: #fff; font-size: 10px; text-align: Right; padding-right: 10px; text-shadow: 1px 1px 0px #000;">PROFILE.</div>
This was coded from scratch. If you like it and want it, I can try and make a template. Just ask.<br />
<div style="float: left; width: 60px; font-family: Crimson Text; color: #fff; font-size: 10px; text-align: Right; padding-right: 10px; text-shadow: 1px 1px 0px #000;">F. CLAIM.</div>
I'm aware who the face claim is. Guess what? I'm going to make another character based on another anime.<br />
<div style="float: left; width: 60px; font-family: Crimson Text; color: #fff; font-size: 10px; text-align: Right; padding-right: 10px; text-shadow: 1px 1px 0px #000;">W. I. P.</div>
As usual, I will have my characters' profiles progress based on their roleplays.</div>
<div class="pages" id="content2">The Tsukumo clan has contributed in assassinations in the days long past. Royal lineages would be toppled because of them. The Tsukumo specialize in speed. It's been said that the great elder of the Tsukumo clan has been able to move faster than light and could deliver a killing stab so fast the blood would not be able to react fast enough to bleed... The Tsukumo clan have the ability to increase their heart rate over normal boundaries. This cannot be achieved through just rigorous action (unless new and trying to learn it), and can only be willingly done. This serves as the trigger for them to unlock their great speed. The faster the heart rate, the faster one is.<br /><br /> Nowadays, the Tsukumo clan are hired as body guards or general security. In this modern era, there have been less and less need of deadly methods and more use of defensive abilities. Luckily, speed is something that is adaptable. The Tsukumo clan now find themselves as peace keepers, more than anything and believe that they should walk in this path.<br /><br /> Joichi Tsukumo does not share this ideology. He prefers to use his natural speed for sport, and the supernatural speed to do whatever the hell he wants with it... Like travel. He was very fixated on this that he applied to be in Hokkaido High himself, instead of the private school for the Tsukumo clan.<br /><br /> Joichi found himself enjoying basketball for some reason. He finds a thrill finding openings in people and going past them just to score a shot. Eventually, enjoyment turned into time, and time turned into skill, and his skill landed him the role of team captain for Hokkaido High's basketball team.</div>
<div class="pages" id="content3">Joichi's a bit of a bully. He has a sadistic streak, as well as a deliquency streak. Of course, if he's caught, then he willingly goes to class, but might sleep in it.<br /><br /> On the court, he's leads he's calm and leads his team accordingly. He never seems to get mad, even if on the brink of losing. He only blames himself if they do lose.</div>
<div class="pages" id="content4">WIP.</div>
<div class="pages" id="content5">WIP.</div>
</div>
</div>
</div>