gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: 404 page styles (#38775)

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2020-05-10 22:53:22 +05:30
committed by GitHub
parent 5ad48205a4
commit 161c0c20a2
2 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/FourOhFour/404.css
View File

@ -1,5 +1,5 @@
.notfound-page-wrapper { .notfound-page-wrapper {
min-height: 100%; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;

10
client/src/components/FourOhFour/index.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import Spinner from 'react-spinkit'; import { Loader, Spacer } from '../../components/helpers';
import { Link } from 'gatsby'; import { Link } from 'gatsby';
import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg'; import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
@ -31,13 +31,16 @@ class NotFoundPage extends Component {
<div className='notfound-page-wrapper'> <div className='notfound-page-wrapper'>
<Helmet title='Page Not Found | freeCodeCamp' /> <Helmet title='Page Not Found | freeCodeCamp' />
<img alt='404 Not Found' src={notFoundLogo} /> <img alt='404 Not Found' src={notFoundLogo} />
<h1>NOT FOUND</h1> <Spacer />
<h1>Page not found.</h1>
<Spacer />
{this.state.randomQuote ? ( {this.state.randomQuote ? (
<div> <div>
<p> <p>
We couldn&#x27;t find what you were looking for, but here is a We couldn&#x27;t find what you were looking for, but here is a
quote: quote:
</p> </p>
<Spacer />
<blockquote className='quote-wrapper'> <blockquote className='quote-wrapper'>
<p className='quote'> <p className='quote'>
<span>&#8220;</span> <span>&#8220;</span>
@ -47,8 +50,9 @@ class NotFoundPage extends Component {
</blockquote> </blockquote>
</div> </div>
) : ( ) : (
<Spinner color='#006400' name='ball-clip-rotate-multiple' /> <Loader />
)} )}
<Spacer size={2} />
<Link className='btn btn-cta' to='/learn'> <Link className='btn btn-cta' to='/learn'>
View the Curriculum View the Curriculum
</Link> </Link>