VS#26 Hibikase

VS#26HTS: Hibikase

CSS

/* Last Update: 09/15/18 */

/* MUSICBOX CSS IMPORT - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/cvduve2pku4zf7l/musicbox.css?dl=0");

/* PAGE BACKGROUND AND FONT */
body {
background:#000000 url(https://i.ytimg.com/vi/vVF6FyZT76M/maxresdefault.jpg) fixed center;
background-size:cover;
font-family:serif;
text-align:center;
}

/* MAIN DISPLAY COLORS */
.color, #navbar a {
background-color:#000000;
box-shadow:0px 0px 1.5vh 1.5vh #8be0e0;
color:#8be0e0;
text-shadow:10px 10px 0px #212121;
}
a {
color:#ffffff;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#212121;
}
::-webkit-scrollbar-thumb {
background-color:#000000;
border:1px solid #8be0e0;
}

/* ANIMATION */
@keyframes resonate {
50% {box-shadow:0px 0px 2vh 3vh #8be0e0;}
100% {height:160vh;width:160vh;box-shadow:0px 0px 2vh 3vh transparent;}
}
@-o-keyframes resonate {
50% {box-shadow:0px 0px 2vh 3vh #8be0e0;}
100% {height:160vh;width:160vh;box-shadow:0px 0px 2vh 3vh transparent;}
}
@-moz-keyframes resonate {
50% {box-shadow:0px 0px 2vh 3vh #8be0e0;}
100% {height:160vh;width:160vh;box-shadow:0px 0px 2vh 3vh transparent;}
}
@-webkit-keyframes resonate {
50% {box-shadow:0px 0px 2vh 3vh #8be0e0;}
100% {height:160vh;width:160vh;box-shadow:0px 0px 2vh 3vh transparent;}
}

/* CSS MEAT */
#resonate, #profile {
position:fixed;
top:50%;
left:50%;
border-radius:50%;
transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
#resonate {
height:75vh;
width:75vh;
animation:resonate 3s infinite;
-o-animation:resonate 3s infinite;
-moz-animation:resonate 3s infinite;
-webkit-animation:resonate 3s infinite;
}
#profile, #navbar a {
transition:2s;
-o-transition:2s;
-moz-transition:2s;
-webkit-transition:2s;
}
#profile {
height:73vh;
width:73vh;
opacity:0.1;
}
#profile:hover, #navbar a:hover {
opacity:0.8;
}
.infobox, #navbar a, #title, #musicbox {
position:absolute;
}
#musicbox {
left:50%;
margin-left:-2.25vh;
}
#title {
top:8%;
left:25%;
width:50%;
font-size:5.5vh;
}
.infobox {
z-index:1;
top:25%;
left:15%;
height:60%;
width:70%;
opacity:0;
overflow-y:auto;
overflow-x:hidden;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.infobox:target {
z-index:2;
opacity:1;
}
#navbar {
z-index:3;
position:fixed;
top:87.5%;
left:5%;
height:8%;
width:90%;
}
#navbar a {
top:0%;
bottom:0%;
width:15%;
font-size:5vh;
line-height:6.5vh;
text-decoration:none;
overflow:hidden;
opacity:0.2;
}
.skew-left {
transform:skewX(45deg);
-o-transform:skewX(45deg);
-moz-transform:skewX(45deg);
-webkit-transform:skewX(45deg);
}
.skew-right {
transform:skewX(-45deg);
-o-transform:skewX(-45deg);
-moz-transform:skewX(-45deg);
-webkit-transform:skewX(-45deg);
}
#navbar a:first-child {
left:0%;
}
#navbar a:nth-child(2) {
left:21%;
}
#navbar a:nth-child(3) {
right:21%;
}
#navbar a:nth-child(4) {
right:0%;
}
.infobox img {
width:100%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div id="navbar">
<a href="#01" class="skew-left"></a>
<a href="#02" class="skew-left"></a>
<a href="#03" class="skew-right"></a>
<a href="#00" class="skew-right"></a>
</div>

<div id="resonate"></div>
<div class="color" id="profile">

<div id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/chotei841g/Hibikase.mp3" type="audio/mpeg">
</audio>
</div>
<div id="title">Hibikase</div>

<div class="infobox" id="01">
<h2>Stats</h2>
<p>
<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
</p>
</div>

<div class="infobox" id="02">
<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 class="infobox" id="03">
<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#26">
<img src="https://i.imgur.com/7XPiOlr.png" id="credit"/>
</a>