RC#07 Split

RC#07MTC: Split Mk. II

CSS

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

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

/* MAIN DISPLAY COLORS */
.color {
background-color:rgba(250, 182, 35, 0.75);
}
.color, .navbar.right a {
color:#f53900;
text-shadow:0px 0px 3px #fab623,
	0px 0px 3px #fab623;
}
.color2 {
background-color:rgba(245, 57, 0, 0.75);
}
.color2, .navbar.left a {
color:#fab623;
text-shadow:0px 0px 3px #f53900,
	0px 0px 3px #f53900;
}
a {
text-decoration:none;
color:#f0f0f0;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#fab623;
}
::-webkit-scrollbar-thumb:vertical {
background-color:#f53900;
border-radius:10px;
box-shadow:0px 0px 5px #000000;
}
::-webkit-scrollbar-thumb:horizontal {
background-color:#f53900;
border-radius:10px;
box-shadow:0px 0px 5px #000000;
}

/* CSS MEAT */
#content {
position:fixed;
top:4%;
left:10%;
height:92%;
width:80%;
}
.background {
z-index:1;
position:absolute;
height:93%;
width:45%;
overflow:hidden;
}
.background img {
position:absolute;
left:50%;
height:100%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
filter:blur(10px);
-webkit-filter:blur(10px);
}
.infobox {
z-index:2;
position:absolute;
height:85%;
width:45%;
}
.left {
top:7%;
left:0%;
}
.right {
top:0%;
right:0%;
}
.infobox.left {
top:15%;
}
.navbar {
z-index:3;
position:absolute;
height:8%;
width:55%;
overflow-x:auto;
white-space:nowrap;
}
.navbar.left {
text-align:left;
}
.navbar.right {
top:85%;
text-align:right;
}
.nav-center {
position:absolute;
width:99%;
bottom:50%;
transform:translateY(50%);
-o-transform:translateY(50%);
-moz-transform:translateY(50%);
-webkit-transform:translateY(50%);
}
.navbar a {
display:inline-block;
position:relative;
padding:0.5%;
margin:0% 1vw;
font-size:3vh;
font-weight:bold;
}
.tab-container {
z-index:2;
position:absolute;
top:0%;
height:100%;
width:100%;
overflow:hidden;
}
.tab {
height:100%;
padding:0% 2%;
overflow:auto;
}
.tab img {
width:90%;
}
h4, p {
text-align:left;
}
p {
text-indent:5%;
}
b {
font-size:105%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div id="content">
<div class="background left">
<img src="BACKGROUND IMAGE URL HERE" alt=""/>
</div>
<div class="color2 navbar left">
<div class="nav-center">
<a href="#1A">Stats</a>
<a href="#1B">Background</a>
<a href="#1C">Personality</a>
<a href="#1D">Abilities</a>
</div>
</div>

<div class="color infobox left" id="left">
<div class="tab-container">

<div class="tab" id="1A">
<h2>Stats</h2>
<img src="IMAGE URL HERE" alt=""/>
<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="tab" id="1B">
<h2>Background</h2>
<img src="IMAGE URL HERE" alt=""/>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</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="1C">
<h2>Personality</h2>
<img src="IMAGE URL HERE" alt=""/>
<p>
Paragraph.
</p>
</div>

<div class="tab" id="1D">
<h2>Abilities</h2>
<img src="IMAGE URL HERE" alt=""/>
<h4>Ability here-</h4>
<p>
Description here.
</p>
<h4>Ability here-</h4>
<p>
Description here.
</p>
</div>

</div>
</div>


<div class="background right">
<img src="BACKGROUND IMAGE URL HERE" alt=""/>
</div>
<div class="color navbar right">
<div class="nav-center">
<a href="#2A">Stats</a>
<a href="#2B">Background</a>
<a href="#2C">Personality</a>
<a href="#2D">Abilities</a>
</div>
</div>

<div class="color2 infobox right">
<div class="tab-container">

<div class="tab" id="2A">
<h2>Stats</h2>
<img src="IMAGE URL HERE" alt=""/>
<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="tab" id="2B">
<h2>Background</h2>
<img src="IMAGE URL HERE" alt=""/>
<p>
Paragraph one.
</p>
<p>
Paragraph two.
</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="2C">
<h2>Personality</h2>
<img src="IMAGE URL HERE" alt=""/>
<p>
Paragraph.
</p>
</div>

<div class="tab" id="2D">
<h2>Abilities</h2>
<img src="IMAGE URL HERE" alt=""/>
<h4>Ability here-</h4>
<p>
Description here.
</p>
<h4>Ability here-</h4>
<p>
Description here.
</p>
</div>

</div>
</div>

</div>

<a href="http://bit.do/eePwi" target="_blank" title="RC#07">
<img src="https://i.imgur.com/loleTtJ.png" id="credit"/>
</a>