passcod/eep.html

## eep.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(function(){
    	$("button").click(function(){
    		$('body').toggleClass('expanded');
    	});
    });
    </script>
  </head>
  <body>
    <div id="outer">
      <div id="left">
        <img src="me.png" alt="Me!">
        <h1>Zarek Jenkinson</h1>
        <h2>/ akiwiguy</h2>
        <p>Completely random, socially-deprived, 15 year old computer nerd.</p>
      </div>
      <div id="right">
        <button>
          <span class="small">Expand!</span>
          <span class="big">Shrink!</span>
        </button>
      </div>
      <div style="clear: both"></div>
    </div>
  </body>
</html>

## style.css
* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

body {
  background: black url("bg.png");
  font-family: sans-serif; }

#outer {
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  bottom: 80%;
  min-height: 400px;
  margin-top: -200px;
  border-top-left-radius: 15px;
  -moz-border-radius-top-left: 15px;
  -webkit-border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  -moz-border-radius-bottom-right: 15px;
  -webkit-border-bottom-right-radius: 15px;
  background: rgba(0, 0, 0, 0.85);
  transition: all 2s;
  -o-transition: all 2s;
  -ms-transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all 2s; }
  .expanded #outer {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 400px;
    margin: 10px; }

#left {
  float: left;
  text-align: center;
  color: white;
  width: 240px;
  height: 400px;
  padding: 20px; }
  .expanded #left {
    height: auto; }
  #left a:link, #left a:visited, #left a:active, #left a:hover {
    color: white; }
  #left h1 {
    font: 1.5em sans-serif; }
  #left h2 {
    font: 1.2em sans-serif; }
  #left img {
    border-top-left-radius: 15px;
    -moz-border-radius-top-left: 15px;
    -webkit-border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    -moz-border-radius-bottom-right: 15px;
    -webkit-border-bottom-right-radius: 15px; }

#right {
  height: 400px;
  width: 500px;
  padding: 20px;
  float: right;
  color: white; }
  .expanded #right {
    float: none;
    width: 100%;
    height: auto; }

button .big {
  display: none; }
  .expanded button .big {
    display: block; }

.expanded button .small {
  display: none; }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	$(function(){
	$("button").click(function(){
	$('body').toggleClass('expanded');
	});
	});
	</script>
	</head>
	<body>
	<div id="outer">
	<div id="left">
	<img src="me.png" alt="Me!">
	<h1>Zarek Jenkinson</h1>
	<h2>/ akiwiguy</h2>
	<p>Completely random, socially-deprived, 15 year old computer nerd.</p>
	</div>
	<div id="right">
	<button>
	<span class="small">Expand!</span>
	<span class="big">Shrink!</span>
	</button>
	</div>
	<div style="clear: both"></div>
	</div>
	</body>
	</html>
	* {
	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box; }

	body {
	background: black url("bg.png");
	font-family: sans-serif; }

	#outer {
	position: absolute;
	top: 50%;
	left: 20%;
	right: 20%;
	bottom: 80%;
	min-height: 400px;
	margin-top: -200px;
	border-top-left-radius: 15px;
	-moz-border-radius-top-left: 15px;
	-webkit-border-top-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-radius-bottom-right: 15px;
	-webkit-border-bottom-right-radius: 15px;
	background: rgba(0, 0, 0, 0.85);
	transition: all 2s;
	-o-transition: all 2s;
	-ms-transition: all 2s;
	-moz-transition: all 2s;
	-webkit-transition: all 2s; }
	.expanded #outer {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-height: 400px;
	margin: 10px; }

	#left {
	float: left;
	text-align: center;
	color: white;
	width: 240px;
	height: 400px;
	padding: 20px; }
	.expanded #left {
	height: auto; }
	#left a:link, #left a:visited, #left a:active, #left a:hover {
	color: white; }
	#left h1 {
	font: 1.5em sans-serif; }
	#left h2 {
	font: 1.2em sans-serif; }
	#left img {
	border-top-left-radius: 15px;
	-moz-border-radius-top-left: 15px;
	-webkit-border-top-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-radius-bottom-right: 15px;
	-webkit-border-bottom-right-radius: 15px; }

	#right {
	height: 400px;
	width: 500px;
	padding: 20px;
	float: right;
	color: white; }
	.expanded #right {
	float: none;
	width: 100%;
	height: auto; }

	button .big {
	display: none; }
	.expanded button .big {
	display: block; }

	.expanded button .small {
	display: none; }