Skip to content

Commit a28f8c8

Browse files
abhirajadhikary06abhirajadhikary06
authored
Added 404 error page to the website (#81)
1 parent ded3c49 commit a28f8c8

File tree

8 files changed

+303
-0
lines changed

8 files changed

+303
-0
lines changed

‎.htaccess‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ErrorDocument 404 /404.html

‎404.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon1.png">
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="assets/404.css">
10+
<link rel="stylesheet" href="assets/customcursor.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
12+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
13+
<script src="https://kit.fontawesome.com/4cf6385dfa.js" crossorigin="anonymous"></script>
14+
<title>Eventica | Error 404</title>
15+
</head>
16+
17+
<body>
18+
<!-- Custom cursor section -->
19+
<div class="circle"></div>
20+
<div class="circle"></div>
21+
<div class="circle"></div>
22+
<div class="circle"></div>
23+
<div class="circle"></div>
24+
<div class="circle"></div>
25+
<div class="circle"></div>
26+
<div class="circle"></div>
27+
<div class="circle"></div>
28+
<div class="circle"></div>
29+
<div class="circle"></div>
30+
<div class="circle"></div>
31+
<div class="circle"></div>
32+
<div class="circle"></div>
33+
<div class="circle"></div>
34+
<div class="circle"></div>
35+
<div class="circle"></div>
36+
<div class="circle"></div>
37+
<div class="circle"></div>
38+
<div class="circle"></div>
39+
<div class="circle"></div>
40+
<div class="circle"></div>
41+
<div class="circle"></div>
42+
43+
<!-- Navigation bar section -->
44+
<nav class="navbar">
45+
<div class="navbar-container">
46+
<a href="index.html" class="logo-container">
47+
<img src="assets/images/logos/logo1.png" alt="Logo" class="logo">
48+
<span class="logo-text">Eventica</span>
49+
</a>
50+
<button class="mobile-menu-btn" aria-label="Toggle mobile menu" aria-expanded="false">
51+
<i class="fas fa-bars"></i>
52+
<i class="fas fa-times"></i>
53+
</button>
54+
<div class="nav-items">
55+
<ul class="nav-links">
56+
<li><a href="index.html"><i class="fas fa-house"></i> Home</a></li>
57+
<li><a href="#"><i class="fas fa-circle-info"></i> About</a></li>
58+
<li><a href="index.html#events"><i class="fas fa-calendar-alt"></i> Upcoming Events</a></li>
59+
<li><a href="assets/pastevents/"><i class="fas fa-calendar-check"></i> Past Events</a></li>
60+
<li><a href="assets/contributors/contributor.html"><i class="fa-solid fa-users"></i> Contributors</a></li>
61+
<li><a href="assets/contact/contact.html"><i class="fas fa-phone"></i> Contact</a></li>
62+
</ul>
63+
<div class="theme-switcher">
64+
<button id="theme-toggle" aria-label="Change theme color">
65+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
66+
<circle cx="12" cy="12" r="5"/>
67+
<path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4">
68+
</svg>
69+
</button>
70+
<div class="theme-options">
71+
<button class="theme-btn" data-color="blue" data-image="assets/images/errors/blue.svg" aria-label="Blue theme"></button>
72+
<button class="theme-btn" data-color="red" data-image="assets/images/errors/red.svg" aria-label="Red theme"></button>
73+
<button class="theme-btn" data-color="yellow" data-image="assets/images/errors/yellow.svg" aria-label="Yellow theme"></button>
74+
<button class="theme-btn" data-color="green" data-image="assets/images/errors/green.svg" aria-label="Green theme"></button>
75+
<button class="theme-btn" data-color="purple" data-image="assets/images/errors/purple.svg" aria-label="Purple theme"></button>
76+
</div>
77+
</div>
78+
<div class="dark-mode-switcher">
79+
<button id="dark-mode-toggle" aria-label="Toggle dark mode">
80+
<i class="fas fa-moon"></i>
81+
</button>
82+
</div>
83+
</div>
84+
</div>
85+
</nav>
86+
87+
<!-- About main section -->
88+
<main>
89+
<section class="error-section">
90+
<div class="container">
91+
<div class="error-content">
92+
<h1 class="error-title">404</h1>
93+
<h2 class="error-subtitle">Page Not Found</h2>
94+
<p class="error-text">
95+
Oops! The page you are looking for does not exist or has been moved.
96+
</p>
97+
<div class="error-actions">
98+
<a href="index.html" class="btn btn-primary">
99+
<i class="fas fa-home"></i> Back to Home
100+
</a>
101+
<a href="assets/contact/contact.html" class="btn btn-secondary">
102+
<i class="fas fa-envelope"></i> Contact Us
103+
</a>
104+
</div>
105+
</div>
106+
<div class="error-image">
107+
<img id="error-illustration" src="assets/images/errors/blue.svg" alt="404 Error Illustration">
108+
</div>
109+
</div>
110+
</section>
111+
</main>
112+
113+
<!-- Footer section -->
114+
<footer>
115+
<div class="footer-container">
116+
<div class="company-info">
117+
<h1 class="company-name heading"><img src="assets/images/logos/logo1.png">Eventica</h1>
118+
<p>Eventica, an ultimate guide to the dynamic and diverse events in Bangalore.
119+
As the heart of India's tech and cultural hub, Eventica is dedicated to bridging the gap between event organizers and eager participants, creating a vibrant community.</p>
120+
</div>
121+
<div class="quick-links">
122+
<h1 class="heading">Quick Links</h1>
123+
<ul class="footer-ul">
124+
<li><a href="index.html"><i class="fa fa-house" aria-hidden="true"></i> Home</a></li>
125+
<li><a href="#"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> About</a></li>
126+
<li><a href="index.html#events"><i class="fas fa-calendar-alt" aria-hidden="true"></i> Upcoming Events</a></li>
127+
<li><a href="pastevents/pastevents.html"><i class="fas fa-calendar-check" aria-hidden="true"></i> Past Events</a></li>
128+
<li><a href="contributors/contributor.html"><i class="fa-solid fa-users" aria-hidden="true"></i> Contributors</a></li>
129+
<li><a href="contact/contact.html"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a></li>
130+
</ul>
131+
</div>
132+
<div class="send-message">
133+
<h1 class="heading">Keep In Touch</h1>
134+
<form id="contact-form" name="Eventica Contact" autocomplete="off" netlify>
135+
<div class="form-group group1">
136+
<input type="text" id="name" name="name" placeholder="Enter your name" autocomplete="name" required oninput="validateName('name')">
137+
<input type="email" id="email" name="email" placeholder="Enter your email" autocomplete="email" required oninput="validateEmail('email')">
138+
</div>
139+
<div class="form-group group1">
140+
<textarea id="message" name="message" placeholder="Leave your message" required></textarea>
141+
<button type="submit">SEND</button>
142+
</div>
143+
</form>
144+
<div class="social">
145+
<a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
146+
<a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
147+
<a class="linkedin" href="https://www.linkedin.com/in/rakesh-roshan-9100/" target="_blank"><i class="fa fa-linkedin-square"></i></a>
148+
<a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
149+
<a class="instagram" href="https://www.instagram.com/rakesh250602/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
150+
<a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
151+
<a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
152+
<a class="discord" href="https://discord.com/users/944144134950748170" target="_blank"><i class="fa-brands fa-discord"></i></a>
153+
</div>
154+
</div>
155+
</div>
156+
157+
<p class="copyright">Created By Rakesh Roshan ❤️ | ©
158+
<script>
159+
document.write(new Date().getFullYear());
160+
</script>: All Rights Reserved
161+
</p>
162+
</footer>
163+
164+
<!-- Scroll to top button -->
165+
<a href="#" class="to-top">
166+
<i class="fas fa-chevron-up"></i>
167+
</a>
168+
169+
<script src="script.js"></script>
170+
<script src="assets/customcursor.js"></script>
171+
<script>
172+
document.querySelectorAll('.theme-btn').forEach(button => {
173+
button.addEventListener('click', () => {
174+
const imageSrc = button.getAttribute('data-image');
175+
document.getElementById('error-illustration').src = imageSrc;
176+
});
177+
});
178+
</script>
179+
</body>
180+
181+
</html>

‎assets/404.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
.error-section {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
padding: 4rem 2rem;
6+
min-height: 100vh;
7+
background-color: var(--background-color);
8+
color: var(--text-color);
9+
}
10+
11+
.container {
12+
display: flex;
13+
align-items: center;
14+
justify-content: space-between;
15+
max-width: 1200px;
16+
width: 100%;
17+
gap: 2rem;
18+
}
19+
20+
.error-content {
21+
flex: 1;
22+
padding: 2rem;
23+
border-radius: 10px;
24+
text-align: left;
25+
}
26+
27+
.error-title {
28+
font-size: 8rem;
29+
color: var(--primary-color);
30+
margin-bottom: 1rem;
31+
}
32+
33+
.error-subtitle {
34+
font-size: 3rem;
35+
color: var(--primary-color);;
36+
margin-bottom: 1rem;
37+
}
38+
39+
.error-text {
40+
font-size: 1.5rem;
41+
color: var(--light-text-color);
42+
margin-bottom: 2rem;
43+
}
44+
45+
.error-actions {
46+
display: flex;
47+
gap: 1rem;
48+
margin-bottom: 2rem;
49+
}
50+
51+
.error-actions .btn {
52+
display: inline-block;
53+
padding: 1rem 2rem;
54+
font-size: 1.2rem;
55+
color: #ffffff;
56+
border-radius: 5px;
57+
text-decoration: none;
58+
transition: background-color 0.3s ease;
59+
}
60+
61+
.error-actions .btn-primary {
62+
background-color: var(--primary-color);
63+
}
64+
65+
.error-actions .btn-primary:hover {
66+
background-color: var(--secondary-color);
67+
}
68+
69+
.error-actions .btn-secondary {
70+
background-color: var(--primary-color);
71+
}
72+
73+
.error-actions .btn-secondary:hover {
74+
background-color: var(--secondary-color);
75+
}
76+
77+
.error-image {
78+
flex: 1;
79+
}
80+
81+
.error-image img {
82+
max-width: 100%;
83+
height: auto;
84+
}
85+
86+
@media (max-width: 768px) {
87+
.container {
88+
flex-direction: column;
89+
text-align: center;
90+
}
91+
92+
.error-content {
93+
text-align: center;
94+
}
95+
96+
.error-title {
97+
font-size: 4rem;
98+
}
99+
100+
.error-subtitle {
101+
font-size: 1.5rem;
102+
}
103+
104+
.error-text {
105+
font-size: 1rem;
106+
}
107+
108+
.error-actions {
109+
justify-content: center;
110+
}
111+
112+
.error-actions .btn {
113+
padding: 0.5rem 1rem;
114+
font-size: 1rem;
115+
}
116+
}

‎assets/images/errors/blue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/images/errors/green.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/images/errors/purple.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/images/errors/red.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/images/errors/yellow.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)