<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<title>CAO</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Special+Elite);
body {
font-family: "Special Elite", sans-serif;
background: #333333;
color: #dddddd;
}
header {
background: #222222;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
z-index: 1;
border-bottom: 4px solid #000;
padding: 20px;
box-sizing: border-box;
text-align: right;
}
header > span {
opacity: 0.7;
cursor: pointer;
}
header > span:hover {
opacity: 1;
}
.page {
padding: 70px 20px 170px;
margin: auto;
max-width: 650px;
}
h1 {
font-weight: normal;
font-size: 4.5em;
text-align: center;
text-shadow: 0 5px 0 #000;
}
h2 {
text-align: center;
font-weight: normal;
color: #999999;
font-size: 2em;
}
button {
outline: none;
font-size: 2em;
width: 100%;
cursor: pointer;
font-family: "Special Elite", sans-serif;
}
button.card {
color: #222222;
background: #dddddd;
border: 4px solid #999;
box-shadow: 0 5px 0 #999;
padding: 20px;
border-radius: 10px;
}
button.card:not(:last-child) {
margin-bottom: 20px;
}
button.card:active, button.card.black:active {
transform: translateY(5px);
box-shadow: none;
}
button.card.black {
background: #222222;
color: #dddddd;
border: 4px solid #000;
box-shadow: 0 5px 0 #000;
}
button.card:not(.active) {
opacity: 0.7;
}
button.card:hover {
opacity: 1.0;
}
div.card-list.read-only > button.card {
cursor: default;
}
div.card-list.read-only > button.card:hover {
opacity: 0.7;
}
div.card-list.read-only > button.card:active {
transform: none;
box-shadow: 0 5px 0 #999;
}
div.card-list.read-only > button.card.black:active {
box-shadow: 0 5px 0 #000;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 150px;
box-sizing: border-box;
}
div.bottom {
padding: 20px;
font-size: 1.5em;
background: #222222;
color: #dddddd;
border: 4px solid #000;
}
button.bottom {
font-size: 2.5em;
color: #dddddd;
border: 4px solid #0277BD;
background: #039BE5;
transition: .3s;
}
button.bottom:hover {
background: #0277BD;
font-size: 2.7em;
}
.message {
padding: 40px;
font-size: 2.5em;
text-align: center;
text-shadow: 0 5px 0 #000;
}
</style>
</head>
<body>
<header>
<span>Leave this room</span>
</header>
<div id="home" class="page">
<h1>Cards Against Humanity</h1>
<h2>A party game for horrible people.</h2>
<button class="bottom">Join game!</button>
</div>
<div id="become-judge" class="page">
<div class="card-list read-only">
<button class="card">The female orgasm.</button>
<button class="card">Coat hanger abortions.</button>
<button class="card">Some god-damn peace and quiet.</button>
<button class="card">Overpowering your father.</button>
<button class="card">Alcoholism.</button>
<button class="card">Count Chocula.</button>
<button class="card">My sex dungeon.</button>
<button class="card">24-hour media coverage.</button>
<button class="card">Words, words, words.</button>
<button class="card">A cop who is also a dog.</button>
</div>
<button class="bottom">Become judge!</button>
</div>
<div id="judge-collect" class="page">
<div class="card-list read-only">
<button class="card black">During high school, I never really fit in until I found _____ club.</button>
</div>
<div class="message">You have 2 cards!</div>
<div class="card-list read-only">
<button class="card">The female orgasm.</button>
<button class="card">Coat hanger abortions.</button>
<button class="card">Some god-damn peace and quiet.</button>
<button class="card">Overpowering your father.</button>
<button class="card">Alcoholism.</button>
<button class="card">Count Chocula.</button>
<button class="card">My sex dungeon.</button>
<button class="card">24-hour media coverage.</button>
<button class="card">Words, words, words.</button>
<button class="card">A cop who is also a dog.</button>
</div>
<button class="bottom">Collect!</button>
</div>
<div id="judge-choice" class="page">
<div class="card-list">
<button class="card">The female orgasm.</button>
<button class="card">Coat hanger abortions.</button>
<button class="card">Some god-damn peace and quiet.</button>
<button class="card">Overpowering your father.</button>
<button class="card">Alcoholism.</button>
<button class="card">Count Chocula.</button>
<button class="card">My sex dungeon.</button>
<button class="card">24-hour media coverage.</button>
<button class="card">Words, words, words.</button>
<button class="card">A cop who is also a dog.</button>
</div>
<div class="bottom">During high school, I never really fit in until I found _____ club..</div>
</div>
<div id="player-choice" class="page">
<div class="card-list">
<button class="card">The female orgasm.</button>
<button class="card">Coat hanger abortions.</button>
<button class="card">Some god-damn peace and quiet.</button>
<button class="card">Overpowering your father.</button>
<button class="card">Alcoholism.</button>
<button class="card">Count Chocula.</button>
<button class="card">My sex dungeon.</button>
<button class="card">24-hour media coverage.</button>
<button class="card">Words, words, words.</button>
<button class="card">A cop who is also a dog.</button>
</div>
<div class="bottom">Choose a card...</div>
</div>
</body>
</html>