Skip to content

Commit acafc82

Browse files
tharun9772tharun9772
authored
Create a custom 404 error page
Added a styled 404 error page with a cosmic theme.
1 parent f81c065 commit acafc82

1 file changed

Lines changed: 195 additions & 3 deletions

File tree

‎404.html‎

Lines changed: 195 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,195 @@
1-
<h1>ERROR: 404 not found</h1>
2-
<h2>Webpage not found.</h2>
3-
<p>If youw were using BloxProxy, restart the website or contact support</p>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>404 - Lost in the Neon Cosmos</title>
7+
<style>
8+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
9+
10+
:root {
11+
--neon-pink: #ff2a85;
12+
--dark-pink: #8a1042;
13+
--bg-dark: #0f050d;
14+
--text-light: #fbe6ef;
15+
}
16+
17+
body {
18+
margin: 0;
19+
padding: 0;
20+
min-height: 100vh;
21+
background: radial-gradient(circle at center, var(--dark-pink) 0%, var(--bg-dark) 80%);
22+
color: var(--text-light);
23+
font-family: 'Poppins', sans-serif;
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: center;
27+
align-items: center;
28+
text-align: center;
29+
overflow: hidden;
30+
position: relative;
31+
}
32+
33+
/* Subtle starry background effect */
34+
body::before {
35+
content: '';
36+
position: absolute;
37+
top: 0; left: 0; right: 0; bottom: 0;
38+
background-image:
39+
radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
40+
radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
41+
radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
42+
background-size: 100px 100px;
43+
z-index: 0;
44+
pointer-events: none;
45+
}
46+
47+
.container {
48+
position: relative;
49+
z-index: 1;
50+
max-width: 800px;
51+
padding: 2rem;
52+
animation: float 6s ease-in-out infinite;
53+
}
54+
55+
.error-code {
56+
font-size: clamp(6rem, 15vw, 12rem);
57+
font-weight: 800;
58+
margin: 0;
59+
line-height: 1;
60+
color: transparent;
61+
-webkit-text-stroke: 3px var(--neon-pink);
62+
text-shadow:
63+
0 0 10px rgba(255, 42, 133, 0.3),
64+
0 0 20px rgba(255, 42, 133, 0.3),
65+
0 0 40px rgba(255, 42, 133, 0.2);
66+
letter-spacing: 5px;
67+
}
68+
69+
.icon {
70+
font-size: 3rem;
71+
margin-top: -20px;
72+
margin-bottom: 20px;
73+
display: block;
74+
text-shadow: 0 0 15px var(--neon-pink);
75+
}
76+
77+
h1 {
78+
font-size: clamp(1.5rem, 4vw, 2.5rem);
79+
font-weight: 600;
80+
margin-bottom: 1rem;
81+
color: #ffffff;
82+
}
83+
84+
p {
85+
font-size: 1.1rem;
86+
line-height: 1.6;
87+
margin-bottom: 2.5rem;
88+
color: #d1b8c4;
89+
max-width: 600px;
90+
margin-left: auto;
91+
margin-right: auto;
92+
}
93+
94+
.buttons {
95+
display: flex;
96+
gap: 1.5rem;
97+
justify-content: center;
98+
flex-wrap: wrap;
99+
}
100+
101+
.btn {
102+
display: inline-block;
103+
padding: 12px 30px;
104+
border-radius: 50px;
105+
text-decoration: none;
106+
font-weight: 600;
107+
font-size: 0.9rem;
108+
text-transform: uppercase;
109+
letter-spacing: 1px;
110+
transition: all 0.3s ease;
111+
}
112+
113+
.btn-primary {
114+
background-color: var(--neon-pink);
115+
color: #ffffff;
116+
border: 2px solid var(--neon-pink);
117+
box-shadow: 0 0 15px rgba(255, 42, 133, 0.4);
118+
}
119+
120+
.btn-primary:hover {
121+
background-color: transparent;
122+
box-shadow: 0 0 25px rgba(255, 42, 133, 0.6);
123+
}
124+
125+
.btn-secondary {
126+
background-color: transparent;
127+
color: var(--text-light);
128+
border: 2px solid var(--text-light);
129+
}
130+
131+
.btn-secondary:hover {
132+
border-color: var(--neon-pink);
133+
color: var(--neon-pink);
134+
}
135+
136+
footer {
137+
position: absolute;
138+
bottom: 20px;
139+
width: 100%;
140+
text-align: center;
141+
font-size: 0.8rem;
142+
color: #8a6c7c;
143+
z-index: 1;
144+
}
145+
146+
@keyframes float {
147+
0% { transform: translateY(0px); }
148+
50% { transform: translateY(-15px); }
149+
100% { transform: translateY(0px); }
150+
}
151+
152+
/* Decorative glowing orbs */
153+
.orb {
154+
position: absolute;
155+
border-radius: 50%;
156+
filter: blur(80px);
157+
z-index: 0;
158+
opacity: 0.5;
159+
}
160+
.orb-1 {
161+
width: 300px; height: 300px;
162+
background: var(--neon-pink);
163+
top: -100px; left: -100px;
164+
}
165+
.orb-2 {
166+
width: 250px; height: 250px;
167+
background: #4a0e2e;
168+
bottom: -50px; right: -50px;
169+
}
170+
</style>
171+
</head>
172+
<body>
173+
174+
<div class="orb orb-1"></div>
175+
<div class="orb orb-2"></div>
176+
177+
<main class="container">
178+
<div class="error-code">404 Error</div>
179+
<span class="icon">🚀</span>
180+
<h1>OOPS! We Couldn't Find That Page.</h1>
181+
<p>It seems the page you are looking for has vanished into the dark pink cosmos. We recommend navigating back to familiar ground.</p>
182+
<p>If you were using the proxy, please refresh</p>
183+
184+
<div class="buttons">
185+
<a href="/" class="btn btn-primary">Go Home</a>
186+
<a href="#" class="btn btn-secondary">Explore Posts</a>
187+
</div>
188+
</main>
189+
190+
<footer>
191+
&copy; 2025 HamCraft UB
192+
</footer>
193+
194+
</body>
195+
</html>

0 commit comments

Comments
 (0)