Fix: Add some clarifying text to the 404 error page

package.json

@@ -56,4 +56,4 @@
     "purgecss": "^2.3.0",
     "tailwindcss": "^1.5.2"
   }
-}
+}

src/App.js

@@ -1,9 +1,11 @@
 import React from 'react';
+import ErrorPage from './errorPage/errorpage';
 
 function App() {
   return (
     <div>
-      <h1 className="text-2xl bg-lightblue">The Movie Bubble</h1>
+      {/* <h1 className="text-2xl bg-lightblue">The Movie Bubble</h1> */}
+      <ErrorPage />
     </div>
   );
 }

src/errorPage/errorpage.css

@@ -0,0 +1,53 @@
+.errorPage {
+  margin: 0;
+  padding: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.title {
+  top: 20%;
+  transform: translate(-6%, -20%);
+  font-size: 1.5rem;
+  width: 100%;
+  color: #000;
+}
+
+.title > p {
+  margin-right: -5%;
+}
+.errorPage-trouble {
+  padding-bottom: 1%;
+  padding-top: 2%;
+}
+.title > ul {
+  list-style: decimal;
+}
+.title > ul,
+.errorPage-trouble {
+  margin-left: 17%;
+  font-size: 1.5rem;
+}
+.title > p span {
+  color: darkorange;
+  font-size: 43px;
+}
+
+.bubble-home-text {
+  left: 33%;
+  margin-top: 3%;
+}
+.bubble-home-text > p > a {
+  color: darkorange;
+}
+
+/* @media screen and (min-width: 601px) {
+    .title {
+      font-size: 20px;
+    }
+  } */
+
+/* @media screen and (max-width: 600px) {
+    .title {
+      font-size: 10px;
+    } */

src/errorPage/errorpage.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import './errorpage.css';
+import Errorimg from './errorpage.png';
+
+function errorPage() {
+  return (
+    <>
+      <div className="errorPage max-w-full relative">
+        <div className="m-0 p-0 ">
+          <img src={Errorimg}></img>{' '}
+        </div>
+        <div className="title absolute">
+          <p className="text-center  font-sans font-bold lg:text-3xl md:text-xl sm:text-xs overflow-auto">
+            {' '}
+            Error<span> 404</span> Page Not Found
+            <br></br> “Oops! Something is broken.”
+          </p>
+
+          <p className="errorPage-trouble lg:text-xl md:text-xl sm:text-xs overflow-hidden lg:max-w-3xl md:max-w-2xl sm:max-w-xs">
+            Troubleshooting <br></br>
+            Here are a few things to try:
+          </p>
+          <ul className="lg:text-xl md:text-xl sm:text-xs  lg:max-w-3xl md:max-w-xs sm:max-w-xs overflow-x-visible">
+            <li>Reload page or even restart your browser</li>
+            <li>Test your net connection (No internet connection)</li>
+            <li>
+              Make sure your security software isn't blocking Movie bubble
+              website
+            </li>
+          </ul>
+
+          <div className="relative">
+            <div className="bubble-home-text absolute">
+              <p className="text-2xl font-sans font-bold">
+                Go back to <a href="#">Home Page</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+export default errorPage;