404 page added

Author: engineerscodes

src/App.js

@@ -6,18 +6,20 @@ import HomePage from "./RouterPages/HomePage";
 import ScrollToTop from "./components/ScrollToTop";
 import TeamPage from "./RouterPages/TeamPage";
 import Announcement from "./RouterPages/Announcement";
+import NotFound from "./RouterPages/NotFound404";
 class App extends Component {
   render() {
     return (
       <Router>
         <ScrollToTop />
         <div className="App">
           <Switch>
-             <Route path="/" component={HomePage} exact />
+            <Route path="/" component={HomePage} exact />
             <Route path="/AndroidClub" component={HomePage} exact />
             <Route path="/AndroidClub/Team" component={TeamPage} />
             <Route path="/AndroidClub/Events" component={Event} />
             <Route path="/AndroidClub/ANNOUNCEMENT" component={Announcement} />
+            <Route component={NotFound} />
           </Switch>
         </div>
       </Router>

src/INFOSECTION/404style.css

@@ -0,0 +1,39 @@
+#waterP{
+    position: relative;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     min-height: 100vh;
+     width: 100%;
+     overflow: hidden;
+     background-color: #000;
+}
+
+
+#waterP h2{
+    color: #fff;
+
+    font-size: 6em;
+    position: absolute;
+}
+
+#waterP h2:nth-child(1){
+    color: transparent;
+    -webkit-text-stroke: 2px #20DEA0;
+}
+
+#waterP h2:nth-child(2) {
+    color: #20DEA0;
+    -webkit-text-stroke: 2px #20DEA0;
+    animation: animate 2s ease-in-out infinite;
+}
+
+@keyframes animate{
+
+    0%,100%{
+        clip-path: polygon(0% 45%,15% 44%,32% 50%,54% 60%,70% 61%,84% 59%,100% 52%,100% 100%,0% 100%);
+    }
+    50%{
+        clip-path: polygon(0% 60%,16% 65%,34% 66%,51% 62%,67% 50%,84% 45%,100% 46%,100% 100%, 0% 100%);
+    }
+}

src/Images/wave.svg

@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import "../INFOSECTION/404style.css";
+
+class NotFound extends Component {
+   
+  render() {
+   return (
+     <>
+       <div id="waterP">
+         <h2> PAGE NOT FOUND </h2>
+         <h2> PAGE NOT FOUND </h2>
+       </div>
+     </>
+   );
+  }
+}
+export default NotFound;