Add gameplay GIF to front page

3 files changed, 13 insertions, 5 deletions

diff --git a/static/img/gameplay.gif b/static/img/gameplay.gif
new file mode 100644
index 0000000..8c6df51
--- /dev/null
+++ b/static/img/gameplay.gif
diff --git a/static/index.html b/static/index.html
index 80f4110..d43b44e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -28,6 +28,9 @@
     </p>
     <p class="description"><code><span class="no-copy">$</span> ssh sshtron.zachlatta.com</code></p>
     <p class="subtext">(WASD or vim keybindings for movement)</p>
+    <img class="gameplay-image" src="/img/gameplay.gif">
+    <p>Number of Players: <span id="players">0</span>s</p>
+    <p>Number of Games: <span id="games">0</span>s</p>
     <p class="subtext">
       By <a href="https://github.com/maxwofford">@MaxWofford</a> and
       <a href="https://github.com/zachlatta">@zachlatta</a>.
diff --git a/static/styles.css b/static/styles.css
index d570813..d23bb00 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -31,9 +31,9 @@ p {
 }
 
 .container {
-  margin: 0 auto;
-  min-width: 720px;
   text-align: center;
+  width: 720px;
+  margin: 0 auto;
 }
 
 .title {
@@ -41,12 +41,12 @@ p {
   font-weight: bold;
   font-style: italic;
   font-family: 'Good Times', cursive;
+  margin: 0 auto;
+  text-align: center;
+
   margin-top: 50px;
   margin-bottom: 40px;
-  text-align: center;
   letter-spacing: 0px;
-  margin-left: auto;
-  margin-right: auto;
   text-shadow: 0 0 5px rgba(255, 255, 255, 1),
                0 0 10px rgba(255, 255, 255, 0.5),
                0 0 15px rgba(255, 255, 255, 0.5),
@@ -111,3 +111,8 @@ code:hover {
   transition-duration: 1s;
   border: rgba(223, 116, 12, 25) 1px solid;
 }
+
+.gameplay-image {
+  margin-top: 3.45em;
+  box-shadow: rgba(90, 221, 244, 0.25) 0px 0px 52px;
+}
\ No newline at end of file