feat: update 404 page (#194)
This commit is contained in:
Jerome Estiller
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
c6c1e347d0
commit
f18e0079ed
65
packages/learn/src/pages/404.css
Normal file
65
packages/learn/src/pages/404.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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'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>“</span>
|
||||
{randomQuote.quote}
|
||||
</p>
|
||||
<p className='author'>- {randomQuote.author}</p>
|
||||
</div>
|
||||
|
||||
<Link className='btn-curriculum' to='/'>
|
||||
View the Curriculum
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
39
packages/learn/static/img/freeCodeCamp-404.svg
Normal file
39
packages/learn/static/img/freeCodeCamp-404.svg
Normal file
@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 609.4 238.2" enable-background="new 0 0 609.4 238.2">
|
||||
<g fill="#006400">
|
||||
<path d="M327.4,111.5c0.5,2.3,0.8,4.1,1.3,5.9c0.7,2.8,1.8,5.7-0.9,8c-2.9,2.5-6.3,3.1-9.9,1.7c-3.5-1.3-4.6-4.4-4.7-7.7
|
||||
c-0.1-3.3,0.1-6.6,0.4-9.9c0.8-8.3-3.9-13.4-9.9-17.8c-0.9-0.7-2.1-1.1-3.2-1.3c-0.6-0.1-1.8,0.1-1.9,0.5
|
||||
c-0.3,0.6-0.2,1.8,0.2,2.2c3.4,3.4,3.9,7.5,3.2,11.9c-0.7,4.4-3.1,7.9-6.4,10.8c-3.5,3.1-7,6.2-10.4,9.5
|
||||
c-4.4,4.3-6.7,9.4-6.4,15.7c0.3,7.6,2,14.6,7,20.6c2.5,3,5.7,4.9,9.2,6.4c0.7,0.3,1,1.3,1.5,2c-0.9,0.3-2,1.2-2.7,0.9
|
||||
c-16.2-5.3-28.8-14.7-35.2-31.2c-5.3-13.6-2.8-26.3,4.4-38.4c5.7-9.6,11.7-19.1,17.2-28.8c3.6-6.4,6.3-13.1,6.3-20.7
|
||||
c0-8.7-4.3-14.9-10.6-20.2c-0.9-0.7-1.5-1.8-2.2-2.7c1.1-0.7,2.2-1.9,3.2-1.9c3.6,0.2,7.2,0.4,10.6,1.5
|
||||
c15.9,5.3,25.3,16.4,28.4,32.9c1.1,5.9,2.2,11.8,3.5,17.6c0.4,1.7,1.1,3.3,1.8,4.8c1.5,3,3.7,4.1,6.6,3.4c3.1-0.7,5.3-3,4.9-6.1
|
||||
c-0.4-3.3-1.6-6.5-2.6-9.6c-0.5-1.6-1.4-3.1-2-4.7c-0.2-0.5-0.2-1.6,0.1-1.8c0.5-0.3,1.4-0.3,2-0.1c0.9,0.3,1.8,0.9,2.5,1.5
|
||||
c11.1,8.7,19.7,19.3,22.8,33.3c3.2,14.3,3.3,28.4-3.6,41.8c-5.2,10.2-13.4,17.6-23.2,23.2c-0.6,0.3-1.3,0.7-1.8,0.7
|
||||
c-1.1-0.2-2.3-0.4-3.2-1.1c-0.3-0.3,0-1.9,0.5-2.5c2.6-3.2,5.4-6.2,8-9.4c9.2-11.2,8-25.9,1.9-35.5
|
||||
C332.7,114.7,330.9,112.6,327.4,111.5z"/>
|
||||
<path d="M83.6,152c-1.3-0.1-2.4-0.1-3.4-0.1c-16.4,0-32.8,0-49.2-0.1c-1.9,0-4-0.2-5.7-1.1c-5.8-2.9-6.8-9.4-2.5-14.8
|
||||
c6.5-8.2,13-16.4,19.5-24.5c14-17.6,28-35.1,42-52.7c2.7-3.4,5.9-5.8,10.6-4.7c4.2,0.9,6.9,4.2,6.9,8.5
|
||||
c0.1,10.5,0.1,21.1,0.1,31.6c0,12.8,0,25.7,0,38.5c0,1.9,0.5,2.6,2.5,2.5c2.7-0.2,5.4-0.1,8.2,0c5.1,0.1,8.8,3.6,8.9,8.4
|
||||
c0.1,4.7-3.4,8.1-8.5,8.4c-2.6,0.1-5.3,0.2-7.9,0c-2.3-0.2-3.1,0.5-3.1,3c0.1,9.3,0.1,18.6,0,27.9c0,4.3-3,7.8-7.1,8.6
|
||||
c-5.8,1.2-11-2.8-11.1-8.8c-0.1-9.2,0-18.4,0-27.7C83.6,154,83.6,153.1,83.6,152z M83.4,134.9c0-16.5,0-32.7,0-48.9
|
||||
c-0.2-0.1-0.3-0.1-0.5-0.2c-12.7,16.3-25.4,32.5-38.3,49.1C57.9,134.9,70.5,134.9,83.4,134.9z"/>
|
||||
<path d="M547.2,152c-1.3-0.1-2.3-0.2-3.3-0.2c-16.4,0-32.8,0-49.2-0.1c-1.9,0-4-0.2-5.7-1c-5.7-2.8-6.9-9.3-2.7-14.6
|
||||
c6.6-8.4,13.2-16.6,19.8-24.9c13.9-17.5,27.9-35,41.8-52.5c2.8-3.5,6-5.9,10.8-4.7c4,1,6.7,4.2,6.7,8.4c0.1,9.1,0.1,18.3,0.1,27.4
|
||||
c0,14,0,28,0,42c0,1,0,1.9,0,3.3c3.8,0,7.3-0.1,10.8,0c5.7,0.1,9.4,4.7,8.4,10.3c-0.6,3.4-3.6,6.1-7.5,6.4
|
||||
c-3.1,0.2-6.3,0.2-9.4,0.1c-1.9-0.1-2.4,0.6-2.4,2.4c0.1,9.4,0.1,18.8,0,28.2c-0.1,6.4-5.5,10.4-11.7,8.8
|
||||
c-3.7-0.9-6.5-4.7-6.5-8.9c-0.1-9.1,0-18.3,0-27.4C547.2,154,547.2,153.1,547.2,152z M547.1,86c-0.2-0.1-0.4-0.2-0.6-0.3
|
||||
c-12.7,16.3-25.3,32.5-38.3,49.1c13.3,0,26,0,38.9,0C547.1,118.4,547.1,102.2,547.1,86z"/>
|
||||
<path d="M154.2,119.5c0.3-41.5,14.1-72.2,40.6-97.3c2.3-2.2,5.3-4,8.2-5.3c1.6-0.7,4-0.6,5.6,0.1c3.8,1.6,4.8,4.9,2.3,8.2
|
||||
c-2.8,3.7-6,7.2-9.3,10.5c-13.9,14.1-23.7,30.6-28.5,49.9c-3.3,13.2-3.7,26.6-2.9,40.2c1,14.8,4.3,28.9,10.5,42.3
|
||||
c5.5,11.9,13.2,22.4,22.4,31.7c2.7,2.7,5.4,5.6,7.6,8.8c3.2,4.5,1.1,9.4-4.4,10.4c-1.2,0.2-2.9,0-4-0.7c-3.7-2.4-7.6-4.7-10.7-7.8
|
||||
c-18.3-18.4-29.9-40.5-34.5-66.1C155.6,134.6,154.9,124.5,154.2,119.5z"/>
|
||||
<path d="M435.1,120.1c0-15-2.2-29.5-7.3-43.6c-5.9-16.2-15.1-30.2-27.4-42.3c-2.2-2.2-4.3-4.6-6.2-7.1c-2.4-3.1-2.3-5.9-0.1-8.6
|
||||
c2.2-2.6,4.8-3.2,8.4-1.6c6,2.6,10.3,7.3,14.5,12.1c17.6,20.1,28.1,43.5,31.9,70.1c4.1,28.7,0.4,55.9-13.5,81.4
|
||||
c-7.4,13.5-16.6,25.8-28.8,35.3c-1.8,1.4-4.1,2.3-6.4,3c-3.1,1-5.4-0.7-7-3.3c-1.6-2.5-0.3-4.7,1.3-6.5
|
||||
c4.9-5.6,10.1-10.9,14.9-16.5c13.2-15.5,21.6-33.3,24.2-53.6C434.4,132.7,434.6,126.4,435.1,120.1z"/>
|
||||
<path d="M307.7,203.6c-23,0-45.9,0-68.9,0c-3.2,0-5.6-1-7.4-3.6c-1.6-2.4-2-5.1-0.6-7.7c1.4-2.7,3.4-4.5,6.8-4.6
|
||||
c12.3-0.1,24.7-0.4,37-0.4c32.4,0,64.7,0,97.1,0.1c2.3,0,4.6,0.2,6.9,0.4c3.7,0.4,6.8,4.2,6.6,8c-0.2,4.3-3.4,7.8-7.4,7.8
|
||||
C354.5,203.6,331.1,203.6,307.7,203.6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
2424
packages/learn/static/json/quotes.json
Normal file
2424
packages/learn/static/json/quotes.json
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user