CC#11 Kingdom Hearts I

GS#11ATS: Kingdom Hearts I - Menus

CSS

/* Last Update: 09/24/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#000 url('https://vignette.wikia.nocookie.net/kingdomheartsfanfiction/images/5/50/Destiny_islands_by_o0demonboy0o-d4oe237.png/revision/latest?cb=20150302143959') center / cover fixed;
font-family:'Changa',sans-serif;
line-height:150%;
}
body::before {
background:repeating-linear-gradient(#000,rgba(0,0,0,0.7),#000 1.2vh);
background:-o-repeating-linear-gradient(#000,rgba(0,0,0,0.7),#000 1.2vh);
background:-moz-repeating-linear-gradient(#000,rgba(0,0,0,0.7),#000 1.2vh);
background:-webkit-repeating-linear-gradient(#000,rgba(0,0,0,0.7),#000 1.2vh);
opacity:0.8;
}

/* MAIN DISPLAY COLORS - NORMAL */
.color, .equip-item h2, .equip-item p {
background:linear-gradient(#111,#131339);
background:-o-linear-gradient(#111,#131339);
background:-moz-linear-gradient(#111,#131339);
background:-webkit-linear-gradient(#111,#131339);
border:2px solid #514bdf;
color:#fff;
}
#navbar a::before {
background:radial-gradient(100% 100% at left,#514bdf,transparent);
}
#navbar a::after {
background:radial-gradient(100% 100% at right,#514bdf,transparent);
}
.char h3 {
background:#131339;
}
.char h3::before,
#lvl span {
border-right:2px solid #514bdf;
}
#lvl {
background:rgba(0,0,0,0.7);
}
#lvl .stat:nth-child(1) {		/* LVL */
color:#9db41c;
}
#lvl .stat:nth-child(2) {		/* HP */
color:#628c2a;
}
#lvl .stat:nth-child(3) {		/* MP */
color:#658db1;
}
a {
color:#514bdf;
}

/* MAIN DISPLAY COLORS - HOVER */
.color:hover, .color:hover .color,
.color:hover .equip-item h2,
.color:hover .equip-item p,
a:hover > .color {
background:linear-gradient(#111,#480d07);
background:-o-linear-gradient(#111,#480d07);
background:-moz-linear-gradient(#111,#480d07);
background:-webkit-linear-gradient(#111,#480d07);
border:2px solid #b43723;
}
#navbar a:hover::before,
#navbar a:hover::after {
background:#b43723;
}
.color:hover .char h3 {
background:#480d07;
}
.color:hover .char h3::before,
.color:hover #lvl span {
border-right:2px solid #b43723;
}
a:hover .color::after {
background:#cad145;
border:0.1vw solid #e3da8f;
box-shadow:0 0 1vw #e3da8f,
	0 0 1vw #e3da8f,
	0 0 1vw #e3da8f;
}
.color:hover a {
color:#b43723;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:transparent;
border-radius:5px;
}
::-webkit-scrollbar-thumb {
background-color:#fff;
border-radius:5px;
}

/* ANIMATIONS */
@keyframes circle {
0,100% {margin:0 -5%;}
12.5% {margin:1% -1%;}
25% {margin:5% 0;}
50% {margin:10% -5%;}
62.5% {margin:9% -9%;}
75% {margin:5% -10%;}
}
@-o-keyframes circle {
0,100% {margin:0 -5%;}
12.5% {margin:1% -1%;}
25% {margin:5% 0;}
50% {margin:10% -5%;}
62.5% {margin:9% -9%;}
75% {margin:5% -10%;}
}
@-moz-keyframes circle {
0,100% {margin:0 -5%;}
12.5% {margin:1% -1%;}
25% {margin:5% 0;}
50% {margin:10% -5%;}
62.5% {margin:9% -9%;}
75% {margin:5% -10%;}
}
@-webkit-keyframes circle {
0,100% {margin:0 -5%;}
12.5% {margin:1% -1%;}
25% {margin:5% 0;}
50% {margin:10% -5%;}
62.5% {margin:9% -9%;}
75% {margin:5% -10%;}
}

/* OUTER CSS MEAT */
body::before {
content:"";
position:fixed;
top:0;
left:0;
height:100vh;
width:100vw;
}
#mugshot {
position:fixed;
top:0;
left:0;
height:100vh;
}
#profile {
position:fixed;
top:5vh;
right:1vw;
height:90vh;
width:600px;
max-width:98vw;
}
#navbar, #obox {
position:absolute;
top:0;
bottom:51%;
}
#navbar {
left:0;
width:42%;
font-size:2.8vh;
}
#infobox, #obox {
right:0;
padding:2vh 1vw;
border-radius:25px;
overflow:hidden;
opacity:0.8;
}
#infobox:hover, #obox:hover,
#navbar a:hover {
opacity:1;
}
#obox {
left:42%;
}
#infobox {
position:absolute;
top:51%;
bottom:0;
left:0;
}
#navbar a,
#navbar a div,
.tab {
display:block;
position:relative;
}
#navbar a {
top:25%;
padding:2% 0;
opacity:0.8;
transform:translateY(-100%);
-o-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
}
#navbar a div {
z-index:2;
margin:0 14%;
padding:1% 8%;
border-radius:25px;
}
#navbar a::after,
#navbar a::before,
#navbar a div::after {
content:"";
position:absolute;
}
#navbar a::after,
#navbar a::before {
z-index:1;
top:45%;
width:14%;
height:10%;
}
#navbar a::after {
left:0;
border-radius:5px 0 0 5px;
}
#navbar a::before {
right:0;
border-radius:0 5px 5px 0;
}
#navbar a:hover div::after {
top:-25%;
left:100%;
height:4px;
width:4px;
border-radius:100%;
animation:circle 4s linear infinite;
-o-animation:circle 4s linear infinite;
-moz-animation:circle 4s linear infinite;
-webkit-animation:circle 4s linear infinite;
}
.tab {
z-index:1;
height:100%;
overflow-y:auto;
}

/* INNER CSS MEAT */
#main, .equip-item, .ability  {
display:block;
position:relative;
width:auto;
margin:10px 12.5%;
overflow:hidden;
}
.char {
margin:10px;
width:28%;
}
.char, .equip-item img, .ability img {
display:inline-block;
position:relative;
vertical-align:middle;
}
#main h3 {
border-top:none !important;
}
.char h3 {
border-left:none !important;
border-right:none !important;
}
.char img, .char h3, .char p,
.equip-item h2, .equip-item p {
display:block;
position:relative;
margin:0;
}
.char h3::before {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
}
.half {
display:inline-block;
width:50%;
}
.half:last-of-type {
float:right;
}
.stat {
display:block;
text-align:right;
padding:0 4px;
}
.stat span {
float:left;
text-align:left;
font-weight:bold;
}
#main #lvl {
border-left:none;
border-top:none;
}
.char h3::before,
#lvl span {
width:28px;
text-align:center;
}
#lvl .stat {
padding-left:0;
}
.equip-item h2 {
border-radius:25px 25px 0 0;
text-align:right;
overflow:hidden;
}
.equip-item h2,
.char h3 {
padding:8px;
}
.equip-item img {
float:left;
height:8vh;
}
.equip-item p {
padding:15px;
border-radius:0 0 25px 25px;
border-top:none !important;
}
.ability {
padding:10px;
border-radius:50px;
text-align:left;
}
.ability img {
height:4vh;
margin-right:5%;
}
h1 {
margin-bottom:0;
}
h2, h3 {
text-align:center;
}
a {
text-decoration:none;
}
p {
text-indent:5%;
}
.color > img {
max-width:100%;
}

/* MOBILE COMPATIBILITY CSS */
@media only screen and (orientation:portrait) {
	#infobox, #obox, #navbar a {
		opacity:0.5;
	}
}

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

HTML

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

<img src="https://www.khwiki.com/images/thumb/a/ad/Data-Sora_KHREC.png/1200px-Data-Sora_KHREC.png" alt="" id="mugshot"/>

<div id="profile">
<div id="navbar">
<a target="_self" href="#01"><div class="color">Stats</div></a>
<a target="_self" href="#02"><div class="color">About</div></a>
<a target="_self" href="#03"><div class="color">Equipment</div></a>
<a target="_self" href="#04"><div class="color">Abilites</div></a>
<a target="_self" href="#05"><div class="color">Items</div></a>
<a target="_self" href="#06"><div class="color">Party Members</div></a>
</div>

<div class="color" id="obox">
<div class="tab">
<h1>OOC</h1>
<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 class="color"  id="infobox">
<div class="tab" style="overflow:hidden;">
<div class="tab" id="01">
<h1>Stats</h1>

<div class="char color" id="main">
<h3 class="color">Sora</h3>
<div class="half">
<div class="color" id="lvl">
	<div class="stat"><span>LV</span>27</div>
	<div class="stat"><span>HP</span>20/32</div>
	<div class="stat"><span>MP</span>1/4</div>
</div>
<div class="stat"><span>Species:</span> Stat here</div>
<div class="stat"><span>Gender:</span> Stat here</div>
<div class="stat"><span>Age:</span> Stat here</div>
</div>
<div class="half">
<div class="stat" style="margin-top:2px;"><span>Hair:</span> Stat here</div>
<div class="stat"><span>Eyes:</span> Stat here</div>
<div class="stat"><span>Height:</span> Stat here</div>
<div class="stat"><span>Weight:</span> Stat here</div>
<div class="stat"><span>Build:</span> Stat here</div>
<div class="stat"><span>Orientation:</span> Stat here</div>
</div>
</div>

</div>


<div class="tab" id="02">
<h1>About</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>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>


<div class="tab" id="03">
<h1>Equip</h1>
<div class="equip-item">
<h2>
<img src="https://www.khwiki.com/images/thumb/3/30/Kingdom_Key_KH.png/235px-Kingdom_Key_KH.png"/>
Kingdom Key
</h2>
<p>
The key chain attached draws out the Keyblade's true form and power.
</p>
</div>

<div class="equip-item">
<h2>
<img src="https://vignette.wikia.nocookie.net/kingdomhearts/images/e/ec/Ribbon_KHII.png/revision/latest?cb=20110820015854"/>
Ribbon
</h2>
<p>
Reduces all elemental damage by 20%. Equip more to boost effect.
</p>
</div>
</div>


<div class="tab" id="04">
<h1>Abilties</h1>
<h3 class="ability color">
<img src="https://dl.dropbox.com/s/ocu6zdyjesafr34/kh-ability-equipped.png"/>
Dodge Roll
</h3>

<h3 class="ability color">
<img src="https://dl.dropbox.com/s/xrznbaa29hkjsuo/kh-ability-unequipped.png"/>
EXP Zero
</h3>
</div>


<div class="tab" id="05">
<h1>Items</h1>
<div class="equip-item">
<h2>
<img src="https://vignette.wikia.nocookie.net/kingdomhearts/images/7/7a/Potion.png/revision/latest?cb=20130722092751"/>
Potion
</h2>
<p>
Restores some health.
</p>
</div>
</div>

<div class="tab" id="06">
<h1>Party</h1>
<a href="" target="_blank" class="char color">
<img src="https://vignette.wikia.nocookie.net/kingdomhearts/images/7/75/Donald_Duck_KH3.png/revision/latest/scale-to-width-down/250?cb=20181214004256" alt=""/>
<h3  class="color">Donald</h3>
<div id="lvl">
	<div class="stat"><span>LV</span>25</div>
	<div class="stat"><span>HP</span>12/29</div>
	<div class="stat"><span>MP</span>0/6</div>
</div>
</a>

<a href="" target="_blank" class="char color">
<img src="https://vignette.wikia.nocookie.net/kingdomhearts/images/7/73/Goofy_KH3.png/revision/latest/scale-to-width-down/250?cb=20181214004524" alt=""/>
<h3  class="color">Goofy</h3>
<div id="lvl">
	<div class="stat"><span>LV</span>27</div>
	<div class="stat"><span>HP</span>39/40</div>
	<div class="stat"><span>MP</span>1/1</div>
</div>
</a>
</div>

</div>
</div>

</div>

<a href="https://tinyurl.com/fukase" target="_blank" title="GS#11">
<img src="https://dl.dropboxusercontent.com/s/qghc6relnx6ewmx/small-credit.png" id="credit"/>
</a>