GS#10 Grinn's Tale

GS#10ATS: Grinn's Tale

CSS

/* Last Update: 01/10/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#000 url() center fixed;
color:#fff;
text-align:center;
font-family:sans-serif;
}
#close, h2 {
font-family:serif;
}

/* MAIN DISPLAY COLORS */
label, .dbox {
background-color:#cfb380;
border:1.5vmin solid #cca264;
box-shadow:0 0 0 0.8vmin #966333;
}
label:hover {
filter:drop-shadow(0 2px 7px #faebd7);
-webkit-filter:drop-shadow(0 2px 7px #faebd7);
}
.inventory label h4, .dbox h3 {
background-color:rgba(87,47,17,0.6);
}
.dbox img {
background:radial-gradient(#faebd7,transparent 70%);
background:-o-radial-gradient(#faebd7,transparent 70%);
background:-moz-radial-gradient(#faebd7,transparent 70%);
background:-webkit-radial-gradient(#faebd7,transparent 70%);
}
#close {
border:0.6vmin solid #cfb380;
background-color:#a31e12;
color:#000;
}
h2 {
text-shadow:0 0 50px #fff;
}
a {
background-color:#32cd32;
color:#fff;
}
a:hover {
background-color:#808080;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#fff;
border-radius:4px;
}
::-webkit-scrollbar-thumb {
background-color:#cfb380;
}
.dbox > div::-webkit-scrollbar-thumb {
background-color:#966333;
}

/* CSS MEAT */
.tab {
z-index:1;
position:fixed;
top:5%;
left:22.5%;
height:72.5%;
width:55%;
overflow-y:auto;
opacity:0;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
input:checked + .tab {
z-index:2;
opacity:1;
}
#statbox, #obox {
z-index:4;
position:absolute;
top:50%;
width:50%;
max-height:100%;
overflow-y:auto;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
.mugshot {
z-index:3;
position:absolute;
top:0;
height:100%;
}
#statbox, .left {
left:0;
}
#obox, .right {
right:0;
}
.inventory {
z-index:5;
position:fixed;
top:12.5vh;
height:auto;
width:38.4vmin;
}
.inventory.left {
left:2.5%;
}
.inventory.right {
right:2.5%;
}
#navbar {
z-index:6;
position:fixed;
bottom:0;
left:50%;
height:23%;
width:96vmin;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.inventory h2 {
font-size:3.8vmin;
margin-top:0;
}
label {
display:inline-block;
position:relative;
height:11.5vmin;
width:11.5vmin;
margin:1.5vmin;
border-radius:100%;
}
input {
display:none;
}
label {
cursor:pointer;
}
h2, #navbar label h4 {
font-style:italic;
transform:rotateZ(-20deg);
-o-transform:rotateZ(-20deg);
-moz-transform:rotateZ(-20deg);
-webkit-transform:rotateZ(-20deg);
}
label h4 {
z-index:2;
position:absolute;
left:-10%;
width:120%;
margin:0;
transform-origin:0 0;
-o-transform-origin:0 0;
-moz-transform-origin:0 0;
-webkit-transform-origin:0 0;
}
.inventory label h4 {
top:-1.2vmin;
font-size:2vmin;
height:4.8vmin;
transform:skewY(-10deg);
-o-transform:skewY(-10deg);
-moz-transform:skewY(-10deg);
-webkit-transform:skewY(-10deg);
}
#navbar label h4 {
top:143%;
}
label img {
z-index:1;
position:absolute;
height:13vmin;
}
label img, .dbox {
top:50%;
left:50%;
transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
}
.dbox {
z-index:7;
display:none;
position:fixed;
height:42%;
width:30%;
overflow:hidden;
}
.dbox img {
display:inline-block;
height:45%;
margin-top:2%;
}
.dbox h3 {
z-index:2;
position:relative;
width:80%;
margin:0 auto;
padding:5px 0;
transform:skew(-10deg,-5deg);
-o-transform:skew(-10deg,-5deg);
-moz-transform:skew(-10deg,-5deg);
-webkit-transform:skew(-10deg,-5deg);
}
.dbox > div {
z-index:1;
position:absolute;
top:55%;
bottom:0;
margin-top:30px;
text-indent:5%;
padding:2%;
overflow:auto;
}
input:checked + .dbox,
input[name="description"]:checked ~ #close {
display:block;
}
#close {
z-index:8;
display:none;
position:absolute;
top:27%;
left:34%;
height:6vmin;
width:6vmin;
margin:-3.3vmin;
font-size:6vmin;
line-height:6vmin;
font-weight:bold;
}
.tab a, .dbox a {
padding:2px;
text-decoration:none;
border-radius:5px;
}
.tab img {
max-height:100%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0;
background-color:#fff;
border-radius:5px;
}

HTML

<div id="navbar">
<label for="01"><h4>Stats</h4><img src="https://gbf.wiki/images/4/40/Npc_sd_3030159000_01.png"/></label>
<label for="02"><h4>OOC</h4><img src="https://gbf.wiki/images/4/40/Npc_sd_3030159000_01.png"/></label>
<label for="03"><h4>Personality</h4><img src="https://gbf.wiki/images/4/40/Npc_sd_3030159000_01.png"/></label>
<label for="04"><h4>History</h4><img src="https://gbf.wiki/images/4/40/Npc_sd_3030159000_01.png"/></label>
<label for="05"><h4>Abilities</h4><img src="https://gbf.wiki/images/4/40/Npc_sd_3030159000_01.png"/></label>
</div>

<input checked="checked" type="radio" name="tab-select" id="01"/>
<div class="tab" style="overflow:hidden;">
<div id="statbox">
<h3>LEVEL 10</h3>
<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>
</div>
<img src="https://vignette4.wikia.nocookie.net/granblue/images/e/e5/JessicaSR_A.png/revision/latest?cb=20161014104451" class="mugshot right" alt=""/>
</div>

<input type="radio" name="tab-select" id="02"/>
<div class="tab" style="overflow:hidden;">
<img src="https://vignette4.wikia.nocookie.net/granblue/images/7/70/Jessica_A.png/revision/latest?cb=20160913191143" class="mugshot left" alt=""/>
<div id="obox">
<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>

<input type="radio" name="tab-select" id="03"/>
<div class="tab">
<h2>Personality</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>
<p>
Paragraph two.
</p>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>

<input type="radio" name="tab-select" id="04"/>
<div class="tab">
<h2>History</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>
<p>
Paragraph two.
</p>
</div>

<input type="radio" name="tab-select" id="05"/>
<div class="tab">
<h2>Abilities</h2>
<h3>Ability one.</h3>
<p>
Description here.
</p>
<h3>Ability two.</h3>
<p>
Description here.
</p>
<h3>Ability three.</h3>
<p>
Description here.
</p>
</div>


<!--	EQUIPMENT ITEMS AND INVENTORY LINKS AND BOX DESCRIPTIONS BELOW	-->

<div class="left inventory">
<h2>Equipped<br/>Items</h2>
<label for="e1"><h4>Sword</h4><img src="http://www.freeiconspng.com/uploads/sword-icon-5.png"/></label>
<label for="e2"><h4>Bow</h4><img src="http://www.free-icons-download.net/images/bow-icon-85760.png"/></label>
<br/>
<label for="e3"><h4>Shield</h4><img src="http://www.freeiconspng.com/uploads/shield-png-4.png"/></label>
<label for="e4"><h4>Helmet</h4><img src="https://cdn4.iconfinder.com/data/icons/video-game-items-concepts/128/armor-helmet-512.png"/></label>
<br/>
<label for="e5"><h4>Armor</h4><img src="http://icon-icons.com/icons2/390/PNG/512/armor-vest_38469.png"/></label>
<label for="e6"><h4>Accessory</h4><img src="https://cdn4.iconfinder.com/data/icons/video-game-items-concepts/128/jewellery-ring-512.png"/></label>
</div>

<div class="right inventory">
<h2>Inventory</h2>
<label for="i1"><h4>Potion</h4><img src="http://www.freeiconspng.com/uploads/potion-icon-png-4.png"/></label>
<label for="i2"><h4>Gem</h4><img src="http://www.freeiconspng.com/uploads/black-diamond-png-33.png"/></label>
<br/>
<label for="i3"><h4>Potion</h4><img src="http://www.freeiconspng.com/uploads/potion-icon-png-4.png"/></label>
<label for="i4"><h4>Gem</h4><img src="http://www.freeiconspng.com/uploads/black-diamond-png-33.png"/></label>
<br/>
<label for="i5"><h4>Potion</h4><img src="http://www.freeiconspng.com/uploads/potion-icon-png-4.png"/></label>
<label for="i6"><h4>Orb</h4><img src="https://orig10.deviantart.net/aa77/f/2017/210/b/d/orb_by_cera_nore-dbi61wy.png"/></label>
</div>


<input type="radio" name="description" id="e1"/>
<div class="dbox">
<img src="http://www.freeiconspng.com/uploads/sword-icon-5.png"/>
<h3>Sword</h3>
<div>
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.
</div>
</div>

<input type="radio" name="description" id="e2"/>
<div class="dbox">
<img src="http://www.free-icons-download.net/images/bow-icon-85760.png"/>
<h3>Bow</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="e3"/>
<div class="dbox">
<img src="https://www.freeiconspng.com/uploads/shield-png-4.png"/>
<h3>Shield</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="e4"/>
<div class="dbox">
<img src="https://cdn4.iconfinder.com/data/icons/video-game-items-concepts/128/armor-helmet-512.png"/>
<h3>Helmet</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="e5"/>
<div class="dbox">
<img src="https://icon-icons.com/icons2/390/PNG/512/armor-vest_38469.png"/>
<h3>Armor</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="e6"/>
<div class="dbox">
<img src="https://cdn4.iconfinder.com/data/icons/video-game-items-concepts/128/jewellery-ring-512.png"/>
<h3>Accessory</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="i1"/>
<div class="dbox">
<img src="https://www.freeiconspng.com/uploads/potion-icon-png-4.png"/>
<h3>Potion</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="i2"/>
<div class="dbox">
<img src="https://www.freeiconspng.com/uploads/black-diamond-png-33.png"/>
<h3>Gem</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="i3"/>
<div class="dbox">
<img src="https://www.freeiconspng.com/uploads/potion-icon-png-4.png"/>
<h3>Potion</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="i4"/>
<div class="dbox">
<img src="https://www.freeiconspng.com/uploads/black-diamond-png-33.png"/>
<h3>Gem</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="i5"/>
<div class="dbox">
<img src="https://www.freeiconspng.com/uploads/potion-icon-png-4.png"/>
<h3>Potion</h3>
<div>
Description
</div>
</div>

<input type="radio" name="description" id="i6"/>
<div class="dbox">
<img src="https://orig10.deviantart.net/aa77/f/2017/210/b/d/orb_by_cera_nore-dbi61wy.png"/>
<h3>Orb</h3>
<div>
Description.
</div>
</div>

<label for="reset" id="close">X</label>
<input type="radio" name="description" id="reset"/>

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