VS#32 Tokyo Teddy Bear

VS#32HTC: Tokyo Teddy Bear

CSS

/* Last Update: 10/27/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:#dddddd url(https://media.buzzle.com/media/images-en/photos/utilities/1200-76510355-polyester-pillow-stuffing.jpg) fixed center;
background-size:cover;
font-family:serif;
}

/* MAIN DISPLAY COLORS */
.color1, #navbar, #infobox {
background-color:#f03563;
box-shadow:0px 0px 2px 2px #f03563;
}
.color2, #mugshot, #heart, #statbox, #musicbox {
background-color:#3b3235;
box-shadow:0px 0px 2px 2px #3b3235;
}
#navbar, #infobox, #mugshot, #heart, #statbox {
border:8px dotted #800000;
color:#000000;
}
.color1, .color2, .string {
box-shadow:1px 1px 10px #000000;
}
.string, #navbar a {
background:radial-gradient(#b22222, #800000);
background:-o-radial-gradient(#b22222, #800000);
background:-moz-radial-gradient(#b22222, #800000);
background:-webkit-radial-gradient(#b22222, #800000);
}
.string {
border-left:4px solid #111111;
border-right:4px solid #111111;
}
#musicbox {
color:#f03563;
}
#navbar a {
border:0.4vw solid #800000;
}
a {
color:#eeeeee;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color:#800000;
box-shadow:0px 0px 5px #000000;
}

/* CSS MEAT */
.string {
z-index:2;
position:fixed;
left:40%;
width:20%;
height:10px;
border-radius:10px;
}
#s1, #s3, #s5 {
transform:rotate(45deg);
-o-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
#s2, #s4, #s6 {
transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
#s1, #s2 {
top:15%;
}
#s3, #s4 {
top:50%;
}
#s5, #s6 {
top:84%;
}
.fabric {
z-index:1;
position:fixed;
top:0%;
height:100%;
width:45%;
overflow:hidden;
}
#left {
left:0%;
}
#right {
left:55%;
}
#mugshot, #heart, #statbox {
position:absolute;
padding:8px;
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#mugshot {
top:2.5%;
height:45%;
}
#heart {
top:55%;
width:10%;
}
#navbar {
position:absolute;
top:25%;
left:8%;
width:3.8vw;
padding:8px;
line-height:1vw;
}
#navbar a, .hole {
position:relative;
left:50%;
border-radius:100%;
}
#navbar a  {
display:block;
height:3vw;
width:3vw;
margin-left:-1.9vw;
}
.hole {
display:block;
position:relative;
left:50%;
height:0.5vw;
width:0.5vw;
margin:0.6vw -0.25vw;
background-color:#000000;
}
#statbox {
bottom:2.5%;
height:20%;
width:60%;
overflow-y:auto;
}
#statbox img {
display:inline-block;
max-height:100%;
}
#infobox {
position:absolute;
top:6%;
left:25%;
height:85%;
width:65%;
overflow:hidden;
}
.tab {
z-index:1;
position:absolute;
top:10%;
left:0%;
height:86%;
width:95%;
padding:2%;
overflow-y:auto;
text-align:center;
opacity:0;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.tab:target {
z-index:2;
opacity:1;
}
.tab img {
max-width:95%;
}
#musicbox {
position:relative;
top:5%;
left:50%;
margin-top:-2.25vh;
margin-left:-2.25vh;
}
#credit {
z-index:3;
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div class="string" id="s1"></div>
<div class="string" id="s2"></div>
<div class="string" id="s3"></div>
<div class="string" id="s4"></div>
<div class="string" id="s5"></div>
<div class="string" id="s6"></div>

<div class="fabric color1" id="left">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3e/24/57/3e245724946695bfa6d3c3efe43fa871.jpg" alt="" id="mugshot"/>

<a href="LINK YOUR SWEETIE" target="_blank" title="Sweetheart"><img src="http://icons.iconarchive.com/icons/custom-icon-design/valentine/256/stitch-heart-icon.png" id="heart"/></a>

<div id="statbox">
<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>

<div class="fabric color2" id="right">
<div id="navbar">
<a href="#01"><div class="hole"></div><div class="hole"></div></a>
<br/><a href="#02"><div class="hole"></div><div class="hole"></div></a>
<br/><a href="#03"><div class="hole"></div><div class="hole"></div></a>
<br/><a href="#00"><div class="hole"></div><div class="hole"></div></a>
</div>

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

<div class="tab" id="01">
<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 class="tab" 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>
</div>

<div class="tab" id="03">
<h2>Friends</h2>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

</div>

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