Skip to content

Instantly share code, notes, and snippets.

@passcod
Created Jun 19, 2012
Embed
What would you like to do?
Akiwiguy's thingie. But with slightly better CSS. Meh. Who am I kidding.
<!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; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment