VS#17 Copycat

VS#17MTC: Copycat

CSS

/* Last Update: 08/18/18 */

/* MAIN DISPLAY COLORS AND FONT*/
body {
background-color:#000000;
color:#ffffff;
font-family:serif;
}
.blue {
color:rgba(144, 176, 204, 1);
}
.red {
color:rgba(243, 64, 85, 1);
}
.yellow {
color:rgba(252, 216, 133,1);
}
.pink {
color:rgba(254, 103, 161,1);
}
.green {
color:rgba(186,237, 130, 1);
}
a.blue {
background:rgba(144, 176, 204, 1) url(https://orig00.deviantart.net/1ea6/f/2018/227/7/3/copycat_miku_face_by_cera_nore-dcka94w.png);
}
a.red {
background:rgba(243, 64, 85, 1) url(https://orig00.deviantart.net/76c1/f/2018/227/d/2/copycat_meiko_face_by_cera_nore-dcka953.png);
}
a.yellow {
background:rgba(252, 216, 133,1) url(https://orig00.deviantart.net/afc6/f/2018/227/0/4/copycat_rin_face_by_cera_nore-dcka94q.png);
}
a.pink {
background:rgba(254, 103, 161,1) url(https://orig00.deviantart.net/29d4/f/2018/227/e/5/copycat_luka_face_by_cera_nore-dcka958.png);
}
a.green {
background:rgba(186,237, 130, 1) url(https://orig00.deviantart.net/b84f/f/2018/227/0/4/copycat_gumi_face_by_cera_nore-dcka95e.png);
}
.black {
background:#1f1f1f url(https://orig00.deviantart.net/188f/f/2018/227/a/d/copycat_face_by_cera_nore-dcka95m.png);
}

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

/* CSS MEAT */
.content {
z-index:2;
position:fixed;
top:5%;
left:0%;
height:90%;
width:100%;
text-align:center;
}
#title {
display:block;
position:relative;
top:0;
margin:0;
height:6vh;
font-size:5vh;
line-height:6vh;
overflow:auto;
}
#musicbox {
display:block;
height:10%;
margin-top:0.5%;
overflow:hidden;
}
#musicbox audio {
height:100%;
}
#navbar {
position:absolute;
width:100%;
}
#navbar a {
display:inline-block;
height:7vh;
width:7vh;
margin:1% 4%;
background-position:center;
background-size:cover;
}
#box {
position:absolute;
left:10%;
top:37.5%;
height:58%;
width:78%;
padding:1%;
}
#obox, #tab-library {
display:block;
position:relative;
height:100%;
}
#obox {
overflow-y:auto;
}
#obox img {
max-height:90%;
}
#tab-library {
overflow:hidden;
}
.tab {
position:absolute;
top:0%;
left:0%;
height:100%;
width:100%;
opacity:0;
transition:1s ease-in;
-o-transition:1s ease-in;
-moz-transition:1s ease-in;
-webkit-transition:1s ease-in;
}
.tab:target {
z-index:3;
opacity:1;
}
.infobox {
position:relative;
float:left;
height:100%;
width:40%;
text-align:left;
overflow-y:auto;
}
.infobox img {
width:100%;
}
.mugshot {
position:relative;
display:inline-block;
float:right;
height:100%;
width:57.5%;
overflow:hidden;
}
.mugshot img {
position:absolute;
top:0%;
left:50%;
height:100%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
p {
text-indent:4%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div class="content">
<h1 id="title">Copy that, Copycat</h1>

<div id="musicbox">
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/8mxn86oucr/Copycat.mp3" type="audio/mpeg">
</audio>
</div>

<div id="navbar">
<a href="#01" class="blue"></a>
<a href="#02" class="red"></a>
<a href="#03" class="yellow"></a>
<a href="#04" class="pink"></a>
<a href="#05" class="green"></a>
<a href="#obox" class="black"></a>
</div>

<div id="box">
<div style="height:100%;width:100%;overflow:hidden;">
<div id="obox">
This is what you've wanted, right?
</div>

<div id="tab-library">
<div class="tab" id="01">
<div class="infobox blue">
<h2>I</h2>
<p style="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
</p>
</div>
<div class="mugshot">
<img src="http://66.media.tumblr.com/3973ae6b98fdc885e170bf27ed63e847/tumblr_o751paP63V1v6y21vo3_1280.png" alt=""/>
</div>
</div>

<div class="tab" id="02">
<div class="infobox red">
<h2>Will</h2>
<p>
Paragraph
</p>
</div>
<div class="mugshot">
<img src="http://68.media.tumblr.com/eb71d082374ac7460599075d06efcabf/tumblr_o751paP63V1v6y21vo4_1280.png" alt=""/>
</div>
</div>

<div class="tab" id="03">
<div class="infobox yellow">
<h2>Teach</h2>
<p>
Paragraph
</p>
</div>
<div class="mugshot">
<img src="http://66.media.tumblr.com/f24936309fde4d506e23a7a36384f4f8/tumblr_o751paP63V1v6y21vo2_1280.png" alt=""/>
</div>
</div>

<div class="tab" id="04">
<div class="infobox pink">
<h2>Myself to</h2>
<p>
Paragraph
</p>
</div>
<div class="mugshot">
<img src="http://68.media.tumblr.com/2936e6199b565f9f27b9e8202bad4241/tumblr_o751paP63V1v6y21vo1_1280.png" alt=""/>
</div>
</div>

<div class="tab" id="05">
<div class="infobox green">
<h2>Let go</h2>
<p>
Paragraph
</p>
</div>
<div class="mugshot">
<img src="http://66.media.tumblr.com/15bc3c2663dc975632d7898d515628af/tumblr_o751paP63V1v6y21vo5_1280.png" alt=""/>
</div>
</div>

</div>
</div>

<a href="https://tinyurl.com/y76p2uef" target="_blank" title="VS#17">
<img src="https://i.imgur.com/WH9iaHf.png" id="credit"/>
</a>