CC#46 Black Sheep

CC#46ATC: Black Sheep

CSS

/* Last Update: 07/23/19 */

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

/* MAIN DISPLAY COLORS */
.inner {
background:rgba(0,0,0,0.4) url('https://orig00.deviantart.net/c325/f/2018/068/d/0/xv_by_cera_nore-dc5fxyq.png');
border:9px double #b8860b;
color:#fff;
}
h1, .nav label,
h1::before, .nav label::before {
background-color:#111;
}
h1, .nav label,
.id, .id h3 {
border:3px solid #b8860b;
color:#fff;
}
.tab > p::first-letter {
background-color:#111;
border:2px solid #b8860b;
}
.id, .id h3 {
background-color:rgba(17,17,17,0.4);
}
.id .image {
border-right:3px solid #b8860b;
}
a {
color:#b8860b;
}
a:hover {
text-shadow:0 0 1px #b8860b;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
height:3px;
width:3px;
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color:#b8860b;
}
#mobile-scroll::-webkit-scrollbar {
height:6px;
width:6px;
}

/* TRANSITION SPEED */
#gallery img, .tab, .inner h1 {
transition:opacity 1s;
-o-transition:opacity 1s;
-moz-transition:opacity 1s;
-webkit-transition:opacity 1s;
}

/* CSS MEAT */
#insignia {
position:fixed;
height:50%;
right:3%;
bottom:-5%;
}
#mobile-scroll {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
overflow-y:auto;
}
#profile {
position:absolute;
top:0;
left:23vw;
height:160vh;
width:50vw;
margin:5px 0;
}
.container {
position:relative;
}
.nav, h1 {
z-index:2;
position:absolute;
text-align:center;
}
.nav, .nav label {
height:2.7vw;
font-size:1.5vw;
line-height:2.3vw;
}
.nav {
top:99.25%;
padding:3px 0 11px 0;
white-space:nowrap;
overflow-x:auto;
overflow-y:hidden;
}
.nav label, h1 {
border-radius:0 0 1.8vw 1.8vw;
border-top:none;
}
.nav label {
display:inline-block;
position:relative;
margin:3px 0.2vh;
padding:0 0.6vw;
cursor:pointer;
}
input {
display:none;
}
h1, #gallery img, .image img {
left:50%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
h1 {
font-size:3.8vh;
margin:0;
padding:0.5vh 2vw;
}
h1::before,
.nav label::before {
content:"";
position:absolute;
top:-3px;
height:4px;
left:0;
right:0;
}
#gallery {
width:100%;
height:55vh;
}
#gallery h1 {
top:11px;
font-size:4.8vh;
}
#gallery .nav,
#gallery .nav label {
height:3.2vw;
font-size:1.9vw;
line-height:2.8vw;
}
#gallery .nav {
width:55vh;
}
#gallery .nav label {
margin:3px 0.8vh;
}
#gallery img, .image img {
position:absolute;
top:0;
height:100%;
}
#statbox {
height:45vh;
}
#statbox .nav {
width:45vh;
}
#box {
height:55vh;
}
#box .nav {
width:55vh;
}
#obox {
height:59vh;
}
#obox .nav {
width:59vh;
}
#fbox {
height:49vh;
}
#fbox .nav {
width:49vh;
}
.left {
float:left;
width:42%;
}
.right {
float:right;
width:58%;
}
.left h1 {
margin:-3px 18px;
}
.right h1 {
margin:-3px -18px;
}
.inner {
z-index:1;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin-top:5px;
border-radius:2px;
}
#gallery .inner {
overflow:hidden;
}
.right .inner {
margin-left:5px;
}
.tab {
positon:absolute;
top:5vh;
bottom:0;
padding:6px;
overflow-y:auto;
}
.left .tab {
left:2.7vw;
margin-left:18px;
right:10px;
}
.right .tab {
right:2.7vw;
margin-right:18px;
left:10px;
}
#gallery img, .tab {
z-index:1;
position:absolute;
opacity:0;
}
#gallery input:checked + img,
input:checked + h1 + .tab {
z-index:2;
opacity:1;
}
.inner h1 {
z-index:2;
opacity:0;
}
input:checked + h1 {
z-index:3;
opacity:1;
}
.id {
display:block;
position:relative;
height:18vh;
margin:4px 0;
overflow:auto;
}
.id .image {
position:absolute;
top:0;
left:0;
right:60%;
height:100%;
overflow:hidden;
}
.id h3, .id p {
position:absolute;
top:3%;
left:40%;
right:0;
}
.id h3 {
margin:0 4px;
padding:3px;
}
.id p {
bottom:0;
margin:35px 10px 10px;
}
.tab > p::first-letter {
padding:2px;
margin:0 2px;
font-size:16px;
line-height:26px;
}
.tab img {
max-width:100%;
}
h2 {
text-decoration:underline;
}
p {
text-indent:5%;
}
@media only screen and (orientation:portrait) {
	#profile {
	left:2vw;
	width:95vw;
	font-size:1.4em;
	}
	.nav, .nav label,
	#gallery .nav,
	#gallery .nav label {
	height:4.7vw;
	font-size:3.5vw;
	line-height:4.3vw;
	}
	#gallery h1 {
	font-size:3.8vh;
	}
	h1 {
	font-size:2.8vh;
	}
}
#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://dl.dropbox.com/s/916nu7kq0libugm/rotation.css" rel="stylesheet" type="text/css">

<img src="https://dl.dropbox.com/s/vrcko1lbhv860fk/taurus-bull-gray.png" alt="" id="insignia"/>

<div id="mobile-scroll">
<div id="profile">

<div class="container" id="gallery">
<h1>Gallery</h1>
<div class="nav ccw">
<label for="g-one">One</label>
<label for="g-two">Two</label>
</div>
<div class="nav cw">
<label for="g-three">Three</label>
<label for="g-four">Four</label>
</div>
<div class="inner">

<!-- GALLERY IMAGES BELOW -->

<input name="image" type="radio" checked="checked" id="g-one"/>
<img src="IMAGE URL ONE HERE" alt=""/>
<input name="image" type="radio" id="g-two"/>
<img src="IMAGE URL TWO HERE" alt=""/>
<input name="image" type="radio" id="g-three"/>
<img src="IMAGE URL THREE HERE" alt=""/>
<input name="image" type="radio" id="g-four"/>
<img src="IMAGE URL FOUR HERE" alt=""/>
</div></div>


<div class="container left" id="statbox">
<div class="nav ccw">
<label for="01-01">Stats</label>
<label for="01-02">Abilities</label>
<label for="01-03">Three</label>
</div>
<div class="inner">

<!-- TOP LEFT BOX FIRST TAB BELOW -->

<input name="01" id="01-01" type="radio" checked="checked"/>
<h1>Stats</h1>
<div class="tab">
<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
</div>

<!-- TOP LEFT BOX SECOND TAB BELOW -->

<input name="01" id="01-02" type="radio"/>
<h1>Abilities</h1>
<div class="tab">
<h2>Ability -</h2>
<p>
Description here.
</p>
<h2>Ability -</h2>
<p>
Description here.
</p>
<h2>Ability -</h2>
<p>
Description here.
</p>
</div>

<!-- TOP LEFT BOX THIRD TAB BELOW -->

<input name="01" id="01-03" type="radio"/>
<h1>Three</h1>
<div class="tab">
<p>
Text
</p>
</div>
</div></div>


<div class="container right" id="box">
<div class="nav cw">
<label for="02-01">Personality</label>
<label for="02-02">History</label>
<label for="02-03">Fun Facts</label>
</div>
<div class="inner">

<!-- TOP RIGHT BOX FIRST TAB BELOW -->

<input name="02" id="02-01" type="radio" checked="checked"/>
<h1>Personality</h1>
<div class="tab">
<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>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>

<!-- TOP RIGHT BOX SECOND TAB BELOW -->

<input name="02" id="02-02" type="radio"/>
<h1>Backstory</h1>
<div class="tab">
<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>

<!-- TOP RIGHT BOX THIRD TAB BELOW -->

<input name="02" id="02-03" type="radio"/>
<h1>Fun Facts</h1>
<div class="tab">
<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></div>


<div class="container left" id="obox">
<div class="nav ccw">
<label for="03-01">OOC</label>
<label for="03-02">Preferences</label>
<label for="03-03">Journal</label>
</div>
<div class="inner">

<!-- BOTTOM LEFT BOX FIRST TAB BELOW -->

<input name="03" id="03-01" type="radio" checked="checked"/>
<h1>OOC</h1>
<div class="tab">
<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>

<!-- BOTTOM LEFT BOX SECOND TAB BELOW -->

<input name="03" id="03-02" type="radio"/>
<h1>Preferences</h1>
<div class="tab">
<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>

<!-- BOTTOM LEFT BOX THIRD TAB BELOW -->

<input name="03" id="03-03" type="radio"/>
<h1>Journal</h1>
<div class="tab">
<h2>Date</h2>
<p>
Paragraph.
</p>
</div>
</div></div>


<div class="container right" id="fbox">
<div class="nav cw">
<label for="04-01">Family</label>
<label for="04-02">Friends</label>
<label for="04-03">Enemies</label>
</div>
<div class="inner">


<!-- BOTTOM RIGHT BOX FIRST TAB BELOW -->

<input name="04" id="04-01" type="radio"/>
<h1>Family</h1>
<div class="tab">

<div class="id">
<div class="image"><img src="IMAGE URL"/></div>
<a href="" target="_blank"><h3>NAME</h3></a>
<p>
Short description.
</p>
</div>

</div>


<!-- BOTTOM RIGHT BOX SECOND TAB BELOW -->

<input name="04" id="04-02" type="radio" checked="checked"/>
<h1>Friends</h1>
<div class="tab">

<div class="id">
<div class="image"><img src="IMAGE URL"/></div>
<a href="" target="_blank"><h3>NAME</h3></a>
<p>
Short description.
</p>
</div>

<div class="id">
<div class="image"><img src="IMAGE URL"/></div>
<a href="" target="_blank"><h3>NAME</h3></a>
<p>
Short description.
</p>
</div>

</div>


<!-- BOTTOM RIGHT BOX THIRD TAB BELOW -->

<input name="04" id="04-03" type="radio"/>
<h1>Enemies</h1>
<div class="tab">
<div class="id">
<div class="image"><img src="IMAGE URL"/></div>
<a href="" target="_blank"><h3>NAME</h3></a>
<p>
Short description.
</p>
</div>
</div>
</div></div>

</div></div>

<a href="https://tinyurl.com/fukase" target="_blank" title="CC#46">
<img src="https://dl.dropboxusercontent.com/s/qghc6relnx6ewmx/small-credit.png" id="credit"/>
</a>