GS#15 EBF - NoLegs

GS#15HTC: EBF - NoLegs

CSS

/* Last Update: 11/30/19 */

/* PAGE BACKGROUNDS AND FONTS */
body::before {
background:url('https://dl.dropbox.com/s/k3sm7frhk6212x7/kisspng-cartoon-meadow-green-plants.png') no-repeat center bottom / 100% auto fixed;
}
body {
background:radial-gradient(circle at top left,#ff0 2%,#87ceeb 16%) center / cover fixed;
background:-o-radial-gradient(top left,circle,#ff0 2%,#87ceeb 16%) center / cover fixed;
background:-moz-radial-gradient(top left,circle,#ff0 2%,#87ceeb 16%) center / cover fixed;
background:-webkit-radial-gradient(top left,circle,#ff0 2%,#87ceeb 16%) center / cover fixed;
font-family:'Permanent Marker',cursive;
}
#abilities {
font-family:cursive;
}
#navbar label:first-of-type::before {
background-image:url('https://dl.dropbox.com/s/4bma0tt31ze1ql1/EBF-cat-1.png');
}
#navbar label:nth-of-type(2)::before {
background-image:url('https://dl.dropbox.com/s/3e0j98dr3w9t0zv/EBF-cat-2.png');
}
#navbar label:nth-of-type(3)::before {
background-image:url('https://dl.dropbox.com/s/nd56196fdm4dtat/EBF-cat-3.png');
}
#navbar label:last-of-type::before {
background-image:url('https://dl.dropbox.com/s/iiaml29d8d6rfva/EBF-cat-4.png');
}

/* MAIN DISPLAY COLORS */
.color, #infobox::after, #navbar label {
border:8px solid #56361c;
border-radius:2px;
background:#6b4423;
box-shadow:0 0 2px #000;
color:#111;
text-shadow:0 0 1px #111;
}
#abilities {
filter:drop-shadow(0 0 2px #000);
-webkit-filter:drop-shadow(0 0 2px #000);
}
.ability-box, #exit { 
background:radial-gradient(circle at top left,#4ca4fd,#045edf);
background:-o-radial-gradient(top left,circle,#4ca4fd,#045edf);
background:-moz-radial-gradient(top left,circle,#4ca4fd,#045edf);
background:-webkit-radial-gradient(top left,circle,#4ca4fd,#045edf);
border-radius:6px;
border:6px solid #fff;
box-shadow:0 0 3px inset #000;
color:#fff;
text-shadow:2px 2px 1px #000;
}
.ability-box::before { 
border-right:24px solid #fff;
}
#exit {
color:#f00;
}
a {
color:#eee;
}
a:hover, label:hover, #exit:hover {
color:#aaa;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb {
background-color:#111;
border-radius:8px;
box-shadow:0 0 1px #111;
}
#abilities ::-webkit-scrollbar-thumb {
background-color:#fff;
box-shadow:0 2px 1px #000;
}

/* TRANSITION SPEED */
#navbar label::before, .tab {
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}

/* CSS MEAT */
body::before {
content:"";
position:fixed;
top:0;
bottom:0;
height:100%;
width:100%;
}
#profile {
position:fixed;
left:0;
top:0;
height:100vh;
width:40vw;
}
#mugshot {
z-index:2;
position:absolute;
bottom:50%;
right:-5%;
height:36%;
}
#infobox {
position:absolute;
top:52%;
bottom:0;
width:100%;
}
#infobox::after, #navbar label::before,
.ability-box::before {
content:"";
z-index:-1;
position:absolute;
}
#infobox::after {
top:-10%;
margin:-14px -8px;
height:10%;
width:100%;
border-bottom:none;
}
#navbar {
z-index:3;
position:absolute;
height:13%;
width:100%;
bottom:48%;
padding:0 8px;
margin-bottom:-1px;
}
#navbar label {
position:absolute;
bottom:0;
height:90%;
width:15%;
}
#navbar label::before {
top:0;
height:100%;
width:100%;
background:no-repeat center / contain;
}
#navbar label:hover::before {
top:-100%;
}
#navbar label:first-of-type {
left:0;
}
#navbar label:nth-of-type(2) {
left:29%;
margin:0 -8px;
}
#navbar label:nth-of-type(3) {
right:29%;
margin:0 -8px;
}
#navbar label:last-of-type {
right:0;
}
label {
cursor:pointer;
}
input {
display:none;
}
.tab {
z-index:1;
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
overflow-y:auto;
opacity:0;
}
input:checked + .tab,
input:checked + .ability-box,
input:checked ~ #exit {
z-index:2;
opacity:1;
}
#abilities {
position:fixed;
top:5vh;
left:47vw;
height:42vh;
width:470px;
}
.ability-box {
z-index:1;
display:block;
position:absolute;
height:94%;
width:200px;
top:0;
right:0;
padding:0.5vh 3px;
opacity:0;
}
.ability-box > div {
display:block;
height:100%;
overflow-y:auto;
}
.ability-box:first-of-type {
left:0;
opacity:1;
}
.ability-box label {
display:block;
font-size:3.4vh;
line-height:10vh;
white-space:nowrap;
cursor:pointer;
}
.ability-box::before {
height:0;
width:0;
top:50%;
right:0;
margin:-10px 100%;
border-left:none;
border-top:14px solid transparent;
border-bottom:14px solid transparent;
}
#a1 + .ability-box::before {
top:12.5%;
}
#a2 + .ability-box::before {
top:37.5%;
}
#a3 + .ability-box::before {
top:61.5%;
}
#a4 + .ability-box::before {
top:86.5%;
}
#exit {
z-index:3;
position:absolute;
top:-1.5vh;
right:-1.5vh;
margin:-1px -5px;
font-size:3vh;
padding:2px 10px;
border-radius:100%;
opacity:0;
}
.ability, p {
text-indent:5%;
}

/* MOBILE COMPATIBILITY */
@media only screen and (orientation:portrait) {
	#profile {
	width:90vw;
	}
	#abilities {
	display:none;
	}
}

#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

<div id="profile">
<img src="https://pre00.deviantart.net/fe68/th/pre/i/2016/360/e/b/nolegs_the_cat_by_james3363-da6hzpw.png" id="mugshot"/>

<div id="abilities">
<div class="ability-box">
<label for="a1">Ability One</label>
<label for="a2">Ability Two</label>
<label for="a3">Ability Three</label>
<label for="a4">Ability Four</label>
</div>

<input type="radio" name="ability" id="a1"/>
<div class="ability-box"><div>
Description for ability.
<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>
<input type="radio" name="ability" id="a2"/>
<div class="ability-box"><div>
Description for ability.
</div></div>
<input type="radio" name="ability" id="a3"/>
<div class="ability-box"><div>
Description for ability.
</div></div>
<input type="radio" name="ability" id="a4"/>
<div class="ability-box"><div>
Description for ability.
</div></div>

<label for="reset" id="exit">X</label>
<input type="radio" name="ability" id="reset"/>
</div>

<div id="navbar">
<label for="01"> </label>
<label for="02"> </label>
<label for="03"> </label>
<label for="04"> </label>
</div>

<div class="color" id="infobox">
<input checked="checked" type="radio" name="selection" id="01"/>
<div class="tab">
<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>

<input type="radio" name="selection" id="02"/>
<div class="tab">
<h2>Stats</h2>
<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
</div>

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

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

<a href="http://wix.mirza-works.com/" target="_blank" title="GS#15">
<img src="https://dl.dropboxusercontent.com/s/wdgda69ofyw8f2m/mirza_small.png" id="credit"/>
</a>