GS#04 LoZ - Zelda

GS#04ATS: LoZ - Zelda

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

/* MAIN DISPLAY COLORS */
.color, #nav-tabs label:not(:first-of-type) {
background-color:#cea063;
border:3px solid #a0522d;
box-shadow:5px 5px 10px #000000;
color:#a0522d;
}
.mugshot, #nav-gallery label, #nav-tabs label:first-of-type {
background:radial-gradient(#cc65ff,#9932cc);
background:-o-radial-gradient(#cc65ff,#9932cc);
background:-moz-radial-gradient(#cc65ff,#9932cc);
background:-webkit-radial-gradient(#cc65ff,#9932cc);
background-color:#9932cc;
box-shadow:5px 5px 10px #000000;
}
#nav-gallery label:hover, #nav-tabs label:hover {
box-shadow:3px 3px 5px #000000;
}
#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 {
background-color:#230059;
}
#musicbox, a {
color:#9932cc;
}
#musicbox:hover, a:hover {
text-shadow:0 0 5px #cc65ff;
}
i {
color:#8b008b;
color:#fff;
}

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

/* 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 {
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;
right:50%;
height:33%;
bottom:1%;
}
#statusbox {
z-index:2;
top:1%;
right:7%;
height:15%;
width:30%;
text-align:right;
}
#statusbox img {
height:22.5%;
}
#mana {
display:inline-block;
position:relative;
right:0;
height:20%;
width:35%;
border-radius:15%;
}
#mana::after {
content:"";
display:block;
height:100%;
border-radius:15%;
}
#musicbox {
position:relative;
}
#nav-gallery {
z-index:4;
right:5%;
top:29%;
height:49%;
}
#nav-gallery label {
display:block;
position:relative;
height:18%;
padding:8%;
border-radius:0 100%;
}
#nav-gallery label img {
height:100%;
}
.mugshot, #sprite, #nav-tabs label img {
transform:translateX(50%);
-o-transform:translateX(50%);
-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
}
.mugshot {
top:18%;
height:68%;
right:24%;
border-radius:50% 0;
}
#nav-tabs {
z-index:4;
top:4%;
left:6%;
height:92%;
width:32%;
}
#nav-tabs label {
z-index:4;
display:block;
position:relative;
width:26%;
margin-bottom:10px;
text-align:center;
}
#nav-tabs label:first-of-type {
height:7.2vw;
width:7.2vw;
border-radius:0 50%;
}
#nav-tabs label:not(:first-of-type) {
overflow:hidden;
}
#nav-tabs label img {
position:absolute;
top:7.5%;
height:85%;
right:50%;
}
.infobox {
position:absolute;
top:5.5vw;
bottom:0;
left:27%;
width:60%;
padding:5%;
overflow-y:auto;
}
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,
#g5:checked ~ #p5,
#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=Oregano|Seaweed+Script" 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://static.tumblr.com/3e5b6519040cf1d2aa5902211d6e2fe2/mqlm9ry/ZsIn3lbq2/tumblr_static_tumblr_mhl54ehxju1rfjowdo1_500.gif" id="sprite"/>


<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"/>
<br/><div id="mana"></div>
<br/>
<div id="musicbox">
<div id="m-button"></div>
<audio controls controlsList="nodownload">
<source src="http://zeldauniverse.s3.amazonaws.com/soundtracks/skywardswordost/256%20Zelda's%20Theme.mp3" type="audio/mpeg">
</audio>
</div>
</div>


<div id="nav-gallery">
<label for="g1"><img src="http://vignette4.wikia.nocookie.net/zelda/images/5/5e/Light_Medallion.png/revision/latest?cb=20091009210212"/></label>
<label for="g2"><img src="http://vignette2.wikia.nocookie.net/zelda/images/f/f2/Forest_Medallion.png/revision/latest?cb=20091009210218="/></label>
<label for="g3"><img src="http://vignette4.wikia.nocookie.net/zelda/images/b/b7/Fire_Medallion.png/revision/latest?cb=20091009210223"/></label>
<label for="g4"><img src="http://vignette4.wikia.nocookie.net/zelda/images/3/3a/Water_Medallion.png/revision/latest?cb=20091009210229"/></label>
<label for="g5"><img src="http://vignette2.wikia.nocookie.net/zelda/images/a/a0/Shadow_Medallion.png/revision/latest?cb=20091009210235"/></label>
<label for="gdefault"><img src="https://static.memrise.com/uploads/things/images/29669591_140410_1951_33.png"/></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" id="g5"/>
<input type="radio" name="gallery" checked="checked" id="gdefault"/>

<img src="http://vignette3.wikia.nocookie.net/zelda/images/0/03/Zelda_2_HW.png/revision/latest?cb=20140629223931&path-prefix=fr" class="mugshot" id="pdefault" alt=""/>
<img src="https://i.pinimg.com/236x/c0/72/c5/c072c5a80909681ae765e3b3ea26911f.jpg" class="mugshot" id="p1" alt=""/>
<img src="http://orig08.deviantart.net/2683/f/2014/318/2/8/ssbpc___zelda__ocarina_of_time__by_machriderz-d86fngu.png" class="mugshot" id="p2" alt=""/>
<img src="" class="mugshot" id="p3" alt=""/>
<img src="" class="mugshot"  id="p4" alt=""/>
<img src="" class="mugshot"  id="p5" alt=""/>


<div id="nav-tabs">
<input type="radio" name="tabs" checked="checked" id="t1"/>
<label for="t1"><img src="http://zeldawiki.org/images/thumb/3/34/Goddess's_Harp.png/120px-Goddess's_Harp.png"/></label>
<input type="radio" name="tabs" id="t2"/>
<label for="t2">About</label>
<input type="radio" name="tabs" id="t3"/>
<label for="t3">Abilities</label>
<input type="radio" name="tabs" id="t4"/>
<label for="t4">OOC</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/fukase" target="_blank" title="GS#04">
<img src="https://i.imgur.com/vYjZ0OD.png" id="credit"/>
</a>