GS#03 LoZ - Link

GS#03ATS: LoZ - Link

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:#030 url() center fixed;
background-size:cover;
font-family:'Simonetta',serif;
font-size:105%;
}
h2 {
font-family:'Miltonian','Simonetta',serif;
}

/* MAIN DISPLAY COLORS */
.color, #nav-tabs label, .mugshot {
background-color:#954535;
border:8px double #44110b;
box-shadow:5px 5px 10px #000000;
color:#44110b;
}
#nav-tabs label:hover {
box-shadow:3px 3px 5px #000000;
}
#nav-tabs label:first-of-type {
background:radial-gradient(#005500, #008000);
background:-o-radial-gradient(#005500, #008000);
background:-moz-radial-gradient(#005500, #008000);
background:-webkit-radial-gradient(#005500, #008000);
background-color:#008000;
border:5px solid #008000;
}
#mana {
border:0.6vh solid #ffffff;
}
#mana::after {
border-left:3px solid #000000;
border-right:3px solid #000000;
background:linear-gradient(#006400,#00ff00,#006400);
background:-o-linear-gradient(#006400,#00ff00,#006400);
background:-moz-linear-gradient(#006400,#00ff00,#006400);
background:-webkit-linear-gradient(#006400,#00ff00,#006400);
}
.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, a {
color:#b8860b;
}
#musicbox:hover, a:hover {
color:#ffd700;
text-shadow:0 0 5px #ffd700;
}
#rupees i {
color:#808080;
}
i {
color:#030;
}

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

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

/* CSS MEAT */
#statusbox, #nav-tabs, .mugshot,
#nav-gallery, #sprite, #triforce, #rupees {
position:fixed;
}
#triforce {
z-index:1;
top:50%;
left:50%;
margin:-12vh -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;
left:50%;
height:33%;
bottom:1%;
}
#rupees {
z-index:2;
top:90%;
left:6%;
height:5%;
}
#rupees img {
height:100%;
}
#statusbox {
z-index:2;
top:1%;
left:7%;
height:15%;
width:30%;
}
#statusbox img {
height:22.5%;
}
#mana {
position:relative;
height:20%;
width:15%;
border-radius:20%;
}
#mana::after {
content:"";
display:block;
height:100%;
border-radius:15%;
}
#musicbox {
position:relative;
top:5%;
}
#nav-gallery {
z-index:4;
left:5%;
top:31%;
height:49%;
padding:0.5%;
}
#nav-gallery label {
display:block;
position:relative;
height:20%;
}
#nav-gallery label img {
height:100%;
}
.mugshot, #sprite {
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.mugshot {
top:18%;
height:68%;
left:24%;
}
#nav-tabs {
z-index:4;
top:1%;
right:6%;
height:93%;
width:33%;
text-align:right;
white-space:nowrap;
}
#nav-tabs label {
display:inline-block;
position:relative;
height:7.2vw;
width:7.2vw;
border-radius:50%;
text-align:center;
}
#nav-tabs label:first-of-type {
margin-left:-3.6vw;
margin-right:7%;
}
#nav-tabs label img {
position:relative;
top:5%;
height:90%;
}
.infobox {
position:absolute;
top:14vw;
bottom:0;
right:3%;
width:84%;
padding:5%;
overflow-y:auto;
text-align:left;
white-space:normal;
}
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;
}
.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=Miltonian|Simonetta" 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="http://vignette2.wikia.nocookie.net/theamazingworldofgumball/images/3/3e/Classic_Twilight_Princess_Link_Sprite.gif/revision/latest?cb=20130414061024" id="sprite"/>

<div id="rupees">
<img src="https://vignette.wikia.nocookie.net/zelda/images/2/2e/Rubis_Vert_TWW.png/revision/latest?cb=20131008172520&path-prefix=fr"/>
<i>351</i>
</div>


<div id="statusbox">
<img src="http://vignette2.wikia.nocookie.net/zelda/images/d/d1/Heart_(Ocarina_of_Time).png/revision/latest?cb=20100115213958"/>
<img src="http://vignette2.wikia.nocookie.net/zelda/images/d/d1/Heart_(Ocarina_of_Time).png/revision/latest?cb=20100115213958"/>
<img src="http://vignette2.wikia.nocookie.net/zelda/images/d/d1/Heart_(Ocarina_of_Time).png/revision/latest?cb=20100115213958"/>
<div id="mana"></div>
<div id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://zeldauniverse.s3.amazonaws.com/soundtracks/skywardswordost/366%20The%20Legend%20of%20Zelda%20Main%20Theme%20Medley.mp3" type="audio/mpeg">
</audio>
</div>
</div>


<div class="color" id="nav-gallery">
<label for="g1"><img src="http://vignette1.wikia.nocookie.net/zelda/images/0/0a/Bottle_(Skyward_Sword).png/revision/latest?cb=20111109090307"/></label>
<label for="g2"><img src="http://www.zeldadungeon.net/Zelda14/Items/Heart-Potion-Icon.png"/></label>
<label for="g3"><img src="http://vignette2.wikia.nocookie.net/zelda/images/e/ec/Stamina_Potion_(Skyward_Sword).png/revision/latest?cb=20111118155444"/></label>
<label for="g4"><img src="http://vignette2.wikia.nocookie.net/zelda/images/2/24/Air_Potion_(Skyward_Sword).png/revision/latest/scale-to-width-down/40?cb=20111118165615"/></label>
<label for="gdefault"><img src="http://vignette1.wikia.nocookie.net/zelda/images/5/53/Bottled_Fairy_(Skyward_Sword).png/revision/latest?cb=20111109090736"/></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="https://s-media-cache-ak0.pinimg.com/736x/1c/b4/61/1cb461f631e4008a247fe615a6ed4b2c.jpg" class="mugshot" id="pdefault" alt=""/>
<img src="http://img10.deviantart.net/00dd/i/2014/063/1/d/link____twilight_princess__by_tipetogi-d78v5bs.jpg" class="mugshot" id="p1" alt=""/>
<img src="https://static.zerochan.net/Link.%28Breath.of.the.Wild%29.full.1987277.jpg" class="mugshot" id="p2" alt=""/>
<img src="" class="mugshot" id="p3" alt=""/>
<img src="" class="mugshot"  id="p4" alt=""/>


<div id="nav-tabs">
<input type="radio" name="tabs" checked="checked" id="t1"/>
<label for="t1"><img src="http://images1-1.gamewise.co/191008-full.png"/></label>
<input type="radio" name="tabs" id="t2"/>
<label for="t2"><img src="http://zeldawiki.org/images/thumb/5/5e/HookshotG_Large.png/120px-HookshotG_Large.png"/></label>
<input type="radio" name="tabs" id="t3"/>
<label for="t3" style="margin:-1.6vw;top:5vw;"><img src="http://vignette4.wikia.nocookie.net/zelda/images/b/bf/Bomb_(Ocarina_of_Time).png/revision/latest?cb=20091226020445"/></label>
<input type="radio" name="tabs" id="t4"/>
<label for="t4"><img src="http://zeldawiki.org/images/thumb/0/04/MM_-_Hero's_Bow.png/180px-MM_-_Hero's_Bow.png"/></label>

<div class="color infobox" id="tab1">
<h2>Stats</h2>
<p style="text-align:center;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 infobox" id="tab2">
<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="" 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>
</div>


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