-
Notifications
You must be signed in to change notification settings - Fork 0
/
404-singlefile.html
71 lines (71 loc) · 5.86 KB
/
404-singlefile.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
<!DOCTYPE html>
<html lang="zh-CN,en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>404 Not Found</title>
<style type="text/css">
@import url("https://fonts.loli.net/css?family=Nunito+Sans");:root{--blue:#396aa9;--msg-yellow:#facc15;--msg-bg:#f0fdf4;--msg-title:#166534;--msg-text:#15803d;--msg-svg:#4ade80;--msg-btn-hover:#d1fae5;--btn-background:#15803d;--btn-outline:#15803d80;}html,body{height:100%;width:100%;padding:0;display:flex;align-items:center;justify-content:center;}main{width:100%;}.flex-container{display:flex;align-items:center;justify-content:center;justify-self:center;align-items:center;align-self:center;}.hh-container{position:relative;width:20rem;margin:0;}h1{font-size:8rem;margin:0 0 1rem 0;font-weight:bold;}h2{margin:1rem 0;font-weight:bold;}.content{margin:1rem 0;}.link-container{width:20rem;margin:1rem 0 0 0;}.msg-container{position:relative;margin:0 0 5rem 0;padding:0.5rem 0rem 0.5rem 1rem;width:100%;display:flex;flex-direction:column;gap:1rem;border-radius:0.5rem;background-color:var(--msg-bg);border-left:0.625rem solid var(--msg-title);}.msg-svg{color:var(--msg-svg);width:2rem;height:2rem;margin:0.5rem 0 0.25rem -0.375rem;flex-shrink:0;}.msg-prompt-wrap{margin:-4rem 0 0 2rem;}.msg-prompt-heading{font-weight:bold;color:var(--msg-text);}.msg-prompt-prompt{margin:0.5rem 0 0 0;color:var(--msg-text);}.msg-btn-container{display:flex;margin:0.5rem 0 0 -0.5rem;}.msg-btn-main,.msg-btn-secondary{padding:0.375rem 0.5rem;background-color:var(--msg-bg);color:var(--msg-text);font-size:1rem;font-weight:bold;border-radius:0.5rem;border:none;margin-right:0.5rem;cursor:pointer;}.msg-btn-main:hover,.msg-btn-secondary:hover{background-color:var(--msg-btn-hover);}.btn-container{display:flex;margin:2rem 0 0 0;}.btn-content{display:flex;align-items:center;padding:5px 30px;text-decoration:none;font-weight:600;font-size:30px;color:white;background:var(--btn-background);transition:1s;border-radius:100px;box-shadow:0 0 0.2em 0 var(--btn-background);}.btn-content:hover,.btn-content:focus{transition:0.5s;animation:btn-content 1s;outline:0.1em solid transparent;outline-offset:0.2em;box-shadow:0 0 0.4em 0 var(--btn-background);}.btn-content .icon-arrow{transition:0.5s;margin-right:0;transform:scale(0.6);}.btn-content:hover .icon-arrow{transition:0.5s;margin-right:25px;}.icon-arrow{width:20px;margin-left:15px;position:relative;top:6%;}#arrow-icon-one{transition:0.4s;transform:translateX(-60%);}#arrow-icon-two{transition:0.5s;transform:translateX(-30%);}.btn-content:hover #arrow-icon-three{animation:color_anim 1s infinite 0.2s;}.btn-content:hover #arrow-icon-one{transform:translateX(0%);animation:color_anim 1s infinite 0.6s;}.btn-content:hover #arrow-icon-two{transform:translateX(0%);animation:color_anim 1s infinite 0.4s;}@keyframes color_anim{0%{fill:white;}50%{fill:var(--btn-background);}100%{fill:white;}}@-webkit-keyframes btn-content{0%{outline:0.2em solid var(--color-background);outline-offset:0;}}@keyframes btn-content{0%{outline:0.2em solid var(--btn-background);outline-offset:0;}}@media screen and (max-width:768px){.flex-container{flex-direction:column;width:100%;}.hh-container{width:80%;}h1{text-align:center;}h2{text-align:center;}.content{text-align:center;}.btn-container{margin:2rem 0;}.link-container{width:80%;justify-content:center;}.msg-container{width:94%;margin:0 0 2rem 0;}.btn-container{justify-content:center;}}
</style>
</head>
<body>
<main>
<div class="flex-container">
<div class="hh-container">
<h1>404</h1>
<h2>
页面不见了。<br />
The page is missing.
</h2>
<div class="content">
<p>
很奇怪吗？我也觉得。<br />
但你是怎么找到这个页面的呢？<br />
Feeling strange? Me too. <br />
But how did you end up on this page?
</p>
</div>
</div>
<div class="link-container">
<div class="msg-container">
<svg fill="currentColor" class="msg-svg" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 16l4-4-4-4-1 1 1 2H8v2h4l-1 2zm0 6l-4-1-3-2-2-3-1-4 1-4 2-3 3-2 4-1 4 1 3 2 2 3 1 4-1 4-2 3-3 2-4 1" clip-rule="evenodd" />
</svg>
<div class="msg-prompt-wrap">
<p class="msg-prompt-heading">
要不看看别的？<br />
Maybe have a look elsewhere?
</p>
<p class="msg-prompt-prompt">
我的博客和 GitHub 主页：<br />
My blog and GitHub profile page:
</p>
<div class="msg-btn-container">
<a href="https://blog.lsy223622.com">
<button type="button" class="msg-btn-main">Blog</button>
</a>
<a href="https://github.com/lsy223622">
<button type="button" class="msg-btn-secondary">GitHub</button>
</a>
</div>
</div>
</div>
<div class="btn-container">
<a class="btn-content" href="https://lsy223622.com">
<span class="btn-title">HOME</span>
<span class="icon-arrow">
<svg width="66" height="43">
<g id="arrow" fill="#FFF" fill-rule="evenodd" stroke="none" stroke-width="1">
<path id="arrow-icon-one" d="M40 4l4-4h1l21 21a1 1 0 010 1L45 43h-1l-4-4a1 1 0 010-1l17-16v-1L40 5V4z" />
<path id="arrow-icon-two" d="M20 4l4-4h1l21 21a1 1 0 010 1L25 43h-1l-4-4a1 1 0 010-1l17-16v-1L20 5V4z" />
<path id="arrow-icon-three" d="M0 4l4-4h1l21 21a1 1 0 010 1L5 43H4l-4-4v-1l17-16v-1L0 5a1 1 0 010-1z" />
</g>
</svg>
</span>
</a>
</div>
</div>
</div>
</main>
</body>
</html>