Added content to 404 page

static/src/less/style.less

@@ -76,4 +76,32 @@ footer {
     margin-top: 15px;
   }
 }
-/* @end Footer */
+/* @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 */

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 %}
+{% block bodyClass %}four-o-four{% endblock %}
-  <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 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 %}