VS#12 Reincarnation Ascensation

VS#12HNI: Reincarnation Ascensation Mk. II

CSS

/* Last Update: 07/15/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image:url(https://i.ytimg.com/vi/rSaG894TKTM/maxresdefault.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-size:auto 100%;
background-position:center;
background-color:#000000;
font-family:'Roboto Slab',serif;
font-size:102%;
}

/* MAIN DISPLAY COLORS */
.color {
background-color:#ab0a1a;
border:2px solid #0e1111;
color:#0e1111;
}
.color:hover {
background-color:#d7d7d7;
}
#title {
color:#ab0a1a;
}
#title, h2, a {
text-shadow:2px 0px 2px #0e1111,
	0px 2px 2px #0e1111,
	0px -2px 2px #0e1111,
	-2px 0px 2px #0e1111;
}
h2, a {
color:#ffffff;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#dddddd;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#0e1111;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#0e1111;
}

/* TITLE ANIMATION */
@keyframes cycle {
0% {content:"Reincarnation Ascensation";}
10% {content:"Itsumo waratte";}
20% {content:"boku o naburu kimi";}
30% {content:"ukiM enustaH";}
40% {content:"Aa aa nante tanoshisou";}
50% {content:"Konya konya naisho";}
60% {content:"no shikaeshi";}
70% {content:"Hatsune Miku";}
80% {content:"noitasnecsA noitanracnieR";}
90% {content:"Boku no ban";}
}
@-o-keyframes cycle {
0% {content:"Reincarnation Ascensation";}
10% {content:"Itsumo waratte";}
20% {content:"boku o naburu kimi";}
30% {content:"ukiM enustaH";}
40% {content:"Aa aa nante tanoshisou";}
50% {content:"Konya konya naisho";}
60% {content:"no shikaeshi";}
70% {content:"Hatsune Miku";}
80% {content:"noitasnecsA noitanracnieR";}
90% {content:"Boku no ban";}
}
@-moz-keyframes cycle {
0% {content:"Reincarnation Ascensation";}
10% {content:"Itsumo waratte";}
20% {content:"boku o naburu kimi";}
30% {content:"ukiM enustaH";}
40% {content:"Aa aa nante tanoshisou";}
50% {content:"Konya konya naisho";}
60% {content:"no shikaeshi";}
70% {content:"Hatsune Miku";}
80% {content:"noitasnecsA noitanracnieR";}
90% {content:"Boku no ban";}
}
@-webkit-keyframes cycle {
0% {content:"Reincarnation Ascensation";}
10% {content:"Itsumo waratte";}
20% {content:"boku o naburu kimi";}
30% {content:"ukiM enustaH";}
40% {content:"Aa aa nante tanoshisou";}
50% {content:"Konya konya naisho";}
60% {content:"no shikaeshi";}
70% {content:"Hatsune Miku";}
80% {content:"noitasnecsA noitanracnieR";}
90% {content:"Boku no ban";}
}

/* TITLE ANIMATION END CONTENT */
#title::after {
content:"Reincarnation Ascensation";
}

/* CSS MEAT */
#line, .infobox {
position:fixed;
transform:rotate(15deg);
-o-transform:rotate(15deg);
-moz-transform:rotate(15deg);
-webkit-transform:rotate(15deg);
}
#line {
top:52%;
left:-5%;
height:27.5%;
width:110%;
background-image:url(https://orig00.deviantart.net/d555/f/2018/188/5/2/red_sound_waves_by_cera_nore-dcgirh2.gif);
background-size:auto 100%;
}
#title {
position:fixed;
bottom:0%;
width:67.5%;
font-size:7vh;
opacity:0;
text-align:right;
transition:2s;
-o-transition:2s;
-moz-transition:2s;
-webkit-transition:2s;
}
body:hover #title {
opacity:1;
transition:8s;
-o-transition:8s;
-moz-transition:8s;
-webkit-transition:8s;
}
body:hover #title::after {
animation:cycle 0.7s ease-out 6;
-o-animation:cycle 0.7s ease-out 6;
-moz-animation:cycle 0.7s ease-out 6;
-webkit-animation:cycle 0.7s ease-out 6;
}
.infobox, .tab {
transition:1.5s;
-o-transition:1.5s;
-moz-transition:1.5s;
-webkit-transition:1.5s;
}
.infobox {
height:40%;
width:4px;
text-align:left;
opacity:0.95;
}
.infobox:hover {
height:60%;
width:28%;
transform:rotate(0deg);
-o-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
.tab {
position:absolute;
top:3%;
left:3%;
height:94%;
width:94%;
opacity:0;
overflow:hidden;
}
.infobox:hover .tab {
opacity:1;
overflow-y:auto;
}
.tab img {
width:100%;
}
#one {
top:25%;
left:13%;
}
#one:hover {
top:3%;
left:2.5%;
}
#two {
top:44%;
left:49.5%;
}
#two:hover {
top:20%;
left:36%;
}
#three {
top:61%;
left:80%;
}
#three:hover {
top:37%;
left:69.5%;
}
h2 {
text-align:center;
}
p {
text-indent:5%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">

<div id="title"></div>
<div id="line"></div>

<div class="color infobox" id="one">
<div class="tab">
<h2>Stats</h2>
<p style="text-align:center;text-indent:0%;">
<b>Name:</b> Stat here
<br/>
<b>Species:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br/>
<b>Eyes:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Build:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
<br/>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/ovjfpyfpp5/-Reincarnation_Ascensation_Extended_mix_.mp3" type="audio/mpeg">
</audio>
</p>
</div>
</div>

<div class="color infobox" id="two">
<div class="tab">
<h2>About</h2>
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap. Anyways, what do I usually do for examples when I need to fill space? OH YEAH! *ahem* Hello, people of Earth, I have come to devour you. Do not fear for it shall be a quick and painless death as I intake your entire planet. The sudden loss of atmospheric pressure and its protections will either freeze you in a millisecond or cause all of your blood to boil out of your body in a single instant. Hmm. I suppose that last one doesn't quite sound painless, but nonetheless it should be instantaneous.
</p>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<div class="color infobox" id="three">
<div class="tab">
<h2>OOC</h2>
<ul>
<li>Bullet one</li>
<li>Bullet two</li>
<li>Bullet three</li>
<li>Bullet four</li>
<li>Bullet five</li>
<li>Bullet six</li>
<li>Bullet seven</li>
<li>Bullet eight</li>
</ul>
</div>
</div>

<a href="https://tinyurl.com/midoriya" target="_blank" title="VS#12">
<img src="https://i.imgur.com/7XPiOlr.png" id="credit"/>
</a>