CC#07 Ocean Voyage

CC#07HTC: Ocean Voyage

CSS

/* Last Update: 03/09/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#111 url() fixed;
background-size:cover;
font-family:serif;
}

/* MAIN DISPLAY COLORS */
.color, #layout {
background:linear-gradient(to bottom right, #07b4ba, #086a82);
background:-o-linear-gradient(to bottom right, #07b4ba, #086a82);
background:-moz-linear-gradient(to bottom right, #07b4ba, #086a82);
background:-webkit-linear-gradient(to bottom right, #07b4ba, #086a82);
background-color:#07b4ba;
border:2px solid #086a82;
color:#002633;
text-shadow:0 0 6px #07b4ba;
box-shadow:10px 10px 10px rgba(0,59,79,0.8);
}
h2 {
text-shadow:0 1px 0 #a3d6d0,
	0 -1px 0 #a3d6d0,
	1px 0 0 #a3d6d0,
	-1px 0 0 #a3d6d0;
}
label, a {
text-decoration:none;
color:#a3d6d0;
font-weight:bold;
text-shadow:0 1px 0 #003b4f,
	1px 0 0 #003b4f;
}
label:hover, a:hover {
text-shadow:0 1px 0 #003b4f,
	0 -1px 0 #003b4f,
	1px 0 0 #003b4f,
	-1px 0 0 #003b4f;
}
i {
color:#fff;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#a3d6d0;
}
::-webkit-scrollbar-thumb {
background-color:#086a82;
}

/* CSS MEAT */
div {
box-sizing:border-box;
border-radius:5px;
}
#layout {
position:absolute;
top:0;
left:24vw;
height:140vh;
width:52vw;
margin:10px 0;
box-shadow:none;
}
.left {
left:2%;
}
.right {
right:2%;
}
#statbox {
position:absolute;
top:2%;
right:46%;
height:28%;
padding:1%;
overflow-y:auto;
}
#mugshot {
position:absolute;
top:2%;
max-height:37%;
left:57%;
}
#mugshot img {
display:block;
width:100%;
}
#navbar {
position:absolute;
height:8%;
width:50%;
top:32%;
left:4%;
white-space:nowrap;
overflow-x:auto;
overflow-y:hidden;
}
#navbar label {
display:inline-block;
position:relative;
top:50%;
height:5vh;
margin:-2.5vh 5%;
font-size:5vh;
cursor:pointer;
}
input {
display:none;
}
.infobox {
z-index:1;
position:absolute;
top:41%;
left:4%;
right:4%;
height:30%;
padding:1.5%;
font-size:105%;
overflow-y:auto;
}
#t1:checked ~ #tab1,
#t2:checked ~ #tab2,
#t3:checked ~ #tab3 {
z-index:2;
}
.box {
position:absolute;
top:74%;
height:23%;
width:25%;
padding:1%;
overflow-y:auto;
text-align:center;
}
.minimg {
position:absolute;
top:1%;
right:1%;
height:10vh;
}
img {
display:inline-block;
max-height:100%;
}
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:#fff;
border-radius:5px;
}

HTML

<div id="layout">

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

<div class="color left" id="statbox">
<img src="http://www.clipartbest.com/cliparts/eTM/dbo/eTMdbo5qc.png" class="minimg"/>
<h2>Stats</h2>
<b>Name:</b> Stat here
<br/>
<b>Gender:</b> Stat here
<br/>
<b>Species:</b> Stat here
<br/>
<b>Age:</b> Stat here
<br/>
<b>Height:</b> Stat here
<br/>
<b>Weight:</b> Stat here
<br/>
<b>Hair:</b> Stat here
<br/>
<b>Eyes:</b> Stat here
<br/>
<b>Orientation:</b> Stat here
</div>

<div class="color" id="navbar">
<img src="http://www.clipartbest.com/cliparts/eTM/dbo/eTMdbo5qc.png" class="minimg"/>
<label for="t1">~1</label>
<label for="t2">~2</label>
<label for="t3">~3</label>
</div>

<input type="radio" name="tabs" checked="checked" id="t1"/>
<input type="radio" name="tabs" id="t2"/>
<input type="radio" name="tabs" id="t3"/>

<div class="color infobox" id="tab1">
<h2>History</h2>
<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>
</div>

<div class="color infobox" id="tab2">
<h2>Personality</h2>
<i>Italicized text.</i>
</div>

<div class="color infobox" id="tab3">
<h2>Abilities</h2>
</div>

<img src="http://www.clipartbest.com/cliparts/eTM/dbo/eTMdbo5qc.png" style="top:82%;right:27.5%;" class="minimg"/>

<div class="color box left">
<h2>Extras</h2>
</div>

<div class="color box" style="left:37.5%;">
<h2>Friends</h2>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>

<div class="color box right">
<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>

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

</div>

CC#07HTC: Ocean Voyage

CSS

HTML

Alternates

Blackwater Pirate