From b15116e62db18534c5b2fa1d1000484ee172693b Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Wed, 25 Nov 2015 08:09:36 +0000
Subject: [PATCH] Added content to 404 page

---
 static/src/less/style.less | 30 +++++++++++++++++++++++++++++-
 templates/core/404.html    | 26 +++++++++++---------------
 2 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/static/src/less/style.less b/static/src/less/style.less
index 8114701..84b520d 100644
--- a/static/src/less/style.less
+++ b/static/src/less/style.less
@@ -76,4 +76,32 @@ footer {
     margin-top: 15px;
   }
 }
-/* @end Footer */
\ No newline at end of file
+/* @end Footer */
+
+/* @group 404 */
+.four-o-four {
+  .header {
+    height: 15vh;
+    font-size: 35px;
+    text-align: center;
+  }
+  .image {
+    background: url(../img/ninjas.png);
+    background-size: cover;
+    background-position: center;
+    height: 70vh;
+  }
+  .message {
+    height: 15vh;
+    color: white;
+    background-color: #232323;
+    text-align: center;
+  }
+  .move-on {
+    text-align: center;
+    background-color: #333;
+    color: white;
+    height: 5vh;
+  }
+}
+/* @end 404 */
\ No newline at end of file
diff --git a/templates/core/404.html b/templates/core/404.html
index 12337ba..701d257 100644
--- a/templates/core/404.html
+++ b/templates/core/404.html
@@ -1,27 +1,23 @@
 {% extends 'base.html' %}
 
-{% block htmltitle %}Oh no, There's nothing here!{% endblock %}
+{% block htmltitle %}404 - It's not here!{% endblock %}
 
-{% block headercontent %}
-  <div class="row">
-    <h1>404 - Page not found</h1>
-  </div>
-  <div class="row">
-    <h4>The page you were looking for could not be found. </h4>
-    <h4>Don't worry, I've sent these people to to go and find it. Rest assured it will be found!</h4>
-  </div>
-{% endblock %}
-
-{% block bodyClass %}404{% endblock %}
+{% block bodyClass %}four-o-four{% endblock %}
 
 {% block content %}
-  <div class="container-fluid">
+  <div class="container header">
+    <h1>Uh Oh - There's nothing here!</h1>
+  </div>
+  <div class="container-fluid image"></div>
+  <div class="container-fluid message">
     <div class="container">
-      <h1>There's nothing here!</h1>
+      <h3>The page you were looking for could not be found.</h3>
+      <h4>Don't worry, I've send these people to go and find it. Rest assured it will be found.</h4>
     </div>
   </div>
-  <div class="container-fluid">
+  <div class="container-fluid move-on">
     <div class="container">
+      <h4>Nope, there's nothing more down here either. Why not <a href="javascript:window.history.back()">Go back</a> or <a href="/">Return Home</a></h4>
     </div>
   </div>
 {% endblock %}
\ No newline at end of file