diff --git a/package.json b/package.json index 19f22ae..8c44a99 100644 --- a/package.json +++ b/package.json @@ -80,5 +80,4 @@ "devDependencies": { "gh-pages": "^3.1.0" } - -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index 7ae9b06..99a914a 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import Home from "./pages/Home/Home"; import Footer from "./components/Footer"; import COC from "./pages/COC/COC"; import Team from "./pages/Team/Team"; +import NotFoundPage from "./components/NotFoundPage/NotFound"; const App = () => { return ( @@ -30,6 +31,9 @@ const App = () => { + + + diff --git a/src/components/NotFoundPage/NotFound.js b/src/components/NotFoundPage/NotFound.js new file mode 100644 index 0000000..4a60716 --- /dev/null +++ b/src/components/NotFoundPage/NotFound.js @@ -0,0 +1,25 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import { Container } from "react-bootstrap"; + +const NotFound = () => { + return ( + + + +
+

404

+

Oops! Page Not Found

+

+ The page you are looking for does not exist. You may have mistyped + the address or the page may have moved. +

+ Back to Home Page +
+
+
+
+ ); +}; + +export default NotFound; diff --git a/src/components/NotFoundPage/NotFound.scss b/src/components/NotFoundPage/NotFound.scss new file mode 100644 index 0000000..dc52dab --- /dev/null +++ b/src/components/NotFoundPage/NotFound.scss @@ -0,0 +1,47 @@ +#not-found-content { + max-width: 600px; + text-align: center; + margin-bottom: 100px; + + h2 { + font-size: 18vw; + color: $primary-blue; + line-height: 1em; + } + h4 { + position: relative; + font-size: 1.5em; + margin-bottom: 15px; + color: $black; + font-weight: 300; + display: inline-block; + } + + p { + color: $github-button-black; + font-size: 1.2em; + } + a { + border-bottom: 3px solid $primary-blue; + color: $primary-blue; + display: inline-block; + font-size: 18px; + font-weight: 600; + margin: 5px; + text-decoration: none; + transition: all 0.3s ease; + &:hover { + border-bottom: 3px solid $link-blue; + color: $link-blue; + } + } + @media (max-width: 600px) { + margin-bottom: 50px; + p { + font-size: 1em; + } + a { + margin-top: 0px; + } + } +} diff --git a/src/index.scss b/src/index.scss index ed6a55c..0e23eb8 100644 --- a/src/index.scss +++ b/src/index.scss @@ -11,3 +11,4 @@ @import "./components/Twitter/Twitter.scss"; @import "./components/Footer/Footer.scss"; @import "./pages/COC/COC.scss"; +@import "./components/NotFoundPage/NotFound.scss";