GS#01 LoZ - Nabooru

VS#01HTS: LoZ - Nabooru

CSS

/* Last Update: 11/30/18 */

/* PAGE BACKGROUND AND FONT */
body {
background:url('http://zeldawiki.org/images/2/22/Old_Gerudo_Symbol.png') no-repeat center fixed,
	#deb887 url('http://www.zeldadungeon.net/wp-content/uploads/2012/04/Gerudos_Fortress.png') no-repeat center fixed;
background-size:45%, cover;
font-family:'Sorts Mill Goudy', serif;
font-size:105%;
}

/* MAIN DISPLAY COLORS */
.color, #gallery img, #mini img, .pop-title {
background-color:rgba(0,0,0,0.8);
color:#b8691a;
}
.color, #gallery img, #mini img {
border:5px solid #000000;
}
#mana {
border:0.7vh 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);
}
h3 {
background:linear-gradient(to right,rgba(0,0,0,0.7),rgba(0,0,0,0));
background:-o-linear-gradient(to right,rgba(0,0,0,0.7),rgba(0,0,0,0));
background:-moz-linear-gradient(to right,rgba(0,0,0,0.7),rgba(0,0,0,0));
background:-webkit-linear-gradient(to right,rgba(0,0,0,0.7),rgba(0,0,0,0));
}
h3 img {
border:3px inset #111111;
}
a {
color:#ff0000;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#1b0f04;
}
::-webkit-scrollbar-thumb {
background-color:#b8691a;
box-shadow:0 0 4px inset #1b0f04;
}

/* CSS MEAT */
#gallery {
position:fixed;
top:20%;
left:5%;
height:75%;
padding:5px 0;
overflow:hidden;
}
#gallery img {
display:block;
position:relative;
top:-5px;
height:100%;
}
#gallery img, .pop-title {
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#navbar {
position:fixed;
height:10%;
top:5%;
left:20%;
text-align:center;
}
#navbar a {
display:inline-block;
position:relative;
height:100%;
}
#navbar img {
height:100%;
}
.pop-title {
position:absolute;
top:50%;
min-width:100%;
padding:3%;
font-size:2.8vh;
line-height:3.8vh;
white-space:nowrap;
opacity:0;
}
#navbar a:hover {
z-index:2;
}
#navbar a:hover .pop-title{
opacity:1;
}
#statusbox {
position:fixed;
top:16%;
bottom:66%;
left:50%;
width:30%;
padding:0.5% 1%;
line-height:3vh;
overflow:hidden;
}
#statusbox h2 {
margin:0;
font-size:4.5vh;
line-height:5vh;
}
#statusbox img {
height:15%;
}
#mana {
height:17%;
width:8%;
border-radius:20%;
}
#mana::after {
content:"";
display:block;
height:100%;
border-radius:15%;
}
#mini {
position:fixed;
top:10%;
left:85%;
height:20%;
}
#mini img {
height:90%;
}
#infobox {
position:fixed;
height:46%;
width:50%;
top:35%;
left:40%;
padding:2%;
}
.tab {
position:relative;
height:100%;
width:100%;
overflow-y:auto;
}
.tab h2 {
text-align:center;
}
#infobox img {
max-height:100%;
}
h3 {
display;block;
position:relative;
height:52px;
padding:0 2.5vw;
margin:0;
font-size:20px;
line-height:52px;
}
h3 img {
display:inline-block;
position:relative;
left:-2.5vw;
height:40px;
padding:3px;
vertical-align:middle;
}
a {
text-decoration:none;
}
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=Sorts+Mill+Goudy" rel="stylesheet">

<div id="gallery">
<img src="https://s-media-cache-ak0.pinimg.com/236x/ab/b6/c6/abb6c6b6bda2dbd79782836768f4d24b.jpg" alt="" id="pdefault"/>
<img src="http://img04.deviantart.net/b834/i/2012/191/a/2/nabooru_sage_of_spirit_by_alamino-d56skcf.jpg" alt="" id="p1"/>
<img src="http://pre04.deviantart.net/d3da/th/pre/i/2011/216/7/9/art_nouveau__nabooru_by_dani_starr18-d44eost.jpg" alt="" id="p2"/>
</div>

<div class="color" id="statusbox">
<h2>Nabooru</h2>
<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"/>
<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"/>
<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"/>
<img src="http://vignette2.wikia.nocookie.net/zelda/images/d/d1/Heart_(Ocarina_of_Time).png/revision/latest?cb=20100115213958"/>
<br/>
<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"/>
<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>
</div>

<div class="color" id="navbar">
<a href="#01">
<div class="pop-title">Basics</div>
<img src="http://vignette3.wikia.nocookie.net/zelda/images/7/75/Spirit_Medallion.png/revision/latest?cb=20091009210203"/>
</a>
<a href="#02">
<div class="pop-title">History</div>
<img src="http://vignette3.wikia.nocookie.net/zelda/images/7/75/Spirit_Medallion.png/revision/latest?cb=20091009210203"/>
</a>
<a href="#03">
<div class="pop-title">Abilities & Equip</div>
<img src="http://vignette3.wikia.nocookie.net/zelda/images/7/75/Spirit_Medallion.png/revision/latest?cb=20091009210203"/>
</a>
<a href="#04">
<div class="pop-title">Gallery</div>
<img src="http://vignette3.wikia.nocookie.net/zelda/images/7/75/Spirit_Medallion.png/revision/latest?cb=20091009210203"/>
</a>
<a href="#05">
<div class="pop-title">OOC</div>
<img src="http://vignette3.wikia.nocookie.net/zelda/images/7/75/Spirit_Medallion.png/revision/latest?cb=20091009210203"/>
</a>
</div>

<div id="mini">
<img src="http://vignette2.wikia.nocookie.net/zelda/images/e/e5/Bomb_Bag_(Ocarina_of_Time).png/revision/latest?cb=20100125065656" alt=""/>
</div>

<div class="color" id="infobox">
<div class="tab" style="overflow:hidden;">

<div class="tab" id="01">
<h2>Basics</h2>
<b>Name:</b>
<br/>Full Name Here
<br/>
<br/><b>Species:</b>
<br/>Stat here
<br/>
<br/><b>Gender:</b>
<br/>Stat here
<br/>
<br/><b>Age:</b>
<br/>Stat here
<br/>
<br/><b>Hair:</b>
<br/>Stat here
<br/>
<br/><b>Eyes:</b>
<br/>Stat here
<br/>
<br/><b>Height:</b>
<br/>Stat here
<br/>
<br/><b>Weight:</b>
<br/>Stat here
<br/>
<br/><b>Build:</b>
<br/>Stat here
<br/>
<br/><b>Orientation:</b>
<br/>Stat here
<br/>
<br/><b>Occupation:</b>
<br/>Stat here
</div>

<div class="tab" id="02">
<h2>History</h2>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</p>
<p>
Paragraph three.
</p>
</div>

<div class="tab" id="03">
<h2>Abilities & Equipment</h2>
<h3><img src="https://vignette.wikia.nocookie.net/elderscrolls/images/c/c6/ThaneSteelBattleaxe.png/revision/latest?cb=20120612192457"/>
Great Axe</h3>
<p>
Description
</p>
<h3><img src=""/>
Weapon</h3>
<p>
Description
</p>
<h3>Ability</h3>
<p>
Description
</p>
</div>

<div class="tab" id="04">
<h2>Gallery</h2>
<a href="#p1">Picture 1</a>
<br/>
<a href="#p2">Picture 2</a>
<br/>
<a href="#pdefault">Picture 3</a> (Default)
</div>

<div class="tab" id="05">
<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>
</div>

<a href="http://wix.cera-nore.com/" target="_blank" title="GS#01">
<img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/>
</a>