Modify 404 page

src/pages/404.css

@@ -0,0 +1,65 @@
+.notfound-page-wrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  text-align: center;
+}
+
+.notfound-page-wrapper img {
+  max-width: 380px;
+  margin-bottom: 1rem;
+}
+
+.quote-wrapper {
+  background-color: #eee;
+  padding: 20px 20px 20px 42px;
+  border-radius: 5px;
+  position: relative;
+  max-width: 980px;
+}
+
+.quote-wrapper .quote {
+  font-style: italic;
+  font-size: 20px;
+  margin-bottom: 0.6em;
+  text-align: left;
+}
+
+.quote-wrapper span {
+  font-size: 50px;
+  font-weight: 600;
+  color: #a5a5a5;
+  font-family: 'Arial', sans-serif;
+  font-style: normal;
+  padding-left: 15px;
+  padding-top: 5px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.quote-wrapper .author {
+  text-align: right;
+  margin: 0;
+}
+
+.btn-curriculum {
+  margin-top: 20px;
+  background-color: #ffac33;
+  background-image: linear-gradient(#ffcc4d, #ffac33);
+  border: 1px solid #f1a02a;
+  color: #292f33;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  max-height: 38px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.btn-curriculum:hover {
+  text-decoration: none;
+  color: inherit;
+}

src/pages/404.js

@@ -1,9 +1,32 @@
 import React from 'react';
+import Helmet from 'react-helmet';
+import Link from 'gatsby-link';
+
+import './404.css';
+import notFoundLogo from '../../static/img/freeCodeCamp-404.svg';
+import { quotes } from '../../static/json/quotes.json';
+
+let randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
 
 const NotFoundPage = () => (
-  <div>
+  <div className='notfound-page-wrapper'>
+    <Helmet title='Page Not Found | freeCodeCamp' />
+
+    <img alt='learn to code at freeCodeCamp 404' src={notFoundLogo} />
     <h1>NOT FOUND</h1>
-    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+    <p>We couldn't find what you were looking for, but here is a quote:</p>
+
+    <div className='quote-wrapper'>
+      <p className='quote'>
+        <span>&#8220;</span>
+        {randomQuote.quote}
+      </p>
+      <p className='author'>- {randomQuote.author}</p>
+    </div>
+
+    <Link className='btn-curriculum' to='/'>
+      View the Curriculum
+    </Link>
   </div>
 );