-
Notifications
You must be signed in to change notification settings - Fork 2
/
404.html
133 lines (116 loc) · 4.12 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found</title>
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./src/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./src/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./src/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto Mono', monospace;
background-color: #f8f9fa;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
/* Sticky Header */
.navbar {
background-color: #28a745;
padding: 10px 20px;
}
.navbar-brand {
color: white;
font-size: 20px;
font-weight: bold;
}
.navbar-toggler {
border-color: white;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.nav-link {
color: white;
font-size: 18px;
margin-right: 20px;
}
.nav-link:hover {
text-decoration: underline;
}
.error-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.error-code {
font-size: 120px;
font-weight: bold;
color: #28a745;
}
.error-message {
font-size: 24px;
margin-bottom: 20px;
}
.btn-home {
background-color: #28a745;
color: white;
padding: 10px 20px;
border: none;
font-size: 16px;
border-radius: 5px;
text-decoration: none;
}
.btn-home:hover {
background-color: #218838;
}
.icon {
font-size: 60px;
color: #28a745;
}
</style>
</head>
<body>
<!-- Sticky Header with Hamburger Menu -->
<nav class="navbar navbar-expand-lg sticky-top">
<a class="navbar-brand" href="index.html">Code Editor</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
</ul>
</div>
</nav>
<!-- 404 Content -->
<div class="error-container">
<div class="icon">🚧</div>
<div class="error-code">404</div>
<p class="error-message">Oops! The page you're looking for doesn't exist.</p>
<a href="index.html" class="btn-home">Back to Home</a>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>