Skip to content

Added 404 Error Page #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added 404 Error Page #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
995d2e9
Added 404 Page Not Found page
Prachi-Shende Jan 25, 2025
d8b791b
Solved navigation issue
Prachi-Shende Jan 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import UpcomingProjects from './Components/UpcomingProjects';
import VerticalTimeline from './Components/Timeline';
import Carousel from './Components/Carousel';
import Hero from './Components/Hero';
import Footer from "./Components/Footer"
import Footer from "./Components/Footer";
import PageNotFound from './Components/PageNotFound';


const Homepage = () => {
Expand Down Expand Up @@ -51,6 +52,7 @@ function App() {
<Route path="/achievements" element={<Achievements />} />
<Route path="/past-projects" element={<PastProjects />} />
<Route path="/upcoming-projects" element={<UpcomingProjects />} />
<Route path="*" element={<PageNotFound />} />
{/* <Route path="/time" element={<VerticalTimeline />} /> */}

{/* <Route path="/" element={<OrderManagement />} /> */}
Expand Down
43 changes: 43 additions & 0 deletions src/Components/PageNotFound.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import { Link } from 'react-router-dom';
import '../index.css';

const PageNotFound = () => {
return (
<div className="relative bg-transparent min-h-screen w-full flex flex-col items-center justify-center text-center px-4">
{/* Main Message */}
<div className="mb-12">
<h1 className="text glitch" data-text="404">
404
</h1>
<p className="text glitch" data-text="Code Not Found!">
Code Not Found!
</p>
<p className="text-lg text-gray-500 mt-3 max-w-lg mx-auto">
This page isn’t in the code.<br />Let’s head back to the main branch!
</p>
</div>

{/* Go Back Button */}
<div className="mt-8 relative z-20">
<Link
to="/"
className="block text-center text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-lg px-8 py-4 transition duration-300"
>
Return to Homepage
</Link>
</div>

{/* SVG for styling */}
<svg
className="absolute bottom-0 left-0 right-0 z-10 opacity-100"
viewBox="0 0 1440 320"
style={{ clipPath: 'polygon(0 0, 100% 0, 100% 90%, 0 100%)' }}
>
<use href="src/assets/wordcloud.svg" />
</svg>
</div>
);
};

export default PageNotFound;
258 changes: 227 additions & 31 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,238 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

#root {
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}

body, html {
width: 100%;
height: 100%;
background-color: black;
}

.gruppo-regular {
font-family: "Gruppo", sans-serif;
font-weight: 400;
font-style: normal;
.content {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Allow content to grow and not be cut off */
}

.text {
position: relative;
color: white;
font-weight: 700;
font-size: 40px;
transform: scale(2);
padding: 30px;
letter-spacing: 2px;
text-transform: uppercase;
}

.text:before,
.text:after {
padding: 30px;
color: white;
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
background: transparent;
overflow: hidden;
top: 0;
}

.text:before {
left: 1px;
text-shadow: -1px 0 red;
animation: glitch-1 5s linear infinite reverse;
}

.text:after {
left: -1px;
text-shadow: -2px 0 blue;
animation: glitch-2 5s linear infinite reverse;
}

.text-lg.text-gray-500 {
font-size: 25px;
color: white;
font-weight: 600;
max-width: 600px;
margin: 20px auto;
}

@keyframes glitch-1 {
0% {
clip: rect(132px, auto, 101px, 30px);
}
5% {
clip: rect(17px, auto, 94px, 30px);
}
10% {
clip: rect(40px, auto, 66px, 30px);
}
@layer utilities {
.shadow-gradient {
box-shadow: 0 25px 50px -12px rgba(199, 21, 133, 0.25), 0 35px 60px -15px rgba(25, 25, 112, 0.3);
}
15% {
clip: rect(87px, auto, 82px, 30px);
}
20% {
clip: rect(137px, auto, 61px, 30px);
}
25% {
clip: rect(34px, auto, 14px, 30px);
}
30% {
clip: rect(133px, auto, 74px, 30px);
}
35% {
clip: rect(76px, auto, 107px, 30px);
}
40% {
clip: rect(59px, auto, 130px, 30px);
}
45% {
clip: rect(29px, auto, 84px, 30px);
}
50% {
clip: rect(22px, auto, 67px, 30px);
}
55% {
clip: rect(67px, auto, 62px, 30px);
}
60% {
clip: rect(10px, auto, 105px, 30px);
}
65% {
clip: rect(78px, auto, 115px, 30px);
}
70% {
clip: rect(105px, auto, 13px, 30px);
}
75% {
clip: rect(15px, auto, 75px, 30px);
}
80% {
clip: rect(66px, auto, 39px, 30px);
}
85% {
clip: rect(133px, auto, 73px, 30px);
}
90% {
clip: rect(36px, auto, 128px, 30px);
}
95% {
clip: rect(68px, auto, 103px, 30px);
}
100% {
clip: rect(14px, auto, 100px, 30px);
}
}

@keyframes bounceLess {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
@keyframes glitch-2 {
0% {
clip: rect(129px, auto, 36px, 30px);
}
5% {
clip: rect(36px, auto, 4px, 30px);
}

.animate-bounce-less {
animation: bounceLess 1s infinite;
10% {
clip: rect(85px, auto, 66px, 30px);
}
15% {
clip: rect(91px, auto, 91px, 30px);
}
20% {
clip: rect(148px, auto, 138px, 30px);
}
25% {
clip: rect(38px, auto, 122px, 30px);
}
30% {
clip: rect(69px, auto, 54px, 30px);
}
35% {
clip: rect(98px, auto, 71px, 30px);
}
40% {
clip: rect(146px, auto, 34px, 30px);
}
45% {
clip: rect(134px, auto, 43px, 30px);
}
50% {
clip: rect(102px, auto, 80px, 30px);
}
55% {
clip: rect(119px, auto, 44px, 30px);
}
60% {
clip: rect(106px, auto, 99px, 30px);
}
65% {
clip: rect(141px, auto, 74px, 30px);
}
70% {
clip: rect(20px, auto, 78px, 30px);
}
75% {
clip: rect(133px, auto, 79px, 30px);
}
80% {
clip: rect(78px, auto, 52px, 30px);
}
85% {
clip: rect(35px, auto, 39px, 30px);
}
90% {
clip: rect(67px, auto, 70px, 30px);
}
95% {
clip: rect(71px, auto, 103px, 30px);
}
100% {
clip: rect(83px, auto, 40px, 30px);
}
}

body {
scrollbar-width: thin; /* For Firefox */
scrollbar-color: #888 transparent; /* For Firefox */
@tailwind base;
@tailwind components;
@tailwind utilities;

.gruppo-regular {
font-family: "Gruppo", sans-serif;
font-weight: 400;
font-style: normal;
}

@layer utilities {
.shadow-gradient {
box-shadow: 0 25px 50px -12px rgba(199, 21, 133, 0.25), 0 35px 60px -15px rgba(25, 25, 112, 0.3);
}
}

@keyframes bounceLess {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}

.animate-bounce-less {
animation: bounceLess 1s infinite;
}

body {
scrollbar-width: thin; /* For Firefox */
scrollbar-color: #888 transparent; /* For Firefox */
}

#root::-webkit-scrollbar {
width: 5px;
}
Expand All @@ -50,6 +246,6 @@
border-radius: 10px;
}

.bgC{
background-image: repeating-linear-gradient(157deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(112deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(247deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(202deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px,transparent 1px, transparent 11px,rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px,transparent 12px, transparent 32px),linear-gradient(202deg, rgb(1, 9, 29),rgb(7, 14, 49));
}
.bgC {
background-image: repeating-linear-gradient(157deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), repeating-linear-gradient(112deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), repeating-linear-gradient(247deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), repeating-linear-gradient(202deg, rgba(237,225,225, 0.05) 0px, rgba(237,225,225, 0.05) 1px, transparent 1px, transparent 11px, rgba(237,225,225, 0.05) 11px, rgba(237,225,225, 0.05) 12px, transparent 12px, transparent 32px), linear-gradient(202deg, rgb(1, 9, 29), rgb(7, 14, 49));
}