RC#12 Character Select

RC#12MTC: Character Select

CSS

/* Last Update: 05/06/18 */

/* PAGE BACKGROUND AND FONT */
body {
background-image:url(BACKGROUND URL HERE);
background-attachment:fixed;
background-repeat:no-repeat;
background-size:100% 100%;
background-color:#f0f8ff;
font-family:serif;
font-size:105%;
text-align:left;
}

/* MAIN DISPLAY COLORS */
.color, #mugshot, .contentbox {
background-color:#87ceeb;
border:4px solid #4169e1;
color:#ffffff;
}
#navbar a {
background-color:#ffffff;
border:2px solid #4169e1;
}
h3 {
border-bottom:3px solid #4269e1;
text-align:center;
}
h3, b {
color:#4169e1;
}
u {
color:#ffff70;
}
i {
color:#c2ffa8;
}
a {
color:#000080;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#ffffff;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#4269e1;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#4269e1;
}

/* CSS MEAT */
.tab {
z-index:1;
position:fixed;
top:20%;
left:0%;
height:100%;
width:100%;
opacity:0;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.tab:target {
z-index:2;
top:0%;
opacity:1;
}
#mugshot {
position:absolute;
top:2.5%;
bottom:2.5%;
left:2.5%;
right:62.5%;
overflow:hidden;
}
#mugshot img {
left:5%;
width:90%;
}
#mugshot img, #navbar a img {
position:absolute;
top:50%;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
#navbar {
z-index:3;
position:fixed;
top:50%;
left:39%;
right:44%;
padding:0.5%;
text-align:center;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
#navbar a {
display:inline-block;
position:relative;
height:7vw;
width:7vw;
overflow:hidden;
}
#navbar a img {
left:0%;
width:100%;
}
#obox {
height:120px;
overflow-y:auto;
}
.contentbox {
position:absolute;
top:5%;
bottom:5%;
left:57.5%;
right:2.5%;
}
.tall, .wide {
position:absolute;
overflow-y:auto;
}
.left {
left:2%;
text-align:center;
}
.left p {
text-indent:0%;
}
.tall {
top:2%;
height:54%;
width:46%;
}
.right {
right:2%;
}
.wide {
top:58%;
left:2%;
right:2%;
height:40%;
}
.tall img {
max-width:100%;
}
.wide img {
max-height:100%;
}
p {
text-indent:5%;
}
#credit {
z-index:3;
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div class="color" id="navbar">
<a href="#01"><img src="IMAGE URL ONE"/></a>
<a href="#02"><img src="IMAGE URL TWO"/></a>
<a href="#03"><img src="IMAGE URL THREE"/></a>
<a href="#04"><img src="IMAGE URL FOUR"/></a>
<a href="#05"><img src="IMAGE URL FIVE"/></a>
<a href="#06"><img src="IMAGE URL SIX"/></a>
<a href="#00" style="height:auto;">Reset</a>

<div id="obox">
<h3>OOC</h3>
<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>


<!-- CHARACTER ONE -->

<div class="tab" id="01">
<div id="mugshot"/>
<img src="IMAGE URL ONE" alt=""/>
</div>

<div class="contentbox">
<div class="left tall">
<h3>Stats</h3>
<p>
<b>Name:</b> Character #1
<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="right tall">
<h3>Personality</h3>
<p>
Pargraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="wide">
<h3>History</h3>
<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. <u>Underline.</u> <i>Italics.</i>
</p>
</div>
</div>
</div>


<!-- CHARACTER TWO -->

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

<div class="contentbox">
<div class="left tall">
<h3>Stats</h3>
<p>
<b>Name:</b> Character #2
<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="right tall">
<h3>Personality</h3>
<p>
Pargraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="wide">
<h3>History</h3>
<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. <u>Underline.</u> <i>Italics.</i>
</p>
</div>
</div>
</div>


<!-- CHARACTER THREE -->

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

<div class="contentbox">
<div class="left tall">
<h3>Stats</h3>
<p>
<b>Name:</b> Character #3
<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="right tall">
<h3>Personality</h3>
<p>
Pargraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="wide">
<h3>History</h3>
<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. <u>Underline.</u> <i>Italics.</i>
</p>
</div>
</div>
</div>


<!-- CHARACTER FOUR -->

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

<div class="contentbox">
<div class="left tall">
<h3>Stats</h3>
<p>
<b>Name:</b> Character #4
<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="right tall">
<h3>Personality</h3>
<p>
Pargraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="wide">
<h3>History</h3>
<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. <u>Underline.</u> <i>Italics.</i>
</p>
</div>
</div>
</div>


<!-- CHARACTER FIVE -->

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

<div class="contentbox">
<div class="left tall">
<h3>Stats</h3>
<p>
<b>Name:</b> Character #5
<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="right tall">
<h3>Personality</h3>
<p>
Pargraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="wide">
<h3>History</h3>
<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. <u>Underline.</u> <i>Italics.</i>
</p>
</div>
</div>
</div>


<!-- CHARACTER SIX -->

<div class="tab" id="06">
<div id="mugshot"/>
<img src="IMAGE URL SIX" alt=""/>
</div>

<div class="contentbox">
<div class="left tall">
<h3>Stats</h3>
<p>
<b>Name:</b> Character #6
<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="right tall">
<h3>Personality</h3>
<p>
Pargraph one.
</p>
<p>
Paragraph two.
</p>
</div>

<div class="wide">
<h3>History</h3>
<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. <u>Underline.</u> <i>Italics.</i>
</p>
</div>
</div>
</div>

<a href="https://tinyurl.com/midoriya" target="_blank" title="RC#12">
<img src="https://i.imgur.com/7XPiOlr.png" id="credit"/>
</a>