VS#24 Fantastic Night

VS#24HTC: Fantastic Night

CSS

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

/* ANIMATION IMPORT - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/ynj50vxuj0hhmvp/vs24-star-navbar-animation.css?dl=0");

/* PAGE BACKGROUND AND FONTS */
body {
background-color:#000000;
font-family:'Macondo Swash Caps',serif;
text-align:center;
}
h2, .title-gif, .title-shadow {
font-family:'Mr Dafoe',serif;
}

/* MAIN DISPLAY COLORS */
.color {
background-color:rgba(0,0,0,0.8);
color:#ffffff;
text-shadow:0px 0px 8px #68a6b0,
	0px 0px 8px #68a6b0;
}
.pop-box {
background:#111;
box-shadow:0px 0px 8px #68a6b0;
}
.pop-box:before {
border-color:#111 transparent transparent transparent;
}
#mugshot img, .infobox img {
filter:drop-shadow(0px 0px 8px #68a6b0);
-webkit-filter:drop-shadow(0px 0px 8px #68a6b0);
}
.title-gif {
background:url('https://dl.dropboxusercontent.com/scl/fi/cyua6mji3aikbxd45avrq/white-star-sparkles.gif?rlkey=162a57gxkpllbgqzb4k54jwrf');
}
.title-shadow {
text-shadow:0px 0px 8px #68a6b0,
	0px 0px 8px #68a6b0;
}
a {
color:#68a6b0;
}

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

/* CSS MEAT */
.star {
z-index:4;
position:fixed;
height:15%;
width:10%;
}
.pop-box {
position:relative;
top:20%;
border-radius:5px;
letter-spacing:4px;
opacity:0;
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}
.pop-box:before {
content:" ";
position:absolute;
top:100%;
left:50%;
margin-left:-1vh;
border-width:1vh;
border-style:solid;
}
.star:hover .pop-box {
opacity:1;
}
.star img {
position:absolute;
top:50%;
left:50%;
width:100%;
transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
#one {
top:50%;
left:10%;
}
#one img {
animation: pulse 2s infinite alternate;
-o-animation: pulse 2s infinite alternate;
-moz-animation: pulse 2s infinite alternate;
-webkit-animation: pulse 2s infinite alternate;
}
#two {
top:5%;
left:30%;
}
#two img {
animation:1s pulse2 1.5s infinite alternate;
-o-animation:1s pulse2 1.5s infinite alternate;
-moz-animation:1s pulse2 1.5s infinite alternate;
-webkit-animation:1s pulse2 1.5s infinite alternate;
}
#three {
top:10%;
left:45%;
}
#three img {
animation: pulse 2s infinite alternate;
-o-animation: pulse 2s infinite alternate;
-moz-animation: pulse 2s infinite alternate;
-webkit-animation: pulse 2s infinite alternate;
}
#four {
top:30%;
left:72.5%;
}
#four img {
animation:3s pulse 1.5s infinite alternate;
-o-animation:3s pulse 1.5s infinite alternate;
-moz-animation:3s pulse 1.5s infinite alternate;
-webkit-animation:3s pulse 1.5s infinite alternate;
}
#five {
top:55%;
left:80%;
}
#five img {
animation: pulse2 2.5s infinite alternate;
-o-animation: pulse2 2.5s infinite alternate;
-moz-animation: pulse2 2.5s infinite alternate;
-webkit-animation: pulse2 2.5s infinite alternate;
}
.infobox, #mugshot {
z-index:1;
position:fixed;
top:25%;
left:28%;
height:75%;
width:44%;
}
.infobox {
z-index:2;
overflow-y:auto;
opacity:0;
transition:0.8s ease-in;
-o-transition:0.8s ease-in;
-moz-transition:0.8s ease-in;
-webkit-transition:0.8s ease-in;
}
.infobox:target {
z-index:3;
opacity:1;
}
.infobox img {
width:32%;
margin:1% 0%;
border-radius:50%;
}
.infobox audio {
max-height:40px;
max-width:100%;
}
#mugshot {
overflow:hidden;
}
#mugshot img {
position:absolute;
left:50%;
bottom:0%;
height:100%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.title-gif,
.title-shadow {
position:absolute;
height:8vh;
padding:0% 4%;
font-size:7.5vh;
line-height:8vh;
}
.title-gif {
-webkit-text-fill-color:transparent;
background-clip:text;
-webkit-background-clip:text;
background-size:cover;
}
.left {
left:0%;
bottom:10%;
}
.right {
right:0%;
bottom: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=Macondo+Swash+Caps|Mr+Dafoe" rel="stylesheet">

<a href="#01" class="star" id="one">
<img src="http://ak1.picdn.net/shutterstock/videos/3905102/thumb/4.jpg" alt="Blue star"/>
<div class="pop-box">Stats</div>
</a>

<a href="#02" class="star" id="two">
<img src="http://ak1.picdn.net/shutterstock/videos/3905102/thumb/4.jpg" alt="Blue star"/>
<div class="pop-box">About</div>
</a>

<a href="#03" class="star" id="three">
<img src="http://ak1.picdn.net/shutterstock/videos/3905102/thumb/4.jpg" alt="Blue star"/>
<div class="pop-box">Friends</div>
</a>

<a href="#04" class="star" id="four">
<img src="http://ak1.picdn.net/shutterstock/videos/3905102/thumb/4.jpg" alt="Blue star"/>
<div class="pop-box">OOC</div>
</a>

<a href="#00" class="star" id="five">
<img src="http://ak1.picdn.net/shutterstock/videos/3905102/thumb/4.jpg" alt="Blue star"/>
<div class="pop-box">Reset</div>
</a>

<div id="mugshot">
<img src="https://pre00.deviantart.net/5eaf/th/pre/f/2018/240/e/b/otomachi_una_sugar_sparkle_by_cera_nore-dclg6f5.png" alt=""/>

<div class="title-shadow left">Fantastic</div>
<div class="title-gif left">Fantastic</div>

<div class="title-shadow right">Night</div>
<div class="title-gif right">Night</div>
</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>
<audio controls controlsList="nodownload">
<source src="http://k003.kiwi6.com/hotlink/vdtr40ctum/Fantastic_Night.mp3" type="audio/mpeg">
</audio>
</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>
<img src="https://static.zerochan.net/Otomachi.Una.full.2209462.png" alt=""/>
<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="color infobox" 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 class="color infobox" id="04">
<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>

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