Skip to content

Commit cf1d075

Browse files
username1001username1001
committed
Add code
1 parent 4da3acb commit cf1d075

File tree

3 files changed

+103
-0
lines changed

3 files changed

+103
-0
lines changed

‎404.png

31.1 KB
Loading

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
11
# npm-404-page
2+
A 404 page in the style of NPM.
3+
4+
5+
<!-- ![404 Page](https://github.com/javascripttoday) -->

‎index.html

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Page Not Found</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
11+
<style>
12+
body {
13+
background:black;
14+
font-family: 'Ubuntu', sans-serif;
15+
}
16+
.container {
17+
margin-top: 15px;
18+
}
19+
ul li {
20+
list-style-type: none;
21+
text-align: left;
22+
margin-bottom: 1px;
23+
margin-top: 3px;
24+
}
25+
span {
26+
margin-left: 8px;
27+
}
28+
.npm {
29+
color: lightgray;
30+
background-color: darkslategray;
31+
}
32+
.err {
33+
color: red;
34+
background-color: darkslategray;
35+
}
36+
.status {
37+
color: purple;
38+
}
39+
.message {
40+
color: #aaa;
41+
}
42+
43+
.user {
44+
color: lime;
45+
}
46+
47+
.blinking-cursor {
48+
position: relative;
49+
line-height: 20px;
50+
font-size: 24px;
51+
color: white;
52+
min-width: 360px;
53+
}
54+
55+
.blinking-cursor::after {
56+
content: "";
57+
top: 0;
58+
display: inline-block;
59+
background-color: #606060;
60+
vertical-align: top;
61+
width: 12px;
62+
height: 20px;
63+
-webkit-animation: blink 1s step-end infinite;
64+
animation: blink 1s step-end infinite;
65+
}
66+
67+
@-webkit-keyframes blink {
68+
0% { opacity: 1.0; }
69+
50% { opacity: 0.0; }
70+
100% { opacity: 1.0; }
71+
}
72+
73+
@keyframes blink {
74+
0% { opacity: 1.0; }
75+
50% { opacity: 0.0; }
76+
100% { opacity: 1.0; }
77+
}
78+
</style>
79+
</head>
80+
<body>
81+
<div class="container mt-2">
82+
<ul>
83+
<li><span class="npm">npm</span> <span class="err">ERR!</span> <span class="status">code</span><span class="message">E404</span></li>
84+
<li><span class="npm">npm</span> <span class="err">ERR!</span> <span class="status">404</span> <span class="message" id="location"></span></li>
85+
<li><span class="npm">npm</span> <span class="err">ERR!</span> <span class="status">404</span></li>
86+
<li><span class="npm">npm</span> <span class="err">ERR!</span> <span class="status">404</span> <span class="message" id="path"></span></li>
87+
<li><span class="npm">npm</span> <span class="err">ERR!</span> <span class="status">404</span> <span class="message">You should bug the author to publish it.</span></li>
88+
<li><span class="npm">npm</span> <span class="err">ERR!</span> <span class="status">404</span></li>
89+
<li><span class="user">user@jstoday: ~</span> <span class="message">Return to <a href="/">JavaScript Today</a></span><span class="blinking-cursor"></span></li>
90+
</ul>
91+
</div>
92+
<script>
93+
const url = window.location.href;
94+
const pathUrl = window.location.pathname;
95+
document.getElementById('location').innerHTML = `Not Found - GET ${url} - Not Found`;
96+
document.getElementById('path').innerHTML = `'${pathUrl}' doesn't exist on this site.`;
97+
</script>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)