-
Notifications
You must be signed in to change notification settings - Fork 231
/
404.html
94 lines (93 loc) · 2.54 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>METAVERSE | 404 Page Not Found</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
.box {
position: fixed;
top: 75vh;
background-color: rgba(255, 255, 255, 0.557);
border-radius: 10px;
padding: 10px;
margin: 10px;
text-align: center;
}
a#back_Home_btn {
color: black;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.797);
border-radius: 16px;
padding: 5px;
margin: 5px;
}
a#back_Home_btn:hover {
background-color: #4097FF;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.mobile-background {
display: none;
}
@media screen and (max-width: 768px) {
/* for width smaller than 768px */
body {
background-color: #023c7f;
}
.background {
display: none;
}
.box {
position: static;
background-color: #67abff;
font-size: .9rem;
}
p#credits {
display: none;
}
.mobile-background {
display: block;
width: 80vw;
}
}
</style>
</head>
<body>
<div class="container">
<!-- spline component background, hidden on mobile screens -->
<div class="background">
<script type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/FF4zUicpD61VIS7e/scene.splinecode"></spline-viewer>
</div>
<!-- mobile screen background with 404 svg, hidden on desktop screens -->
<div class="mobile-background">
<img src="./assets/svgs/pageNotFound.svg" alt="page not found 404 error image">
</div>
<!-- overlay box with not found message, back home link and credit to 3D model creator on (desktop only) -->
<div class="box">
<p>Oops! The page you're looking for doesn't exist.</p>
<p>Let's get you back <a id="back_Home_btn" href="https://apu52.github.io/METAVERSE">Home 🏠</a>.</p>
<p id="credits">Background Model by <a href="https://app.spline.design/community/file/588a033c-a14b-4e70-a1de-793158fb2b17">Mohit. N</a></p>
</div>
</div>
</body>
</html>