<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta charset="utf-8" />
<meta name="description" content="Offline experience" />
<meta name="keywords" content="offline, 404, not here" />
<meta name="author" content="linxea" />
<title>Offline</title>
<style>
html {
font-size: 10px;
}
body {
height: 100%;
margin: 0;
padding: 0;
font-family: system-ui, sans-serif;
--grey-color: rgb(43, 43, 43);
}
h1 {
color: var(--grey-color);
font-size: 2.4rem;
font-weight: 500;
}
ul {
margin-top: 0;
margin-bottom: 1.2rem;
}
p,
li {
font-size: 1.5rem;
}
p {
margin-bottom: 0;
}
li {
line-height: 2.4rem;
}
#dino {
width: 1px;
height: 1px;
transform: scale(2);
}
/* TODO: whut, box shadow moves in boxes in keyframes unlike hover, need to explore this behaviour */
@keyframes disperse {
1% {
box-shadow: 16px 4px 0 #333332, 17px 4px 0 #333332, 18px 4px 0 #333332,
19px 4px 0 #333332, 20px 4px 0 #333332, 21px 4px 0 #333332,
22px 4px 0 #333332, 15px 5px 0 #333332, 16px 5px 0 #333332,
17px 5px 0 #333332, 18px 5px 0 #333332, 19px 5px 0 #333332,
20px 5px 0 #333332, 21px 5px 0 #333332, 22px 5px 0 #333332,
23px 5px 0 #333332, 14px 6px 0 #333332, 15px 6px 0 #333332,
16px 6px 0 #333332, 17px 6px 0 #333332, 18px 6px 0 #333332,
19px 6px 0 #333332, 20px 6px 0 #333332, 21px 6px 0 #333332,
22px 6px 0 #333332, 23px 6px 0 #333332, 14px 7px 0 #333332,
15px 7px 0 #333332, 17px 7px 0 #333332, 18px 7px 0 #333332,
19px 7px 0 #333332, 20px 7px 0 #333332, 21px 7px 0 #333332,
22px 7px 0 #333332, 23px 7px 0 #333332, 14px 8px 0 #333332,
15px 8px 0 #333332, 16px 8px 0 #333332, 17px 8px 0 #333332,
18px 8px 0 #333332, 19px 8px 0 #333332, 20px 8px 0 #333332,
21px 8px 0 #333332, 22px 8px 0 #333332, 23px 8px 0 #333332,
14px 9px 0 #333332, 15px 9px 0 #333332, 16px 9px 0 #333332,
17px 9px 0 #333332, 18px 9px 0 #333332, 19px 9px 0 #333332,
20px 9px 0 #333332, 21px 9px 0 #333332, 22px 9px 0 #333332,
23px 9px 0 #333332, 14px 10px 0 #333332, 15px 10px 0 #333332,
16px 10px 0 #333332, 17px 10px 0 #333332, 18px 10px 0 #333332,
19px 10px 0 #333332, 14px 11px 0 #333332, 15px 11px 0 #333332,
16px 11px 0 #333332, 17px 11px 0 #333332, 18px 11px 0 #333332,
19px 11px 0 #333332, 20px 11px 0 #333332, 21px 11px 0 #333332,
22px 11px 0 #333332, 14px 12px 0 #333332, 15px 12px 0 #333332,
16px 12px 0 #333332, 17px 12px 0 #333332, 18px 12px 0 #333332,
6px 13px 0 #333332, 13px 13px 0 #333332, 14px 13px 0 #333332,
15px 13px 0 #333332, 16px 13px 0 #333332, 17px 13px 0 #333332,
18px 13px 0 #333332, 6px 14px 0 #333332, 12px 14px 0 #333332,
13px 14px 0 #333332, 14px 14px 0 #333332, 15px 14px 0 #333332,
16px 14px 0 #333332, 17px 14px 0 #333332, 18px 14px 0 #333332,
19px 14px 0 #333332, 20px 14px 0 #333332, 6px 15px 0 #333332,
7px 15px 0 #333332, 11px 15px 0 #333332, 12px 15px 0 #333332,
13px 15px 0 #333332, 14px 15px 0 #333332, 15px 15px 0 #333332,
16px 15px 0 #333332, 17px 15px 0 #333332, 18px 15px 0 #333332,
20px 15px 0 #333332, 6px 16px 0 #333332, 7px 16px 0 #333332,
8px 16px 0 #333332, 9px 16px 0 #333332, 10px 16px 0 #333332,
11px 16px 0 #333332, 12px 16px 0 #333332, 13px 16px 0 #333332,
14px 16px 0 #333332, 15px 16px 0 #333332, 16px 16px 0 #333332,
17px 16px 0 #333332, 18px 16px 0 #333332, 6px 17px 0 #333332,
7px 17px 0 #333332, 8px 17px 0 #333332, 9px 17px 0 #333332,
10px 17px 0 #333332, 11px 17px 0 #333332, 12px 17px 0 #333332,
13px 17px 0 #333332, 14px 17px 0 #333332, 15px 17px 0 #333332,
16px 17px 0 #333332, 17px 17px 0 #333332, 18px 17px 0 #333332,
7px 18px 0 #333332, 8px 18px 0 #333332, 9px 18px 0 #333332,
10px 18px 0 #333332, 11px 18px 0 #333332, 12px 18px 0 #333332,
13px 18px 0 #333332, 14px 18px 0 #333332, 15px 18px 0 #333332,
16px 18px 0 #333332, 17px 18px 0 #333332, 18px 18px 0 #333332,
8px 19px 0 #333332, 9px 19px 0 #333332, 10px 19px 0 #333332,
11px 19px 0 #333332, 12px 19px 0 #333332, 13px 19px 0 #333332,
14px 19px 0 #333332, 15px 19px 0 #333332, 16px 19px 0 #333332,
17px 19px 0 #333332, 9px 20px 0 #333332, 10px 20px 0 #333332,
11px 20px 0 #333332, 12px 20px 0 #333332, 13px 20px 0 #333332,
14px 20px 0 #333332, 15px 20px 0 #333332, 16px 20px 0 #333332,
17px 20px 0 #333332, 2px 21px 0 #333332, 3px 21px 0 #333332,
4px 21px 0 #333332, 5px 21px 0 #333332, 6px 21px 0 #333332,
7px 21px 0 #333332, 10px 21px 0 #333332, 11px 21px 0 #333332,
12px 21px 0 #333332, 13px 21px 0 #333332, 14px 21px 0 #333332,
15px 21px 0 #333332, 16px 21px 0 #333332, 19px 21px 0 #333332,
20px 21px 0 #333332, 21px 21px 0 #333332, 22px 21px 0 #333332,
23px 21px 0 #333332, 24px 21px 0 #333332, 25px 21px 0 #333332,
26px 21px 0 #333332, 27px 21px 0 #333332, 11px 22px 0 #333332,
15px 22px 0 #333332, 6px 23px 0 #333332, 7px 23px 0 #333332,
11px 23px 0 #333332, 12px 23px 0 #333332, 15px 23px 0 #333332,
16px 23px 0 #333332, 25px 23px 0 #333332, 27px 23px 0 #333332,
2px 24px 0 #333332, 3px 24px 0 #333332, 26px 24px 0 #333332;
}
2% {
box-shadow: 16px 4px 0 #333332, 17px 4px 0 #333332, 18px 4px 0 #333332,
19px 4px 0 #333332, 20px 4px 0 #333332, 21px 4px 0 #333332,
22px 4px 0 #333332, 15px 5px 0 #333332, 16px 5px 0 #333332,
17px 5px 0 #333332, 18px 5px 0 #333332, 19px 5px 0 #333332,
20px 5px 0 #333332, 21px 5px 0 #333332, 22px 5px 0 #333332,
23px 5px 0 #333332, 14px 6px 0 #333332, 15px 6px 0 #333332,
16px 6px 0 #333332, 17px 6px 0 #333332, 18px 6px 0 #333332,
19px 6px 0 #333332, 20px 6px 0 #333332, 21px 6px 0 #333332,
22px 6px 0 #333332, 23px 6px 0 #333332, 14px 7px 0 #333332,
15px 7px 0 #333332, 16px 7px 0 #333332, 17px 7px 0 #333332,
18px 7px 0 #333332, 19px 7px 0 #333332, 20px 7px 0 #333332,
21px 7px 0 #333332, 22px 7px 0 #333332, 23px 7px 0 #333332,
14px 8px 0 #333332, 15px 8px 0 #333332, 16px 8px 0 #333332,
17px 8px 0 #333332, 18px 8px 0 #333332, 19px 8px 0 #333332,
20px 8px 0 #333332, 21px 8px 0 #333332, 22px 8px 0 #333332,
23px 8px 0 #333332, 14px 9px 0 #333332, 15px 9px 0 #333332,
16px 9px 0 #333332, 17px 9px 0 #333332, 18px 9px 0 #333332,
19px 9px 0 #333332, 20px 9px 0 #333332, 21px 9px 0 #333332,
22px 9px 0 #333332, 23px 9px 0 #333332, 14px 10px 0 #333332,
15px 10px 0 #333332, 16px 10px 0 #333332, 17px 10px 0 #333332,
18px 10px 0 #333332, 19px 10px 0 #333332, 14px 11px 0 #333332,
15px 11px 0 #333332, 16px 11px 0 #333332, 17px 11px 0 #333332,
18px 11px 0 #333332, 19px 11px 0 #333332, 20px 11px 0 #333332,
21px 11px 0 #333332, 22px 11px 0 #333332, 14px 12px 0 #333332,
15px 12px 0 #333332, 16px 12px 0 #333332, 17px 12px 0 #333332,
18px 12px 0 #333332, 6px 13px 0 #333332, 13px 13px 0 #333332,
14px 13px 0 #333332, 15px 13px 0 #333332, 16px 13px 0 #333332,
17px 13px 0 #333332, 18px 13px 0 #333332, 6px 14px 0 #333332,
12px 14px 0 #333332, 13px 14px 0 #333332, 14px 14px 0 #333332,
15px 14px 0 #333332, 16px 14px 0 #333332, 17px 14px 0 #333332,
18px 14px 0 #333332, 19px 14px 0 #333332, 20px 14px 0 #333332,
6px 15px 0 #333332, 7px 15px 0 #333332, 11px 15px 0 #333332,
12px 15px 0 #333332, 13px 15px 0 #333332, 14px 15px 0 #333332,
15px 15px 0 #333332, 16px 15px 0 #333332, 17px 15px 0 #333332,
18px 15px 0 #333332, 20px 15px 0 #333332, 6px 16px 0 #333332,
7px 16px 0 #333332, 8px 16px 0 #333332, 9px 16px 0 #333332,
10px 16px 0 #333332, 11px 16px 0 #333332, 12px 16px 0 #333332,
13px 16px 0 #333332, 14px 16px 0 #333332, 15px 16px 0 #333332,
16px 16px 0 #333332, 17px 16px 0 #333332, 18px 16px 0 #333332,
6px 17px 0 #333332, 7px 17px 0 #333332, 8px 17px 0 #333332,
9px 17px 0 #333332, 10px 17px 0 #333332, 11px 17px 0 #333332,
12px 17px 0 #333332, 13px 17px 0 #333332, 14px 17px 0 #333332,
15px 17px 0 #333332, 16px 17px 0 #333332, 17px 17px 0 #333332,
18px 17px 0 #333332, 7px 18px 0 #333332, 8px 18px 0 #333332,
9px 18px 0 #333332, 10px 18px 0 #333332, 11px 18px 0 #333332,
12px 18px 0 #333332, 13px 18px 0 #333332, 14px 18px 0 #333332,
15px 18px 0 #333332, 16px 18px 0 #333332, 17px 18px 0 #333332,
18px 18px 0 #333332, 8px 19px 0 #333332, 9px 19px 0 #333332,
10px 19px 0 #333332, 11px 19px 0 #333332, 12px 19px 0 #333332,
13px 19px 0 #333332, 14px 19px 0 #333332, 15px 19px 0 #333332,
16px 19px 0 #333332, 17px 19px 0 #333332, 9px 20px 0 #333332,
10px 20px 0 #333332, 11px 20px 0 #333332, 12px 20px 0 #333332,
13px 20px 0 #333332, 14px 20px 0 #333332, 15px 20px 0 #333332,
16px 20px 0 #333332, 17px 20px 0 #333332, 2px 21px 0 #333332,
3px 21px 0 #333332, 4px 21px 0 #333332, 5px 21px 0 #333332,
6px 21px 0 #333332, 7px 21px 0 #333332, 10px 21px 0 #333332,
11px 21px 0 #333332, 12px 21px 0 #333332, 13px 21px 0 #333332,
14px 21px 0 #333332, 15px 21px 0 #333332, 16px 21px 0 #333332,
19px 21px 0 #333332, 20px 21px 0 #333332, 21px 21px 0 #333332,
22px 21px 0 #333332, 23px 21px 0 #333332, 24px 21px 0 #333332,
25px 21px 0 #333332, 26px 21px 0 #333332, 27px 21px 0 #333332,
11px 22px 0 #333332, 15px 22px 0 #333332, 6px 23px 0 #333332,
7px 23px 0 #333332, 11px 23px 0 #333332, 12px 23px 0 #333332,
15px 23px 0 #333332, 16px 23px 0 #333332, 25px 23px 0 #333332,
27px 23px 0 #333332, 2px 24px 0 #333332, 3px 24px 0 #333332,
26px 24px 0 #333332;
}
}
.dino-cage:hover #dino {
animation: 1s disperse;
}
.dino-close-eye {
box-shadow: 16px 4px 0 #333332, 17px 4px 0 #333332, 18px 4px 0 #333332,
19px 4px 0 #333332, 20px 4px 0 #333332, 21px 4px 0 #333332,
22px 4px 0 #333332, 15px 5px 0 #333332, 16px 5px 0 #333332,
17px 5px 0 #333332, 18px 5px 0 #333332, 19px 5px 0 #333332,
20px 5px 0 #333332, 21px 5px 0 #333332, 22px 5px 0 #333332,
23px 5px 0 #333332, 14px 6px 0 #333332, 15px 6px 0 #333332,
16px 6px 0 #333332, 17px 6px 0 #333332, 18px 6px 0 #333332,
19px 6px 0 #333332, 20px 6px 0 #333332, 21px 6px 0 #333332,
22px 6px 0 #333332, 23px 6px 0 #333332, 14px 7px 0 #333332,
15px 7px 0 #333332, 16px 7px 0 #333332, 17px 7px 0 #333332,
18px 7px 0 #333332, 19px 7px 0 #333332, 20px 7px 0 #333332,
21px 7px 0 #333332, 22px 7px 0 #333332, 23px 7px 0 #333332,
14px 8px 0 #333332, 15px 8px 0 #333332, 16px 8px 0 #333332,
17px 8px 0 #333332, 18px 8px 0 #333332, 19px 8px 0 #333332,
20px 8px 0 #333332, 21px 8px 0 #333332, 22px 8px 0 #333332,
23px 8px 0 #333332, 14px 9px 0 #333332, 15px 9px 0 #333332,
16px 9px 0 #333332, 17px 9px 0 #333332, 18px 9px 0 #333332,
19px 9px 0 #333332, 20px 9px 0 #333332, 21px 9px 0 #333332,
22px 9px 0 #333332, 23px 9px 0 #333332, 14px 10px 0 #333332,
15px 10px 0 #333332, 16px 10px 0 #333332, 17px 10px 0 #333332,
18px 10px 0 #333332, 19px 10px 0 #333332, 14px 11px 0 #333332,
15px 11px 0 #333332, 16px 11px 0 #333332, 17px 11px 0 #333332,
18px 11px 0 #333332, 19px 11px 0 #333332, 20px 11px 0 #333332,
21px 11px 0 #333332, 22px 11px 0 #333332, 14px 12px 0 #333332,
15px 12px 0 #333332, 16px 12px 0 #333332, 17px 12px 0 #333332,
18px 12px 0 #333332, 6px 13px 0 #333332, 13px 13px 0 #333332,
14px 13px 0 #333332, 15px 13px 0 #333332, 16px 13px 0 #333332,
17px 13px 0 #333332, 18px 13px 0 #333332, 6px 14px 0 #333332,
12px 14px 0 #333332, 13px 14px 0 #333332, 14px 14px 0 #333332,
15px 14px 0 #333332, 16px 14px 0 #333332, 17px 14px 0 #333332,
18px 14px 0 #333332, 19px 14px 0 #333332, 20px 14px 0 #333332,
6px 15px 0 #333332, 7px 15px 0 #333332, 11px 15px 0 #333332,
12px 15px 0 #333332, 13px 15px 0 #333332, 14px 15px 0 #333332,
15px 15px 0 #333332, 16px 15px 0 #333332, 17px 15px 0 #333332,
18px 15px 0 #333332, 20px 15px 0 #333332, 6px 16px 0 #333332,
7px 16px 0 #333332, 8px 16px 0 #333332, 9px 16px 0 #333332,
10px 16px 0 #333332, 11px 16px 0 #333332, 12px 16px 0 #333332,
13px 16px 0 #333332, 14px 16px 0 #333332, 15px 16px 0 #333332,
16px 16px 0 #333332, 17px 16px 0 #333332, 18px 16px 0 #333332,
6px 17px 0 #333332, 7px 17px 0 #333332, 8px 17px 0 #333332,
9px 17px 0 #333332, 10px 17px 0 #333332, 11px 17px 0 #333332,
12px 17px 0 #333332, 13px 17px 0 #333332, 14px 17px 0 #333332,
15px 17px 0 #333332, 16px 17px 0 #333332, 17px 17px 0 #333332,
18px 17px 0 #333332, 7px 18px 0 #333332, 8px 18px 0 #333332,
9px 18px 0 #333332, 10px 18px 0 #333332, 11px 18px 0 #333332,
12px 18px 0 #333332, 13px 18px 0 #333332, 14px 18px 0 #333332,
15px 18px 0 #333332, 16px 18px 0 #333332, 17px 18px 0 #333332,
18px 18px 0 #333332, 8px 19px 0 #333332, 9px 19px 0 #333332,
10px 19px 0 #333332, 11px 19px 0 #333332, 12px 19px 0 #333332,
13px 19px 0 #333332, 14px 19px 0 #333332, 15px 19px 0 #333332,
16px 19px 0 #333332, 17px 19px 0 #333332, 9px 20px 0 #333332,
10px 20px 0 #333332, 11px 20px 0 #333332, 12px 20px 0 #333332,
13px 20px 0 #333332, 14px 20px 0 #333332, 15px 20px 0 #333332,
16px 20px 0 #333332, 17px 20px 0 #333332, 2px 21px 0 #333332,
3px 21px 0 #333332, 4px 21px 0 #333332, 5px 21px 0 #333332,
6px 21px 0 #333332, 7px 21px 0 #333332, 10px 21px 0 #333332,
11px 21px 0 #333332, 12px 21px 0 #333332, 13px 21px 0 #333332,
14px 21px 0 #333332, 15px 21px 0 #333332, 16px 21px 0 #333332,
19px 21px 0 #333332, 20px 21px 0 #333332, 21px 21px 0 #333332,
22px 21px 0 #333332, 23px 21px 0 #333332, 24px 21px 0 #333332,
25px 21px 0 #333332, 26px 21px 0 #333332, 27px 21px 0 #333332,
11px 22px 0 #333332, 15px 22px 0 #333332, 6px 23px 0 #333332,
7px 23px 0 #333332, 11px 23px 0 #333332, 12px 23px 0 #333332,
15px 23px 0 #333332, 16px 23px 0 #333332, 25px 23px 0 #333332,
27px 23px 0 #333332, 2px 24px 0 #333332, 3px 24px 0 #333332,
26px 24px 0 #333332;
}
.dino-open-eye {
box-shadow: 16px 4px 0 #333332, 17px 4px 0 #333332, 18px 4px 0 #333332,
19px 4px 0 #333332, 20px 4px 0 #333332, 21px 4px 0 #333332,
22px 4px 0 #333332, 15px 5px 0 #333332, 16px 5px 0 #333332,
17px 5px 0 #333332, 18px 5px 0 #333332, 19px 5px 0 #333332,
20px 5px 0 #333332, 21px 5px 0 #333332, 22px 5px 0 #333332,
23px 5px 0 #333332, 14px 6px 0 #333332, 15px 6px 0 #333332,
16px 6px 0 #333332, 17px 6px 0 #333332, 18px 6px 0 #333332,
19px 6px 0 #333332, 20px 6px 0 #333332, 21px 6px 0 #333332,
22px 6px 0 #333332, 23px 6px 0 #333332, 14px 7px 0 #333332,
15px 7px 0 #333332, 17px 7px 0 #333332, 18px 7px 0 #333332,
19px 7px 0 #333332, 20px 7px 0 #333332, 21px 7px 0 #333332,
22px 7px 0 #333332, 23px 7px 0 #333332, 14px 8px 0 #333332,
15px 8px 0 #333332, 16px 8px 0 #333332, 17px 8px 0 #333332,
18px 8px 0 #333332, 19px 8px 0 #333332, 20px 8px 0 #333332,
21px 8px 0 #333332, 22px 8px 0 #333332, 23px 8px 0 #333332,
14px 9px 0 #333332, 15px 9px 0 #333332, 16px 9px 0 #333332,
17px 9px 0 #333332, 18px 9px 0 #333332, 19px 9px 0 #333332,
20px 9px 0 #333332, 21px 9px 0 #333332, 22px 9px 0 #333332,
23px 9px 0 #333332, 14px 10px 0 #333332, 15px 10px 0 #333332,
16px 10px 0 #333332, 17px 10px 0 #333332, 18px 10px 0 #333332,
19px 10px 0 #333332, 14px 11px 0 #333332, 15px 11px 0 #333332,
16px 11px 0 #333332, 17px 11px 0 #333332, 18px 11px 0 #333332,
19px 11px 0 #333332, 20px 11px 0 #333332, 21px 11px 0 #333332,
22px 11px 0 #333332, 14px 12px 0 #333332, 15px 12px 0 #333332,
16px 12px 0 #333332, 17px 12px 0 #333332, 18px 12px 0 #333332,
6px 13px 0 #333332, 13px 13px 0 #333332, 14px 13px 0 #333332,
15px 13px 0 #333332, 16px 13px 0 #333332, 17px 13px 0 #333332,
18px 13px 0 #333332, 6px 14px 0 #333332, 12px 14px 0 #333332,
13px 14px 0 #333332, 14px 14px 0 #333332, 15px 14px 0 #333332,
16px 14px 0 #333332, 17px 14px 0 #333332, 18px 14px 0 #333332,
19px 14px 0 #333332, 20px 14px 0 #333332, 6px 15px 0 #333332,
7px 15px 0 #333332, 11px 15px 0 #333332, 12px 15px 0 #333332,
13px 15px 0 #333332, 14px 15px 0 #333332, 15px 15px 0 #333332,
16px 15px 0 #333332, 17px 15px 0 #333332, 18px 15px 0 #333332,
20px 15px 0 #333332, 6px 16px 0 #333332, 7px 16px 0 #333332,
8px 16px 0 #333332, 9px 16px 0 #333332, 10px 16px 0 #333332,
11px 16px 0 #333332, 12px 16px 0 #333332, 13px 16px 0 #333332,
14px 16px 0 #333332, 15px 16px 0 #333332, 16px 16px 0 #333332,
17px 16px 0 #333332, 18px 16px 0 #333332, 6px 17px 0 #333332,
7px 17px 0 #333332, 8px 17px 0 #333332, 9px 17px 0 #333332,
10px 17px 0 #333332, 11px 17px 0 #333332, 12px 17px 0 #333332,
13px 17px 0 #333332, 14px 17px 0 #333332, 15px 17px 0 #333332,
16px 17px 0 #333332, 17px 17px 0 #333332, 18px 17px 0 #333332,
7px 18px 0 #333332, 8px 18px 0 #333332, 9px 18px 0 #333332,
10px 18px 0 #333332, 11px 18px 0 #333332, 12px 18px 0 #333332,
13px 18px 0 #333332, 14px 18px 0 #333332, 15px 18px 0 #333332,
16px 18px 0 #333332, 17px 18px 0 #333332, 18px 18px 0 #333332,
8px 19px 0 #333332, 9px 19px 0 #333332, 10px 19px 0 #333332,
11px 19px 0 #333332, 12px 19px 0 #333332, 13px 19px 0 #333332,
14px 19px 0 #333332, 15px 19px 0 #333332, 16px 19px 0 #333332,
17px 19px 0 #333332, 9px 20px 0 #333332, 10px 20px 0 #333332,
11px 20px 0 #333332, 12px 20px 0 #333332, 13px 20px 0 #333332,
14px 20px 0 #333332, 15px 20px 0 #333332, 16px 20px 0 #333332,
17px 20px 0 #333332, 2px 21px 0 #333332, 3px 21px 0 #333332,
4px 21px 0 #333332, 5px 21px 0 #333332, 6px 21px 0 #333332,
7px 21px 0 #333332, 10px 21px 0 #333332, 11px 21px 0 #333332,
12px 21px 0 #333332, 13px 21px 0 #333332, 14px 21px 0 #333332,
15px 21px 0 #333332, 16px 21px 0 #333332, 19px 21px 0 #333332,
20px 21px 0 #333332, 21px 21px 0 #333332, 22px 21px 0 #333332,
23px 21px 0 #333332, 24px 21px 0 #333332, 25px 21px 0 #333332,
26px 21px 0 #333332, 27px 21px 0 #333332, 11px 22px 0 #333332,
15px 22px 0 #333332, 6px 23px 0 #333332, 7px 23px 0 #333332,
11px 23px 0 #333332, 12px 23px 0 #333332, 15px 23px 0 #333332,
16px 23px 0 #333332, 25px 23px 0 #333332, 27px 23px 0 #333332,
2px 24px 0 #333332, 3px 24px 0 #333332, 26px 24px 0 #333332;
}
.dino-cage {
height: 60px;
width: 60px;
}
#content {
margin: 120px auto;
width: 80%;
}
@media (min-width: 500px) {
#content {
max-width: 600px;
}
}
.error {
color: #646464;
font-size: 1.2rem;
}
a {
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<div id="content">
<div class="dino-cage">
<div id="dino" class="dino-open-eye"></div>
</div>
<h1>No Internet</h1>
<p>I:</p>
<ul>
<li>am a Software Engineer at <a href="https://hooq.tv">HOOQ</a></li>
<li>
<a href="https://github.com/linxea">build <b><span id="word">random</span></b> things</a
>
</li>
<li>write at <a href="https://dev.to/linxea">dev.to</a></li>
<li>
make bad
<a href="https://www.youtube.com/channel/UCA6sSSOlSJiQY2o10QF5KQw">youtube videos</a
>
</li>
</ul>
<div class="error">ERR_INTERNET_DISCONNECTED</div>
</div>
<script>
const dinoElement = document.getElementById("dino");
function blink() {
const BLINK_TIME_IN_MILLISECOND = 300;
dinoElement.className = "dino-close-eye";
setTimeout(function() {
dinoElement.className = "dino-open-eye";
}, BLINK_TIME_IN_MILLISECOND);
loopBlinkingInRandomCountDownTime();
}
function loopBlinkingInRandomCountDownTime() {
const MIN_TIME_IN_SECOND = 3;
const MAX_TIME_IN_SECOND = 10;
setTimeout(
blink,
getRandomCountDownTimeBetween(MIN_TIME_IN_SECOND, MAX_TIME_IN_SECOND)
);
}
function getRandomCountDownTimeBetween(min, max) {
const MILLISECOND = 1000;
return (
Math.floor(Math.random() * (max - min)) * MILLISECOND +
min * MILLISECOND
);
}
loopBlinkingInRandomCountDownTime();
const SWITCH_WORD_IN_SECOND = 2000;
const wordElement = document.getElementById("word");
const words = ["cool", "random", "fun", "interesting", "lame", "weird"];
setInterval(function() {
randomIndex = Math.floor(Math.random() * words.length);
wordElement.innerText = words[randomIndex];
}, SWITCH_WORD_IN_SECOND);
</script>
</body>
</html>console.log(
"%cSUBSCRIBE NOW!",
"color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
);
console.log("https://www.youtube.com/channel/UCA6sSSOlSJiQY2o10QF5KQw");
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.