RC#06 Newspaper

RC#06ETC: Newspaper

CSS

/* Last Update: 04/25/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image:url(http://bgfons.com/upload/newspaper_texture2847.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 100%;
background-color:#808080;
font-family:'Times New Roman',Times,serif;
font-size:110%;
text-align:left;
}

/* MAIN DISPLAY COLORS */
.color {
background-image:url(https://images.freecreatives.com/wp-content/uploads/2015/04/white-paper-texture-with-flecks.jpg);
background-size:cover;
background-color:#bbbbbb;
box-shadow:1px 1px 5px #000000;
color:#2b2b2b;
}
#mugshot img {
border:2px solid #2b2b2b;
}
hr {
background-color:#2b2b2b;
border-color:#2b2b2b;
}
#navbar a {
text-decoration:none;
color:#2b2b2b;
text-shadow:none;
}
a, #navbar a:hover {
color:#ffffff;
text-shadow:0px 0px 2px #2b2b2b;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#e0e0e0;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#2b2b2b;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#2b2b2b;
}

/* CSS MEAT */
#mugshot {
position:fixed;
top:5%;
left:1%;
height:55%;
padding:1%;
}
#mugshot img {
height:100%;
}
#navbar, #statbox {
position:fixed;
padding:1%;
text-align:center;
overflow-y:auto;
}
#navbar {
top:65%;
left:4%;
height:25%;
width:20%;
font-size:6vh;
}
#infobox {
position:fixed;
top:5%;
left:50%;
height:86%;
width:46%;
padding:1%;
}
#statbox {
top:5%;
left:32%;
height:86%;
width:14%;
}
.color img {
max-width:100%;
}
.tab {
height:100%;
width:100%;
overflow-y:auto;
}
hr {
width:50%;
}
h2 {
text-align:center;
}
p {
text-indent:5%;
}

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

HTML

<div class="color" id="mugshot">
<img src="IMAGE URL HERE" alt="">
</div>

<div class="color" id="navbar">
<a href="#01">ABOUT</a>
<br/>
<a href="#02">EXTRAS</a>
<br/>
<a href="#03">OOC</a>
</div>

<div class="color" id="statbox">
<h2>Stats</h2>
<hr>
<p style="text-align:center;text-indent:0%;">
<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
</p>
</div>

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

<div class="tab" id="01">
<h2>About</h2>
<hr>
<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>

<div class="tab" id="02">
<h2>Extras</h2>
<hr>
<p>
Paragraph one.
</p>
<a href="" target="_blank">Link</a>
</div>

<div class="tab" id="03">
<h2>OOC</h2>
<hr>
<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>

<a href="https://tinyurl.com/shimad" target="_blank" title="RC#06">
<img src="https://i.imgur.com/hJcLRPx.png" id="credit"/>
</a>
</ul>
<div>

</div>
</div>