RC#16 Holy Grounds

RC#16MTI: Holy Grounds

CSS

/* Last Update: 07/19/20 */

/* PAGE BACKGROUND AND FONTS */
body {
background:#262e2c fixed;
background-image:linear-gradient(to right,transparent, #eefae1 18%, transparent);
background-image:-o-linear-gradient(left,transparent, #eefae1 18%, transparent);
background-image:-moz-linear-gradient(left,transparent, #eefae1 18%, transparent);
background-image:-webkit-linear-gradient(left,transparent, #eefae1 18%, transparent);
color:#eefae1;
text-shadow:1px 1px 5px #ccc;
font-family:'Fresca';
}
body::after {
content:"";
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background:url('https://dl.dropbox.com/s/zbqe5moxfkhbbb7/snow.png');
}
label, a {
font-family:'MedievalSharp';
}
h1, h2 {
font-family:'Dancing Script';
}

/* MAIN DISPLAY COLORS AND IMAGE */
#mugshot {
box-shadow:0 0 20px #000;
box-shadow:0 0 20px #000,
		0 0 20px inset #000;
background:url("https://dl.dropbox.com/s/khm1dgd38glgfhn/rocky-wall.png") center / contain,

	content-box url('MAIN IMAGE URL HERE') top center / cover,

	#262e2c;
}
#navbar label {
background:#262e2c;
box-shadow:2px 2px 10px #eefae1;
}
label, a {
text-decoration:none;
text-shadow:1px 1px 2px #000;
color:#803b2d;
}
label:hover {
text-shadow:0 1px 1px #000;
}
a:hover {
text-shadow:1px 1px 5px #ccc;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background:transparent;
}
::-webkit-scrollbar-thumb {
background:#eefae1;
box-shadow:2px 2px 10px #eefae1;
border-radius:8px;
}

/* CSS MEAT */
#mugshot {
z-index:2;
position:fixed;
bottom:0;
right:65%;
height:84%;
width:30%;
border:solid transparent;
border-width:40px 20px 0 20px;
border-radius:50% 50% 0 0;
overflow:hidden;
animation:rise 2.6s ease-out;
-o-animation:rise 2.6s ease-out;
-moz-animation:rise 2.6s ease-out;
-webkit-animation:rise 2.6s ease-out;
}
#navbar {
z-index:1;
position:fixed;
top:25%;
left:33%;
height:50%;
width:25%;
text-align:center;
font-weight:bold;
}
#navbar label {
display:inline-block;
position:absolute;
width:90%;
padding:10px 0;
margin:-4px 0;
font-size:30px;
line-height:40px;
border-radius:100% 0;
animation:unfurl 5s;
-o-animation:unfurl 5s;
-moz-animation:unfurl 5s;
-webkit-animation:unfurl 5s;
}
#navbar label:first-child {
top:-12%;
left:-7%;
transform:rotateZ(-25deg);
-o-transform:rotateZ(-25deg);
-moz-transform:rotateZ(-25deg);
-webkit-transform:rotateZ(-25deg);
}
#navbar label:nth-child(2) {
top:5%;
left:0;
transform:rotateZ(-12deg);
-o-transform:rotateZ(-12deg);
-moz-transform:rotateZ(-12deg);
-webkit-transform:rotateZ(-12deg);
}
#navbar label:nth-child(3) {
top:21%;
left:4%;
transform:rotateZ(-5deg);
-o-transform:rotateZ(-5deg);
-moz-transform:rotateZ(-5deg);
-webkit-transform:rotateZ(-5deg);
}
#navbar label:nth-child(4) {
top:36%;
left:6%;
transform:rotateZ(-2deg);
-o-transform:rotateZ(-2deg);
-moz-transform:rotateZ(-2deg);
-webkit-transform:rotateZ(-2deg);
}
#navbar label:nth-child(5) {
top:51%;
left:6.5%;
}
#navbar label:nth-child(6) {
top:66%;
left:6.5%;
transform:rotateZ(6deg);
-o-transform:rotateZ(6deg);
-moz-transform:rotateZ(6deg);
-webkit-transform:rotateZ(6deg);
}
.tab {
z-index:3;
position:fixed;
top:-20%;
left:60%;
max-height:100%;
width:35%;
text-align:center;
overflow-y:auto;
opacity:0;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transition:2s;
-o-transition:2s;
-moz-transition:2s;
-webkit-transition:2s;
}
input:checked + .tab {
z-index:4;
top:50%;
opacity:1;
}
input {
display:none;
}
label {
cursor:pointer;
}
h1::before, h1::after {
content:"~";
margin:0 4px;
}
.tab img {
width:96%;
}
#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://dl.dropbox.com/s/tpswky6xvixh8aa/rc16-animation.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fresca&family=MedievalSharp&family=Dancing+Script" rel="stylesheet">

<div id="mugshot"> </div>
<input type="radio" name="selection" id="00"/>

<div id="navbar">
<label for="01">Stats</label>
<label for="02">History</label>
<label for="03">Equipment</label>
<label for="04">Gallery</label>
<label for="05">OOC</label>
<label for="00">Reset</label>
</div>

<input type="radio" name="selection" id="01"/>
<div class="tab">
<h1>Full Name</h1>
<big>Nicknames: Stat
<br/>Species: Stat
<br/>Gender: Female
<br/>Age: Stat
<br/>Height: Stat
<br/>Hair: Stat
<br/>Eyes: Stat
<br/>Orientation: Stat
<br/>Build: Stat</big>
</div>

<input type="radio" name="selection" id="02"/>
<div class="tab">
<h1>History</h1>
<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="selection" id="03"/>
<div class="tab">
<h1>Equipment</h1>
<h3>Clothes</h3>
<p>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
 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>
<h3>Weapon</h3>
<p>
Information and stuffity stuff stuff stufff. More stuuuufff. AND. MORE STUFF! Bippity boop bop biddly beep squap.
</p>
</div>

<input type="radio" name="selection" id="04"/>
<div class="tab">
<h1>Gallery</h1>
<img src="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg"/>
<img src="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg"/>
</div>

<input type="radio" name="selection" id="05"/>
<div class="tab">
<h1>OOC</h1>
<ol>
<li>Bullet one.</li>
<li>Bullet two.</li>
<li>Bullet three.</li>
<li>Bullet four.</li>
<li>Bullet five.</li>
<li>Bullet six.</li>
</ol>
</div>

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