the fade

src/assets/stylesheets/error.scss

@@ -1,3 +1,13 @@
+#container {
+  opacity: 100%;
+  -webkit-animation: fade 0.9s ease-in;
+  -moz-animation: fade 0.9s ease-in;
+  -ms-animation: fade 0.9s ease-in;
+  -o-animation: fade 0.9s ease-in;
+  animation: fade 0.9s ease-in;
+  background-color: black;
+}
+
 .error {
   background-color: #232323;
   width: 100%;
@@ -78,4 +88,10 @@
   margin-top: 10%;
   margin-right: 20px;
   line-height: 35px;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
 }

src/components/Error.js

@@ -8,7 +8,7 @@ export default class Error extends Component {
 
   render() {
     return (
-      <div>
+      <div className="c">
         <div className="error">
           <img
             className="error__photo"

src/routes/ErrorRoute.js

@@ -5,6 +5,7 @@ import Error from "../components/Error";
 import Footer from "../components/Footer";
 import DropdownContainer from "../components/DropdownContainer";
 import "../assets/stylesheets/app.scss";
+import "../assets/stylesheets/error.scss";
 
 export default function ErrorRoute() {
   const error = useRouteError();
@@ -15,14 +16,18 @@ export default function ErrorRoute() {
   // create function to toggle hamburger
   const hamburgerToggle = () => {
     setHamburger(!hamburger);
-  }
+  };
 
   return (
-    <div id="container">
+    <div style={{backgroundColor: '#232323'}}>
-      {hamburger ? <DropdownContainer hamburgerToggle={hamburgerToggle}/> : null}
+      <div id="container">
-      <NavBar hamburgerToggle={hamburgerToggle}></NavBar>
+        {hamburger ? (
-      <Error err={{ item: error }}></Error>
+          <DropdownContainer hamburgerToggle={hamburgerToggle} />
-      <Footer></Footer>
+        ) : null}
+        <NavBar hamburgerToggle={hamburgerToggle}></NavBar>
+        <Error err={{ item: error }}></Error>
+        <Footer></Footer>
+      </div>
     </div>
   );
 }