CC#13 Blue Noble

CC#13HTC: Blue Noble

CSS

/* Last Update: 02/16/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image: url('BACKGROUN IMAGE URL HERE');
background-attachment:fixed;
background-repeat:no-repeat;
background-size:auto 100%;
background-color:#fffff5;
background-position:center;
font-family:serif;
text-align:left;
}

/* MAIN DISPLAY COLORS */
.color1, #navbar a, #mugshot img {
background-color:#007BA7;
border:5px solid #808080;
border-radius:50px;
color:#fffff5;
}
.color2, #gallery a {
background-color:#daa520;
border:5px solid #808080;
}
#gallery a:hover {
background-color:#808080;
}
#border {
border:5px solid #daa520;
}
a {
text-decoration:none;
color:#daa520;
font-weight:bold;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:10px;
height:10px;
background-color:#fffff5;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#daa520;
border:2px solid #fffff5;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#daa520;
border:2px solid #fffff5;
}

/* CSS MEAT */
#border {
z-index:1;
position:fixed;
top:5px;
bottom:5px;
right:5px;
left:5px;
}
#statbox {
z-index:4;
position:fixed;
top:2.5%;
left:5%;
height:88%;
width:10%;
padding:1%;
overflow-y:auto;
}
#navbar {
z-index:6;
position:fixed;
top:45%;
left:28%;
width:50%;
}
#navbar a {
display:inline-block;
padding:1%;
margin:1%;
height:3%;
width:10%;
text-align:center;
}
#infobox {
z-index:5;
position:fixed;
top:50%;
left:24%;
height:45%;
width:55%;
padding:0% 2%;
}
#musicbox {
z-index:3;
position:fixed;
top:14%;
left:16%;
max-height:40px;
max-width:25%;
padding:0.5% 0.5% 0.5% 1%;
border-radius:50px;
text-indent:0.5%;
overflow:hidden;
}
#mugshot {
z-index:2;
position:fixed;
top:2.5%;
height:95%;
width:87.5%;
text-align:right;
}
#mugshot img {
max-height:50%;
border-radius:50%;
}
#gallery {
z-index:3;
position:fixed;
right:8%;
top:10%;
height:50%;
width:25px;
}
#gallery a {
display:block;
height:5px;
width:5px;
margin-bottom:30%;
}
.tab {
height:100%;
width:100%;
overflow:auto;
}
#infobox img {
max-height:100%;
}
b {
font-size:115%;
}
p {
text-indent:5%;
}
h3 {
text-align:center;
}
h4 {
text-decoration:underline;
}

/* CREDIT TAG - set position:static; to move to OOC */
#credit {
z-index:2;
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div id="border"></div>

<div class="color1" id="statbox">
<p style="text-indent:0%;">
<b>Name:</b>
<br>Stat here
<br>
<br><b>Species:</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
</p>
</div>

<audio controls controlsList="nodownload" class="color2" id="musicbox">
<source src="http://k003.kiwi6.com/hotlink/ke1fntk25z/Packaged.mp3" type="audio/mpeg">
</audio>

<div id="mugshot">
<div style="height:100%;overflow-y:hidden;">
<div class="tab" id="p1">
<img src="IMAGE URL ONE" alt=""/>
</div>

<div class="tab" id="p2">
<img src="IMAGE URL TWO" alt=""/>
</div>

<div class="tab" id="p3">
<img src="IMAGE URL THREE" alt=""/>
</div>

<div class="tab" id="p4">
<img src="IMAGE URL FOUR" alt=""/>
</div>

<div class="tab" id="p5">
<img src="IMAGE URL FIVE" alt=""/>
</div>

</div>
</div>

<div id="gallery">
<a href="#p2"></a>
<a href="#p3"></a>
<a href="#p4"></a>
<a href="#p5"></a>
<a href="#p1"></a>
</div>

<div id="navbar">
<a href="#01">About</a>
<a href="#02">Extras</a>
<a href="#03">Friends</a>
<a href="#04">OOC</a>
</div>

<div class="color1" id="infobox">
<div style="height: 100%; overflow-y: hidden;">

<div class="tab" id="01">
<h3>About</h3>
<h4>Background</h4>
<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>
<h4>Abilities</h4>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</p>
<h4>Personality</h4>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="tab" id="02">
<h3>Extras</h3>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="tab" id="03">
<h3>Friends</h3>
<a href="https://i.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>

<div class="tab" id="04">
<h3>OOC</h3>
<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>
<li>Bullet seven.</li>
<li>Bullet eight.</li>

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

</div>
</div>