GS#05 LoZ - Ganondorf

GS#05ATS: LoZ - Ganondorf

CSS

/* Last Update: 11/30/18 */

/* MUSICBOX CSS IMPORT - PLACE NOTHING ABOVE */
@import url("https://dl.dropboxusercontent.com/s/cvduve2pku4zf7l/musicbox.css?dl=0");

/* PAGE BACKGROUND AND FONTS */
body {
background:#111 url() center fixed;
background-size:cover;
font-family:'Cabin Sketch',serif;
}
label, a {
font-family:serif;
}

/* MAIN DISPLAY COLORS */
.color, #nav-tabs label, .mugshot {
background-color:#000;
border:3px solid #8b0000;
box-shadow:5px 5px 10px #000;
}
.color {
color:#8b0000;
}
#nav-tabs label:hover {
box-shadow:3px 3px 5px #000000;
}
.triangle {
border-bottom: 12vh solid #b8860b;
filter:drop-shadow(0 0 5px transparent);
-webkit-filter:drop-shadow(0 0 5px transparent);
}
.triangle:hover {
z-index:2;
border-bottom:12vh solid #ffd700;
filter:drop-shadow(0 0 5px #ffd700);
-webkit-filter:drop-shadow(0 0 5px #ffd700);
}
#musicbox, label, a {
color:#b8860b;
}
#musicbox:hover, label:hover, a:hover {
color:#ffd700;
text-shadow:0 0 5px #ffd700;
}
i {
color:#666;
}

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

/* TRANSITION SPEED */
.triangle, #musicbox,
.mugshot, .infobox {
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

/* CSS MEAT */
#statbox, #nav-tabs, .infobox, .mugshot,
#nav-gallery, #sprite, #triforce {
position:fixed;
}
#triforce {
z-index:1;
top:72%;
left:50%;
margin-left:-16.1vh;
height:24vh;
width:32.2vh;
}
.triangle {
position:absolute;
height:0;
width:0;
border-left:8vh solid transparent;
border-right:8vh solid transparent;
}
#sprite {
z-index:2;
bottom:1%;
left:18%;
height:33%;
}
#statbox {
z-index:5;
top:13%;
left:7%;
height:38%;
width:18%;
padding:2%;
overflow-y:auto;
text-align:center;
}
#musicbox {
position:relative;
top:5%;
}
#nav-gallery {
z-index:4;
left:50%;
top:1%;
height:8%;
padding:0.3% 3%;
white-space:nowrap;
text-align:center;
overflow:hidden;
}
#nav-gallery label {
display:inline-block;
position:relative;
height:100%;
}
#nav-gallery label img {
height:100%;
}
.mugshot {
top:11%;
height:57%;
left:50%;
margin-top:0.2vh;
}
.mugshot, #nav-gallery {
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#nav-tabs {
z-index:6;
top:70%;
left:6%;
height:30%;
width:8%;
}
#nav-tabs label {
display:block;
position:relative;
margin-bottom:9px;
text-align:center;
overflow:hidden;
}
.infobox {
top:15%;
right:7%;
height:66%;
width:22.5%;
padding:2%;
overflow-y:auto;
text-align:left;
}
input {
display:none;
}
label {
cursor:pointer;
}
.mugshot, .infobox {
z-index:2;
opacity:0;
}
#gdefault:checked ~ #pdefault,
#g1:checked ~ #p1,
#g2:checked ~ #p2,
#g3:checked ~ #p3,
#g4:checked ~ #p4,
#t1:checked ~ #tab1,
#t2:checked ~ #tab2,
#t3:checked ~ #tab3,
#t4:checked ~ #tab4 {
z-index:3;
opacity:1;
}
#statbox img, .infobox img {
max-width:100%;
}
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=Cabin+Sketch" rel="stylesheet">

<div id="triforce">
<a href="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Folliebarder%2Ffiles%2F2017%2F04%2Fganondorf_zelda_twilight-1200x675.jpg" class="triangle" style="top:0;left:25%;" target="_blank"></a>
<a href="http://screenrant.com/wp-content/uploads/legend-zelda-netflix-tv-series.jpg" class="triangle" style="top:50%;" target="_blank"></a>
<a href="http://hiddentriforce.com/wp-content/uploads/2014/07/TwilightPrincessZelda.jpg" class="triangle" style="top:50%;left:50%;" target="_blank"></a>
</div>

<img src="https://66.media.tumblr.com/tumblr_lr687rOUr91qjqj62.gif" id="sprite"/>


<div class="color" id="statbox">
<div id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://zeldauniverse.s3.amazonaws.com/soundtracks/ocarinaoftimeost/76%20-%20Inside%20Ganons%20Castle.mp3" type="audio/mpeg">
</audio>
</div>

<h2>Stats</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="color" id="nav-gallery">
<label for="g1"><img src="http://vignette4.wikia.nocookie.net/zelda/images/9/96/Ganon_Artwork_(A_Link_to_the_Past).png/revision/latest?cb=20091016235631"/></label>
<label for="g2"><img src="http://vignette2.wikia.nocookie.net/zelda/images/8/8a/ALBW_Ganon.png/revision/latest?cb=20131116002931&path-prefix=es"/></label>
<label for="g3"><img src="http://vignette3.wikia.nocookie.net/zelda/images/1/1e/Ganon_Artwork_(Ocarina_of_Time).png/revision/latest?cb=20110828041255"/></label>
<label for="g4"><img src="https://memberfiles.freewebs.com/15/75/38537515/photos/Shaunod15/Ganon_(Twilight_Princess).png"/></label>
<label for="gdefault"><img src="http://vignette2.wikia.nocookie.net/zelda/images/b/be/Beast_Ganon_(Hyrule_Warriors).png/revision/latest?cb=20150217195739"/></label>
</div>

<input type="radio" name="gallery" id="g1"/>
<input type="radio" name="gallery" id="g2"/>
<input type="radio" name="gallery" id="g3"/>
<input type="radio" name="gallery" id="g4"/>
<input type="radio" name="gallery" checked="checked" id="gdefault"/>

<img src="http://vignette3.wikia.nocookie.net/zelda/images/e/ee/Ganondorf_(Twilight_Princess).png/revision/latest?cb=20091011004712" class="mugshot" id="pdefault" alt=""/>
<img src="http://orig12.deviantart.net/55e9/f/2014/219/1/5/loz___hw_ganondorf_by_spoonybards-d7u2quu.jpg" class="mugshot" id="p1" alt=""/>
<img src="http://pre14.deviantart.net/3fa3/th/pre/i/2012/231/5/2/ganondorf_by_onichan_xd-d5bo49u.jpg" class="mugshot" id="p2" alt=""/>
<img src="" class="mugshot" id="p3" alt=""/>
<img src="" class="mugshot"  id="p4" alt=""/>


<div id="nav-tabs">
<label for="t1">About</label>
<label for="t2">Extras</label>
<label for="t3">Abilities</label>
<label for="t4">OOC</label>
</div>

<input type="radio" name="tabs" checked="checked" id="t1"/>
<input type="radio" name="tabs" id="t2"/>
<input type="radio" name="tabs" id="t3"/>
<input type="radio" name="tabs" id="t4"/>

<div class="color infobox" id="tab1">
<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="color infobox" id="tab2">
<h2>Extras</h2>
<a href="" target="_blank">Link</a> <i>Italic</i>
</div>

<div class="color infobox" id="tab3">
<h2>Abilities</h2>
</div>

<div class="color infobox" id="tab4">
<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/midoriya" target="_blank" title="GS#05">
<img src="https://i.imgur.com/7XPiOlr.png" id="credit"/>
</a>