CC#55 Mechanic

CC#55MTC: Mechanic

CSS

/* Last Update: 07/30/20 */

/* PAGE BACKGROUND AND FONT */
body {
background:url('MAIN IMAGE URL HERE') no-repeat bottom right / contain fixed,#c2d1cc url("https://dl.dropbox.com/s/7eg5fdw15m3ewwl/brushed-alum-dark.png");
font-family:'Acme',sans-serif;
}

/* MAIN DISPLAY COLORS */
.box {
background:rgba(168, 183, 178,0.4);
border-color:#82918C;
box-shadow:2px 2px 3px #82918C,
	2px 2px 1px #82918C;
color:#82918C;
}
.title hr {
border:1px solid #82918C;
}
a {
color:#444;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:2px;
height:2px;
background-color:#c2d1cc;
border-radius:4px;
}
::-webkit-scrollbar-thumb {
border:1px solid #82918C;
border-radius:4px;
}

/* CSS MEAT */
#nav, .tab {
position:fixed;
top:50%;
left:50vmin;
}
#nav, .image img {
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
#nav {
z-index:3;
height:9vmin;
margin:-4.5vmin 0;
text-align:center;
}
#nav label {
cursor:pointer;
}
#nav label img {
height:100%;
}
input {
display:none;
}
.wrench {
display:inline-block;
position:relative;
height:100%;
margin:0 0.25vmin;
bottom:36%;
}
#nav .wrench:nth-of-type(2) {
bottom:10%;
transform:rotate(-35deg);
-o-transform:rotate(-35deg);
-moz-transform:rotate(-35deg)
-webkit-transform:rotate(-35deg);
}
#nav .wrench:last-of-type {
bottom:10%;
transform:rotate(30deg);
-o-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}
#nut {
position:absolute;
left:10%;
bottom:0;
height:36%;
width:80%;
}
.tab {
z-index:1;
margin:-30vmin;
height:60vmin;
width:60vmin;
opacity:0;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
input:checked + .tab {
z-index:2;
margin:-29vmin;
height:58vmin;
width:58vmin;
opacity:1;
}
.box {
position:absolute;
border-radius:2px;
overflow:hidden;
}
.title {
display:block;
position:relative;
margin:0 10%;
font-size:2.6vh;
text-align:center;
}
.title hr {
height:0;
margin:0;
border-radius:4px;
}
.info {
position:absolute;
top:4vh;
left:1vmin;
right:1vmin;
bottom:1vmin;
padding:2px;
overflow-y:auto;
}
.info.image {
overflow:hidden;
}
.t {
top:0;
bottom:55%;
}
.b {
top:55%;
bottom:0;
}
.l {
left:0;
right:55%;
}
.r {
left:55%;
right:0;
}
.info.image img {
position:absolute;
top:0;
left:50%;
height:100%;
width:auto;
}
.info img {
width:100%;
}
p {
text-indent:10%;
}

#credit {
position:fixed;
right:0;
bottom:0;
border-radius:50% 50% 0;
}

HTML

<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">

<input type="radio" name="selection" checked="checked" id="reset"/>

<div id="nav">
<label for="reset" id="nut"><img src="https://dl.dropbox.com/s/2unoqhn7g84kbio/nut-vector-small.png"/></label>
<label for="one" class="wrench"><img src="https://dl.dropbox.com/s/7evitaczlv49cdx/wrench-vector-small.png"/></label>
<label for="two" class="wrench"><img src="https://dl.dropbox.com/s/7evitaczlv49cdx/wrench-vector-small.png"/></label>
<label for="three" class="wrench"><img src="https://dl.dropbox.com/s/7evitaczlv49cdx/wrench-vector-small.png"/></label>
</div>


<input type="radio" name="selection" id="one"/>
<div class="tab">
<div class="box t l">
<div class="title">
Box One
<hr/>
</div>
<div class="info">
<p style="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>

<div class="box t r">
<div class="title">
Box Two
<hr/>
</div>
<div class="info">
<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>

<div class="box b l">
<div class="title">
Box Three
<hr/>
</div>
<div class="info">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<div class="box b r">
<div class="title">
Box Four
<hr/>
</div>
<div class="info">
<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>


<input type="radio" name="selection" id="two"/>
<div class="tab">
<div class="box t l">
<div class="title">
Box One
<hr/>
</div>
<div class="info image">
<img src="IMAGE URL HERE" alt=""/>
</div>
</div>

<div class="box t r">
<div class="title">
Box Two
<hr/>
</div>
<div class="info">
<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>

<div class="box b l">
<div class="title">
Box Three
<hr/>
</div>
<div class="info">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<div class="box b r">
<div class="title">
Box Four
<hr/>
</div>
<div class="info image">
<img src="IMAGE URL HERE" alt=""/>
</div>
</div>
</div>


<input type="radio" name="selection" id="three"/>
<div class="tab">
<div class="box t l">
<div class="title">
Box One
<hr/>
</div>
<div class="info">
<p>
Third tab things
</p>
</div>
</div>

<div class="box t r">
<div class="title">
Box Two
<hr/>
</div>
<div class="info image">
<img src="IMAGE URL HERE" alt=""/>
</div>
</div>

<div class="box b l">
<div class="title">
Box Three
<hr/>
</div>
<div class="info image">
<img src="IMAGE URL HERE" alt=""/>
</div>
</div>

<div class="box b r">
<div class="title">
Box Four
<hr/>
</div>
<div class="info">
<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>

<a href="http://wix.mirza-works.com/" target="_blank" title="CC#55">
<img src="https://dl.dropboxusercontent.com/s/m6ocjb7kbe99so7/small.png" id="credit"/>
</a>