VS#35 sweet_So

VS#35ATC: sweet_So_sweet

CSS

/* Last Update: 10/27/18*/

/* IMAGE SHAKE ANIMATION IMPORT - PLACE NOTHING ABOVE */
@import url('https://dl.dropboxusercontent.com/s/l59o4yso67hpaq5/vs35-image-shake.css?dl=0');

/* PAGE BACKGROUND AND FONT */
body {
background:#000000 fixed;
background-size:cover;
font-family:'Architects Daughter', serif;
}
.mugshot.left::after {
border-right:34vw solid #000000;
border-top:34vw solid transparent;
}
.mugshot.right::after {
border-left:34vw solid #000000;
border-bottom:34vw solid transparent;
}

/* MAIN DISPLAY COLORS */
.infobox:target {
background-color:rgba(0,0,0,0.9);
border:1px solid #ffffff;
animation:4s box-shake linear infinite;
-o-animation:4s box-shake linear infinite;
-moz-animation:4s box-shake linear infinite;
-webkit-animation:4s box-shake linear infinite;
}
.info, #title {
color:#ffffff;
animation:4s shake linear infinite;
-o-animation:4s shake linear infinite;
-moz-animation:4s shake linear infinite;
-webkit-animation:4s shake linear infinite;
}
.tri {
animation:4s tri-shake linear infinite;
-o-animation:4s tri-shake linear infinite;
-moz-animation:4s tri-shake linear infinite;
-webkit-animation:4s tri-shake linear infinite;
}
.left .tri {
border-right:3.7vw solid #ffffff;
border-top:3.7vw solid transparent;
}
.right .tri {
border-left:3.7vw solid #ffffff;
border-bottom:3.7vw solid transparent;
}
img {
animation:4s image-shake 2s linear infinite;
-o-animation:4s image-shake 2s linear infinite;
-moz-animation:4s image-shake 2s linear infinite;
-webkit-animation:4s image-shake 2s linear infinite;
}
a {
color:#c0c0c0;
}
a:hover {
color:#404040;
}

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

/* KEYFRAME ANIMATIONS */
@keyframes shake {
45%, 55% {color:#fff;text-shadow:none;}
46%, 54% {color:transparent;text-shadow:-5px -15px 5px rgba(255,255,255,0.8),
	-15px -10px 5px rgba(255,255,255,0.8),
	5px 10px 5px rgba(255,255,255,0.8),
	-10px 5px 5px rgba(255,255,255,0.8),
	5px -5px 5px rgba(255,255,255,0.8);}
}
@-o-keyframes shake {
45%, 55% {color:#fff;text-shadow:none;}
46%, 54% {color:transparent;text-shadow:-5px -15px 5px rgba(255,255,255,0.8),
	-15px -10px 5px rgba(255,255,255,0.8),
	5px 10px 5px rgba(255,255,255,0.8),
	-10px 5px 5px rgba(255,255,255,0.8),
	5px -5px 5px rgba(255,255,255,0.8);}
}
@-moz-keyframes shake {
45%, 55% {color:#fff;text-shadow:none;}
46%, 54% {color:transparent;text-shadow:-5px -15px 5px rgba(255,255,255,0.8),
	-15px -10px 5px rgba(255,255,255,0.8),
	5px 10px 5px rgba(255,255,255,0.8),
	-10px 5px 5px rgba(255,255,255,0.8),
	5px -5px 5px rgba(255,255,255,0.8);}
}
@-webkit-keyframes shake {
45%, 55% {color:#fff;text-shadow:none;}
46%, 54% {color:transparent;text-shadow:-5px -15px 5px rgba(255,255,255,0.8),
	-15px -10px 5px rgba(255,255,255,0.8),
	5px 10px 5px rgba(255,255,255,0.8),
	-10px 5px 5px rgba(255,255,255,0.8),
	5px -5px 5px rgba(255,255,255,0.8);}
}
@keyframes tri-shake {
45%, 55% {filter:none;}
46%, 54% {filter:drop-shadow(2px -10px 2px rgba(255,255,255,0.4)) drop-shadow(-10px 5px 2px rgba(255,255,255,0.4)) drop-shadow(10px 5px 2px rgba(255,255,255,0.4));}
}
@-o-keyframes tri-shake {
45%, 55% {-webkit-filter:none;}
46%, 54% {-webkit-filter:drop-shadow(2px -10px 2px rgba(255,255,255,0.4)) drop-shadow(-10px 5px 2px rgba(255,255,255,0.4)) drop-shadow(10px 5px 2px rgba(255,255,255,0.4));}
}
@-moz-keyframes tri-shake {
45%, 55% {filter:none;}
46%, 54% {filter:drop-shadow(2px -10px 2px rgba(255,255,255,0.4)) drop-shadow(-10px 5px 2px rgba(255,255,255,0.4)) drop-shadow(10px 5px 2px rgba(255,255,255,0.4));}
}
@-webkit-keyframes tri-shake {
45%, 55% {-webkit-filter:none;}
46%, 54% {-webkit-filter:drop-shadow(2px -10px 2px rgba(255,255,255,0.4)) drop-shadow(-10px 5px 2px rgba(255,255,255,0.4)) drop-shadow(10px 5px 2px rgba(255,255,255,0.4));}
}
@keyframes box-shake {
45%, 55% {border-color:#fff;box-shadow:none;}
46%, 54% {border-color:transparent;box-shadow:-4px -4px 5px rgba(255,255,255,0.6),
	-4px -4px 5px rgba(255,255,255,0.6) inset;}
}
@-o-keyframes box-shake {
45%, 55% {border-color:#fff;box-shadow:none;}
46%, 54% {border-color:transparent;box-shadow:-4px -4px 5px rgba(255,255,255,0.6),
	-4px -4px 5px rgba(255,255,255,0.6) inset;}
}
@-moz-keyframes box-shake {
45%, 55% {border-color:#fff;box-shadow:none;}
46%, 54% {border-color:transparent;box-shadow:-4px -4px 5px rgba(255,255,255,0.6),
	-4px -4px 5px rgba(255,255,255,0.6) inset;}
}
@-webkit-keyframes box-shake {
45%, 55% {border-color:#fff;box-shadow:none;}
46%, 54% {border-color:transparent;box-shadow:-4px -4px 5px rgba(255,255,255,0.6),
	-4px -4px 5px rgba(255,255,255,0.6) inset;}
}

/* CSS MEAT */
.mugshot {
position:fixed;
height:34vw;
width:34vw;
overflow:hidden;
}
.mugshot img {
z-index:3;
position:absolute;
top:50%;
left:50%;
height:100%;
margin-top:-50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.mugshot.left {
z-index:2;
top:5%;
left:5%;
}
.mugshot.right {
z-index:1;
bottom:5%;
right:5%;
}
.mugshot::after, .tri {
content:"";
z-index:4;
position:absolute;
}
.mugshot.left::after,
.left .tri,
.left a[href="#reset"] {
bottom:0;
right:0;
}
.mugshot.right::after,
.right .tri,
.right a[href="#reset"] {
top:0;
left:0;
}
#title {
z-index:5;
position:fixed;
top:50%;
left:50%;
margin-top:-3vh;
font-size:6vh;
transform:translateX(-50%) rotateZ(-40deg);
-o-transform:translateX(-50%) rotateZ(-40deg);
-moz-transform:translateX(-50%) rotateZ(-40deg);
-webkit-transform:translateX(-50%) rotateZ(-40deg);
}
.infobox {
z-index:6;
position:fixed;
height:3.7vw;
width:3.7%;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.infobox:target {
height:30%;
width:35%;
}
.infobox a[href="#reset"] {
z-index:3;
position:absolute;
height:3.7vw;
width:3.7vw;
}
.infobox:target a[href="#reset"] {
z-index:5;
}
#one {
top:2%;
left:45%;
}
#two {
top:34%;
left:30%;
}
#three {
top:66%;
left:15%;
}
#four {
bottom:66%;
right:15%;
}
#five {
bottom:34%;
right:30%;
}
#six {
bottom:2%;
right:45%;
}
.info {
position:absolute;
top:0;
bottom:0;
overflow:hidden;
opacity:0;
transition:0.8s, padding 0s 1s;
-o-transition:0.8s, padding 0s 1s;
-moz-transition:0.8s, padding 0s 1s;
-webkit-transition:0.8s, padding 0s 1s;
}
.infobox:target .info {
padding:10px;
overflow-y:auto;
opacity:1;
transition:1.2s 0.6s, padding 0s;
-o-transition:1.2s 0.6s, padding 0s;
-moz-transition:1.2s 0.6s, padding 0s;
-webkit-transition:1.2s 0.6s, padding 0s;
}
.left .info {
left:5px;
right:3.7vw;
}
.right .info {
left:3.7vw;
right:5px;
}
.info img {
max-height:100%;
}
h2 {
margin:0;
}
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=Architects+Daughter" rel="stylesheet"/>

<div class="mugshot left">
<img src="http://orig10.deviantart.net/b845/f/2017/185/c/0/sss_hagane__2__by_cera_nore-dbf5bzo.jpg" alt=""/>
</div>

<div class="mugshot right">
<img src="http://orig11.deviantart.net/325c/f/2017/185/c/4/sss_hatsune__2__by_cera_nore-dbf5bzf.jpg" alt=""/>
</div>

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

<div class="infobox left" id="one">
<a href="#one" class="tri"></a><a href="#reset"></a>
<div class="info">
<h2>Music</h2>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/gf46cg011g/Sweet_So_Sweet.mp3" type="audio/mpeg">
</audio>
</div>
</div>

<div class="infobox left" id="two">
<a href="#two" class="tri"></a><a href="#reset"></a>
<div class="info">
<h2>Hagane Miku</h2>
<p style="text-indent:0%;">
<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="infobox left" id="three">
<a href="#three" class="tri"></a><a href="#reset"></a>
<div class="info">
<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="infobox right" id="four">
<a href="#four" class="tri"></a><a href="#reset"></a>
<div class="info">
<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>

<div class="infobox right" id="five">
<a href="#five" class="tri"></a><a href="#reset"></a>
<div class="info">
<h2>Hatsune Miku</h2>
<p style="text-indent:0%;">
<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="infobox right" id="six">
<a href="#six" class="tri"></a><a href="#reset"></a>
<div class="info">
<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>

<a href="http://bit.do/eePwi" target="_blank" title="VS#35">
<img src="https://i.imgur.com/loleTtJ.png" id="credit"/>
</a>