VS#29 Repeat II

VS#29MTC: Repeat II

CSS

/* Last Update: 10/07/18 */

/* RECORD CSS IMPORT - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/3qjxvwtclssatge/vs29-repeat-ii-record.css?dl=0");

/* PAGE BACKGROUND AND FONTS */
body {
background:#ffff00 url(http://wallpaper-gallery.net/images/yellow-background/yellow-background-1.jpg) no-repeat fixed;
background-size:cover;
text-align:center;
font-family:serif;
}
a {
font-family:monospace;
}

/* MAIN DISPLAY COLORS */
#box, audio, #record {
box-shadow:-15px -10px 1px rgba(0,0,0,0.5);
}
#box {
border:3px solid #000000;
}
#title {
background-color:#000000;
color:#1bab4b;
}
.color, #box, #label {
background-color:#f5ad31;
color:#4d2e1c;
}
#navbar a {
background:url(http://www.clipartbest.com/cliparts/RcA/Rjb/RcARjb84i.png) no-repeat center;
border:1px solid #111111;
}
#label {
border:15px solid #1bab4b;
}
a {
color:#000000;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#f5ad31;
}
::-webkit-scrollbar-thumb {
background-color:#4d2e1c;
}

/* CSS MEAT */
#box, #mugshot, #navbar {
position:fixed;
}
#musicbox {
position:absolute;
max-width:25%;
bottom:13%;
left:25%;
border-radius:30px;
}
#mugshot {
top:10%;
left:50%;
height:80%;
}
#box {
top:10%;
left:20%;
height:55%;
width:25%;
}
#title, #back-image {
position:absolute;
left:0;
width:100%;
overflow:hidden;
}
#title {
z-index:2;
top:0;
height:14%;
font-size:6.5vh;
line-height:7.5vh;
}
#back-image {
z-index:1;
bottom:0;
height:86%;
}
#back-image img {
position:absolute;
top:0;
left:50%;
height:100%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.infobox {
z-index:2;
position:absolute;
top:35%;
bottom:-21%;
left:-14%;
width:96%;
padding:2%;
overflow-y:auto;
opacity:0;
transition:1.5s;
-o-transition:1.5s;
-moz-transition:1.5s;
-webkit-transition:1.5s;
}
.infobox:target {
z-index:3;
top:14%;
left:0;
bottom:0;
opacity:0.85;
}
.infobox img {
height:90%;
}
#navbar {
top:12.5%;
left:47.5%;
height:45%;
width:5%;
}
#navbar a {
display:inline-block;
height:25%;
width:100%;
margin-bottom:5px;
background-size:contain;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div id="record">
<div id="label">
<h1>
Repeat II
</h1>
<div id="hole"></div>
</div>
</div>

<audio controls controlsList="nodownload" id="musicbox">
<source src="http://k003.kiwi6.com/hotlink/1mil7ryek0/Repeat_II.mp3" type="audio/mpeg">
</audio>

<img src="https://orig00.deviantart.net/8f64/f/2018/260/6/5/65fb0a4a6a50f1ac64947e4b89ca2617-dcn2khp.png" alt="" id="mugshot"/>

<div id="navbar">
<a href="#01"></a>
<a href="#02"></a>
<a href="#03"></a>
<a href="#00"></a>
</div>

<div id="box">
<div id="title">
SONiKA
</div>

<div id="back-image">
<img src="http://vignette2.wikia.nocookie.net/vocaloid/images/1/19/SONiKA.jpg/revision/latest?cb=20141128003241" alt=""/>
</div>

<div class="color 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="color 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="color 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="http://wix.cera-nore.com/" target="_blank" title="VS#29">
<img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/>
</a>