-# Project Loading Screen
+# Project Loading Screen
## Introduction
"Project Loading Screen" is a web-based project that offers an endless display of iconic Apple and Windows loading screens. Designed by Shubh Thorat, this project is a unique artistic interpretation of the most familiar wait screens we encounter, intended to mesmerize and engage the audience.
-![Project Loading Screen]()
+
+
+
## Technology Stack
- React
@@ -21,9 +22,11 @@
- A creative and artistic take on everyday digital elements
## Usage
-Simply visit the deployed application at [Project Loading Screen]() and enjoy the seamless display of loading screens.
+Simply visit the deployed application at [Project Loading Screen](https://project-loading-screen.vercel.app) and enjoy the seamless display of loading screens.
-![GIF of Application in Use]()ate a new Pull Request)
+
+
+
## License
This project is protected under a custom license. The use, reproduction, modification, or distribution of this project and its code are strictly prohibited without prior written permission from Shubh Thorat. For inquiries regarding the use or distribution of this project, please contact [reapers-arras.0y@icloud.com](mailto:reapers-arras.0y@icloud.com).
diff --git a/public/animated.gif b/public/animated.gif
new file mode 100644
index 0000000..eece774
Binary files /dev/null and b/public/animated.gif differ
diff --git a/public/screen-recording.mp4 b/public/screen-recording.mp4
new file mode 100644
index 0000000..3a02c04
Binary files /dev/null and b/public/screen-recording.mp4 differ
diff --git a/public/screenshot.png b/public/screenshot.png
new file mode 100644
index 0000000..eee3c26
Binary files /dev/null and b/public/screenshot.png differ
diff --git a/src/App.js b/src/App.js
index dc44e41..0ff221d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,23 @@
-// App.js
import React from 'react';
-import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
-import Home from './pages/Home/Home'; // Adjust the path if your folder structure is different
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
+import Home from './pages/Home/Home';
import Apple from "./pages/Apple/Apple";
import Windows from "./pages/Windows/Windows";
-import Layout from "./pages/Layout/Layout";
import DVD from "./pages/DVD/DVD";
+import NotFoundPage from "./pages/404Page/404Page";
+import Layout from "./pages/Layout/Layout";
function App() {
return (
-
-
- {/* Main page routers */}
- }/>
- }/>
- }/>
-
-
-
+
+ }/>
+ }/>
+ }/>
+ }/>
+ {/* 404 Not Found route */}
+ }/>
+
);
}
diff --git a/src/pages/404Page/404Page.css b/src/pages/404Page/404Page.css
new file mode 100644
index 0000000..ae1b887
--- /dev/null
+++ b/src/pages/404Page/404Page.css
@@ -0,0 +1,68 @@
+.notfound-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ text-align: center;
+ background: rgba(0, 0, 0, 0.85); /* Darker background for contrast */
+ backdrop-filter: blur(15px); /* Increased blur effect */
+ color: white;
+}
+
+.notfound-header {
+ margin-bottom: 30px;
+}
+
+.notfound-content {
+ background: rgba(255, 255, 255, 0.1); /* Slight background for content */
+ padding: 40px;
+ border-radius: 15px; /* Rounded corners for content box */
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* Deeper shadow for depth */
+}
+
+.notfound-content h1 {
+ font-size: 120px;
+ line-height: 1;
+ margin: 0;
+ color: #007bff; /* Blue color for the number 404 */
+}
+
+.notfound-content h2 {
+ font-size: 28px;
+ margin: 10px 0;
+}
+
+.notfound-content p {
+ font-size: 16px;
+ line-height: 1.6;
+}
+
+.home-link {
+ display: inline-block;
+ margin-top: 20px;
+ padding: 10px 20px;
+ background-color: #007bff;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+}
+
+.home-link:hover {
+ background-color: #0056b3;
+}
+
+@media only screen and (max-width: 600px) {
+ .notfound-content h1 {
+ font-size: 60px;
+ }
+
+ .notfound-content h2 {
+ font-size: 22px;
+ }
+
+ .notfound-content {
+ width: 90%; /* Adjust width for mobile */
+ padding: 20px; /* Less padding on mobile */
+ }
+}
diff --git a/src/pages/404Page/404Page.js b/src/pages/404Page/404Page.js
new file mode 100644
index 0000000..a10829e
--- /dev/null
+++ b/src/pages/404Page/404Page.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import './404Page.css';
+
+const NotFoundPage = () => {
+ return (
+
+
+
+
404
+
Oops! Page not found.
+
+
Sorry, the page you're looking for doesn't exist. If you think something is broken, report a problem.
+ 
+
+