diff --git a/index.html b/index.html
new file mode 100644
index 0000000..046f8da
--- /dev/null
+++ b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="Hone your skills! Beat Voldemort!">
+    <!-- For mobile responsive behaviors -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Using a CSS reset like normalize.css is usually a good idea -->
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" type="text/css">
+    <!-- This is what loads the CSS we have written -->
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <title>Galumphing Banderwoozles</title>
+  </head>
+  <body>
+    <!-- For gathering the arguments about board size from the user. -->
+    <form id="args">
+      <input id="rows" name="rows" placeholder="Number of rows?">
+      <input id="cols" name="cols" placeholder="Number of cols?">
+      <button id="submit">Play!</button>
+    </form>
+    <!-- Show some numbers relating to the current board state. -->
+    <div class="center">
+      <h1 id="reds" class="red">0</h1>
+      <h1 id="greens" class="green">0</h1>
+      <h1 id="blues" class="blue">0</h1>
+    </div>
+    <!-- Our actual board. Empty at first, then updated after the game starts. -->
+    <div class="center">
+      <div id="tile-wrapper"></div>
+    </div>
+    <!-- Paste Google jQuery snippet here! -->
+    
+    <!-- Loading JavaScript libraries should normally be done at the end of the
+         <body> tag. That way, loading the JavaScript doesn't "block" your page
+         from loading, but instead both can load at the same time. -->
+    
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..46cc8a6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,103 @@
+body {
+  background: #333;
+  padding: 5px;
+}
+
+.center {
+  text-align: center;
+}
+
+input {
+  border: 1px solid #333;
+  border-radius: 4px;
+  padding: 15px;
+  background: #222;
+  box-shadow: rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;
+  font-size: 16px;
+  text-align: center;
+  color: white;
+}
+
+button {
+  border: none;
+  background: #ccc;
+  border-radius: 4px;
+  padding: 15px;
+  font-size: 16px;
+  color: #333;
+  box-shadow: rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 1px inset,rgba(0,0,0,0.4) 0 -1px 1px inset,rgba(0,0,0,0.4) 0 1px 1px;
+}
+
+button:hover {
+  cursor: pointer;
+  background: #ddd;
+}
+
+button:focus, button:active {
+  outline: 0;
+}
+
+button:active, .tile.green:active {
+  box-shadow: rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;
+}
+
+#args {
+  width: 564px;
+  margin: 20px auto 0 auto;
+}
+
+.blue, #blues {
+  background-color: #3c78d8;
+}
+
+.green, #greens  {
+  background-color: #6aa84f;
+}
+
+.red, #reds {
+  background-color: #e06666;
+}
+
+.tile {
+  height: 60px;
+  width: 60px;
+  border: 2px solid #333;
+  border-radius: 4px;
+  display: inline-block;
+  margin: 4px;
+}
+
+.tile.green {
+  cursor: pointer;
+  box-shadow: rgba(255,255,255,0.1) 0 1px 2px 1px inset,rgba(255,255,255,0.2) 0 2px inset,rgba(0,0,0,0.4) 0 -2px 2px inset,rgba(0,0,0,0.4) 1px 1px 1px;
+  border: #333;
+  height: 64px;
+  width: 64px;
+}
+
+.tile.green:hover {
+  background-color: #79b45f;
+}
+
+h1 {
+  color: white;
+  display: inline-block;
+  padding: 5px 25px;
+  font-family: Menlo, monospace;
+  border-radius: 4px;
+  box-shadow: rgba(255,255,255,0.1) 0 1px 0,rgba(0,0,0,0.8) 0 1px 7px 0px inset;
+  border: 1px solid black;
+}
+
+@media (max-width: 768px) {
+  #args {
+    margin: none;
+    width: auto;
+  }
+
+  button, input {
+    box-sizing: border-box;
+    width: 100%;
+    margin: 2px auto;
+  }
+}
