GS#02 Portal - GLaDOS

GS#02ANS: Portal - GLaDOS

CSS

/* Last Update: 11/30/18 */

/* PAGE BACKGROUND AND FONT */
body {
background:#c0c0c0 url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Aperture_Science.svg/2000px-Aperture_Science.svg.png) no-repeat center fixed;
background-size:auto 80%;
font-family:serif;
}

/* MAIN DISPLAY COLORS */
.color {
box-shadow:0 0 5px #0099ff,
	0 0 15px #0099ff;
color:#d0d0d0;
}
.color:hover, .title {
background-color:#0099ff;
}
.left h2 {
border-left:6px solid #d0d0d0;
}
.right h2 {
border-right:6px solid #d0d0d0;
}
a {
text-decoration:none;
color:#f0d800;
}

/* GOOGLE CHROME SCROLLBARS */
::-webkit-scrollbar {
width:10px;
height:10px;
background-color:#eeeeee;
}
::-webkit-scrollbar-thumb {
background-color:#999999;
}

/* TRANSITION SPEED */
.q, .mugshot, .scroller, .title {
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}

/* CSS MEAT */
#circle {
position:fixed;
top:50%;
left:50%;
height:80vh;
width:80vh;
margin:-40vh;
}
.q {
position:absolute;
height:48%;
width:48%;
overflow:hidden;
}
.left {
right:52%;
text-align:left;
}
.right {
left:52%;
text-align:right;
}
.top {
top:0;
}
.bot {
bottom:0;
}
.top.left {
border-radius:100% 5% 0 5%;
}
.top.right {
border-radius:5% 100% 5% 0;
}
.bot.left {
border-radius:5% 0 5% 100%;
}
.bot.right {
border-radius:0 5% 100% 5%;
}
.q:hover, .infobox img {
width:100%;
border-radius:0;
}
.mugshot {
z-index:1;
position:absolute;
top:50%;
width:200%;
opacity:0.2;
transform:translateY(-50%);
-o-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
.q:hover .mugshot {
width:50%;
opacity:1;
}
.left .mugshot {
left:0;
}
.right .mugshot {
right:0;
}
.left:hover .mugshot {
left:50%;
}
.right:hover .mugshot {
right:50%;
}
.scroller {
z-index:2;
position:relative;
height:100%;
width:80vh;
overflow-y:auto;
opacity:0;
}
.q:hover .scroller {
opacity:1;
}
.infobox {
position:static;
width:42%;
margin:1.5%;
}
.left .infobox {
float:left;
}
.right .infobox {
float:right;
}
.title {
z-index:3;
position:absolute;
top:70%;
left:50%;
margin:0;
font-size:4vh;
opacity:0.3;
transform:translateX(-50%);
-o-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.bot .title {
top:11%;
}
.q:hover .title {
opacity:1;
}
h2 {
display:inline-block;
padding:8px;
border-radius:100%;
}
#credit {
position:fixed;
height:17px;
right:1%;
bottom:0%;
background-color:#ffffff;
border-radius:5px;
}

HTML

<div id="circle">

<div class="color top left q">
<img src="http://pre13.deviantart.net/137c/th/pre/f/2013/204/4/e/4e94ed862c237b1f7be63e9b13105493-d6eqpt3.jpg" class="mugshot" alt=""/>
<h2 class="title">Stats</h2>
<div class="scroller">
<div class="infobox">
<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>
</div>
</div>
</div>

<div class="color top right q">
<img src="http://pre13.deviantart.net/137c/th/pre/f/2013/204/4/e/4e94ed862c237b1f7be63e9b13105493-d6eqpt3.jpg" class="mugshot" alt=""/>
<h2 class="title">About</h2>
<div class="scroller">
<div class="infobox">
<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="" target="_blank">Link</a>
</div>
</div>
</div>

<div class="color bot left q">
<img src="http://img05.deviantart.net/f9f4/i/2013/273/3/4/do_not_bother_me_by_sandragh-d6olxpf.png" class="mugshot" alt=""/>
<h2 class="title">Extras</h2>
<div class="scroller">
<div class="infobox">
<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>

<div class="color bot right q">
<h2 class="title">OOC</h2>
<img src="http://img05.deviantart.net/f9f4/i/2013/273/3/4/do_not_bother_me_by_sandragh-d6olxpf.png" class="mugshot" alt=""/>
<div class="scroller">
<div class="infobox">
<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>

<a href="http://bitly.com/2vJNCgN" target="_blank" title="GS#02">
<img src="https://i.imgur.com/xgofQyf.png" id="credit"/>
</a>