CC#57 Firing Range

CC#57HTC: Firing Range

CSS

/* Last Update: 05/30/20 */

/* PAGE BACKGROUND AND FONTS */
body {
background:#6B8E23 url('https://game.gtimg.cn/images/zjzk/cp/a20191028zjzktrz/datadown/scene_img_big3.jpg') center bottom / cover fixed;
font-family:'Special Elite',monospace;
font-size:13px;
}
#id {
font-family:sans-serif;
}
.title {
font-family:"Black Ops One";
font-size:2.8vw;
}
.nav, #reset, label {
cursor:crosshair;
}

/* MAIN DISPLAY COLORS */
.nav, .tab, #id {
filter:drop-shadow(3px 3px 10px rgba(0,0,0,0.4));
-webkit-filter:drop-shadow(3px 3px 10px rgba(0,0,0,0.4));
}
.nav, .nav::before {
background:#111 url('https://dl.dropbox.com/s/x51pbktpfpyumzr/target.png') center / 75% no-repeat;
}
.tab {
background:url('https://dl.dropbox.com/s/yq0w5el8ms98lf4/rifle-casing.png') center bottom/ contain no-repeat;
color:#FFFF84;
text-shadow:1px 1px 5px #000;
}
a {
color:#F8F8FF;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#FFFF84;
border-radius:4px;
}
::-webkit-scrollbar-thumb {
background-color:#806600;
box-shadow:1px 1px 3px #000;
border-radius:4px;
}

/* ANIMATION */
@keyframes spin {
0% {left:18vw;transform:rotate(-180deg);}
}
@-o-keyframes spin {
0% {left:18vw;-o-transform:rotate(-180deg);}
}
@-moz-keyframes spin {
0% {left:18vw;-moz-transform:rotate(-180deg);}
}
@-webkit-keyframes spin {
0% {left:18vw;-webkit-transform:rotate(-180deg);}
}

/* CSS MEAT */
.nav, #reset {
position:fixed;
bottom:0;
}
.nav {
z-index:2;
height:40%;
width:16vw;
border-radius:25vw 25vw 0 0;
transition:0.4s;
-o-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
transform-origin:100% 100%;
-o-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
}
.nav::before {
content:"";
position:absolute;
top:-9.5vw;
left:21%;
height:11vw;
width:58%;
border-radius:50%;
}
.nav.one {
left:1%;
}
.nav.two {
left:18%;
}
.nav.three {
left:35%;
}
#t1:checked ~ .nav.one,
#t2:checked ~ .nav.two,
#t3:checked ~ .nav.three {
transform:rotateX(90deg);
-o-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
-webkit-transform:rotateX(90deg);
}
#reset {
z-index:1;
left:0;
height:100%;
width:100%;
}
input {
opacity:0;
}

#id, #imgs {
overflow:hidden;
}
#id {
position:fixed;
top:50vh;
right:26vw;
margin:-190px -135px;
height:360px;
width:250px;
padding:10px;
background:#fff;
border-radius:20px;
}
#imgs {
display:block;
position:relative;
height:50%;
}
#imgs > img, #company {
float:left;
position:relative;
width:50%;
}
#company {
top:50%;
text-align:center;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
#code {
float:left;
width:18%;
margin:2% 18% 0 0;
}
.dates {
float:right;
}
#company img {
width:60%;
}
#id h2, #id h3, #id h4 {
margin:0;
}

.tab {
z-index:3;
position:fixed;
bottom:-26vw;
left:100vw;
height:11vw;
width:40vw;
transform:rotate(120deg);
-o-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}
.one:hover ~ .tab.one,
.two:hover ~ .tab.two,
.three:hover ~ .tab.three {
will-change:
  bottom,
  left,
  transform,
  -o-transform,
  -moz-transform,
  -webkit-transform;
}
#t1:checked ~ .tab.one,
#t2:checked ~ .tab.two,
#t3:checked ~ .tab.three {
z-index:4;
bottom:24vh;
left:56vw;
transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
animation:0.8s spin 0.1s;
-o-animation:0.8s spin 0.1s;
-moz-animation:0.8s spin 0.1s;
-webkit-animation:0.8s spin 0.1s;
transition:0.8s bottom 0.1s;
-o-transition:0.8s bottom 0.1s;
-moz-transition:0.8s bottom 0.1s;
-webkit-transition:0.8s bottom 0.1s;
}
.title, .text {
position:absolute;
}
.title {
display:block;
text-transform:uppercase;
margin:0 5%;
overflow:hidden;
}
.text {
top:3vw;
left:10%;
height:68%;
width:60%;
padding:0 2%;
overflow-y:auto;
}
.text img {
max-height:100%;
}
p {
text-indent:5%;
}

/* MOBILE COMPATIBILITY */
@media only screen and (orientation:portrait) {
  #id {
  margin:-160px -100px;
  height:320px;
  width:200px;
  }
  .title {
  font-size:2.8vw;
  font-size:5.6vw;
  }
  .text {
  top:6vw;
  height:62%;
  }
  .nav {
  height:20%;
  }
  .tab {
  height:16.5vw;
  width:50vw;
  }
}

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

HTML

<link href="https://fonts.googleapis.com/css?family=Black+Ops+One|Special+Elite&display=swap" rel="stylesheet">

<input type="radio" name="selection" id="t1"/>
<input type="radio" name="selection" id="t2"/>
<input type="radio" name="selection" id="t3"/>
<input type="radio" name="selection" id="reset"/>

<label class="nav one" for="t1"></label>
<label class="nav two" for="t2"></label>
<label class="nav three" for="t3"></label>


<div id="id">
<div id="imgs">
<img src="MAIN IMAGE URL HERE"/>

<div id="company">
<h4>Mithril</h4>
<img src="INSIGNIA IMAGE URL HERE"/>
<h4>Special Response Team<h4>
</div>
</div>

<h2>Weber,</h2>
Kurz
<br/>
<img src="https://dl.dropbox.com/s/3qt14xdcwcffkzw/barcode-type-1-v.png" id="code"/>

<div class="rank">
<h4>Rank</h4>
<h4>SGT</h4>
</div>

<div class="dates">
Issue Date
<h3>01JAN20XX</h3>
<br/>
Expiration Date
<h3>21DEC20XX</h3>
</div>
</div>


<div class="tab one">
<div class="title">About</div>
<div class="text">
<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="tab two">
<div class="title">Links</div>
<div class="text">
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>


<div class="tab three">
<div class="title">OOC</div>
<div class="text">
<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>


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