-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
119 lines (104 loc) · 3.62 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
<html>
<head>
<title>oops.</title>
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<style>
html, body {
width: 100%;
height: 100%;
}
body {
background-size: cover;
background-color: #0671A1;
background-repeat: no-repeat;
min-height: 100vh;
min-width: 100vw;
font-family: "JetBrainsMono_Light";
color: white !important;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.container,
.container > .row,
.container > .row > div {
height: 100%;
}
#countUp {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.number {
font-size: 15rem;
font-weight: 500;
}
.number + .text {
margin: 0 0 1rem;
}
.text {
margin-top: 1rem;
font-weight: 300;
text-align: center;
}
</style>
<body>
<div class="container">
<div class="row">
<div class=" mx-auto">
<div id="countUp">
<div class="number" data-count="404"><h1>0</h1></div>
<div class="text"><h2>Page not found</h2></div>
<div class="text"><h2>This may not mean anything.</h2></div>
<div class="text"><h2>I'm probably working on something that has blown up.</h2></div>
<div class="text" style="background-color: #414042!important; padding: 1rem"><a href="/" style="text-decoration: none; color: white;"><h2>back to home</h2></a></div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script>
var formatThousandsNoRounding = function(n, dp){
var e = '', s = e+n, l = s.length, b = n < 0 ? 1 : 0,
i = s.lastIndexOf(','), j = i === -1 ? l : i,
r = e, d = s.substr(j+1, dp);
while ( (j-=3) > b ) { r = '.' + s.substr(j, 3) + r; }
return s.substr(0, j + 3) + r +
(dp ? ',' + d + ( d.length < dp ?
('00000').substr(0, dp - d.length):e):e);
};
var hasRun = false;
if (hasRun === false) {
$('.number').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 2000,
easing:'linear',
step: function() {
$this.text(formatThousandsNoRounding(Math.floor(this.countNum)));
},
complete: function() {
$this.text(formatThousandsNoRounding(this.countNum));
}
});
});
hasRun = true;
}
</script>
</body>
</html>