GS#08 Portal

GS#08HTS: Portal - Chell

CSS

/* Last Update: 01/02/19 */

/* PAGE BACKGROUND AND FONT */
body {
background:#888 url(http://www.mobygames.com/images/shots/l/507660-portal-2-windows-screenshot-this-is-what-the-aperture-science.jpg) no-repeat center fixed;
background-size:cover;
font-family:serif;
}

/* MAIN DISPLAY COLORS */
.color {
background-color:#aaa;
color:#fff;
}
#left .color {
border:3px solid #27bbe8;
}
#right .color {
border:3px solid #f5931b;
}
h1, h2, h3 {
color:#000;
}
a {
color:#bf2a22;
}
a:hover {
color:#db342e;
text-shadow:0 0 3px #bf2a22;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:8px;
height:8px;
background-color:#fff;
border-radius:3px;
}
::-webkit-scrollbar-thumb {
border-radius:3px;
}
#left .inner-box::-webkit-scrollbar-thumb {
background-color:#27bbe8;
}
#right .inner-box::-webkit-scrollbar-thumb {
background-color:#f5931b;
}

/* CSS MEAT */
#mugshot {
z-index:1;
position:fixed;
top:25%;
left:50%;
height:75%;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.box {
z-index:2;
position:fixed;
bottom:3%;
height:50vmin;
padding:1% 1.5%;
}
#left {
left:4%;
text-align:left;
}
#right {
right:4%;
text-align:right;
}
.portal {
z-index:4;
position:relative;
height:100%;
}
.inner-box {
z-index:3;
position:absolute;
top:50%;
bottom:50%;
padding:0;
overflow:hidden;
opacity:0;
transition:all 0.8s 0.8s, top 0.8s, bottom 0.8s, padding 0.8s;
-o-transition:all 0.8s 0.8s, top 0.8s, bottom 0.8s, padding 0.8s;
-moz-transition:all 0.8s 0.8s, top 0.8s, bottom 0.8s, padding 0.8s;
-webkit-transition:all 0.8s 0.8s, top 0.8s, bottom 0.8s, padding 0.8s;
}
#left .inner-box {
left:20%;
right:45%;
}
#right .inner-box  {
left:45%;
right:20%;
}
#one:checked ~ #left .inner-box,
#two:checked ~ #right .inner-box  {
z-index:5;
top:0;
bottom:0;
padding:2.5%;
overflow:auto;
opacity:1;
transition:all 0.8s, top 1.4s 0.8s, bottom 1.4s 0.8s, padding 1.4s 0.8s;
-o-transition:all 0.8s, top 1.4s 0.8s, bottom 1.4s 0.8s, padding 1.4s 0.8s;
-moz-transition:all 0.8s, top 1.4s 0.8s, bottom 1.4s 0.8s, padding 1.4s 0.8s;
-webkit-transition:all 0.8s, top 1.4s 0.8s, bottom 1.4s 0.8s, padding 1.4s 0.8s;
}
#one:checked ~ #left .inner-box {
left:108%;
right:-108%;
}
#two:checked ~ #right .inner-box {
left:-108%;
right:108%;
}
#left .mini-img {
float:right;
}
#right .mini-img {
float:left;
}
.mini-img {
width:25%;
}
.inner-box img {
max-width:100%;
}
input {
display:none;
}
label {
cursor:pointer;
}
a {
text-decoration:none;
font-weight:bold;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<img src="https://upload.wikimedia.org/wikipedia/en/4/40/Chell.png" alt="" id="mugshot"/>

<input type="checkbox" name="tab" id="one"/>
<input type="checkbox" name="tab" id="two"/>

<div class="box" id="left">
<label for="one"><img src="http://orig09.deviantart.net/2dfe/f/2016/366/0/3/untitled_drawing_by_cera_nore-datppkh.png" alt="blue portal" class="portal"/></label>
<div class="color inner-box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/22/22/42/222242f7e26848e776503c565175673a.png" class="mini-img"/>
<h2>Stats</h2>
<p>
<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>
<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>
</div>
</div>

<div class="box" id="right">
<label for="two"><img src="http://orig02.deviantart.net/7864/f/2016/366/9/b/untitled_drawing_by_cera_nore-datppyx.png" alt="orange portal" class="portal"/></label>
<div class="color inner-box">
<img src="https://s-media-cache-ak0.pinimg.com/originals/22/22/42/222242f7e26848e776503c565175673a.png" class="mini-img"/>
<h2>About</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>
<a href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
</div>
</div>

<a href="http://wix.cera-nore.com/" target="_blank" title="GS#08">
<img src="https://orig00.deviantart.net/9a8a/f/2017/256/c/d/cera_by_cera_nore-dbncbii.png" id="credit"/>
</a>