mirror of https://github.com/helloxz/onenav.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
219 lines
4.5 KiB
219 lines
4.5 KiB
<!DOCTYPE html> |
|
<html lang="zh"> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<title>webstack - 404</title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" /> |
|
<link rel="shortcut icon" href="./assets/images/favicon.png"> |
|
<!-- Global site tag (gtag.js) - Google Analytics --> |
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-77253689-1"></script> |
|
|
|
<script> |
|
var _hmt = _hmt || []; |
|
(function() { |
|
var hm = document.createElement("script"); |
|
hm.src = "https://hm.baidu.com/hm.js?c05bb16ea908292af9f6c513087a1cc3"; |
|
var s = document.getElementsByTagName("script")[0]; |
|
s.parentNode.insertBefore(hm, s); |
|
})(); |
|
</script> |
|
<script> |
|
window.dataLayer = window.dataLayer || []; |
|
|
|
function gtag() { |
|
dataLayer.push(arguments); |
|
} |
|
gtag('js', new Date()); |
|
|
|
gtag('config', 'UA-77253689-1'); |
|
</script> |
|
<style> |
|
html, |
|
body { |
|
width: 100%; |
|
height: 100% |
|
} |
|
|
|
a, |
|
a img, |
|
a:before, |
|
a:after { |
|
text-decoration: none; |
|
transition-duration: .25s |
|
} |
|
|
|
section { |
|
display: block |
|
} |
|
|
|
body { |
|
line-height: 1 |
|
} |
|
|
|
#about { |
|
width: 40%; |
|
position: absolute; |
|
top: 40%; |
|
left: 10%; |
|
z-index: 20; |
|
transform: translate(0, -50%); |
|
} |
|
|
|
#about h1 { |
|
margin: 30px; |
|
} |
|
|
|
#about p { |
|
margin: 30px; |
|
} |
|
|
|
#about img { |
|
margin-left: 30px; |
|
} |
|
|
|
#about .social { |
|
float: left; |
|
margin: 30px; |
|
} |
|
|
|
#about .copyright { |
|
width: 100%; |
|
float: left; |
|
margin-bottom: 0px; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
#about { |
|
width: 100%; |
|
left: 0px; |
|
height: 100%; |
|
background-color: rgba(255, 255, 255, 0.85); |
|
} |
|
#about h1 { |
|
margin: 30px; |
|
} |
|
#about p { |
|
margin: 30px; |
|
} |
|
#about .social { |
|
margin: 30px; |
|
} |
|
#about .copyright { |
|
width: 100%; |
|
float: left; |
|
margin-bottom: 0px; |
|
} |
|
} |
|
|
|
@media (max-width: 580px) { |
|
#about { |
|
width: 100%; |
|
left: 0px; |
|
height: 100%; |
|
background-color: rgba(255, 255, 255, 0.85); |
|
} |
|
#about h1 { |
|
margin: 30px; |
|
} |
|
#about p { |
|
margin: 30px; |
|
margin-bottom: 0px |
|
} |
|
#about .social { |
|
margin: 30px; |
|
margin-bottom: 0px |
|
} |
|
#about .copyright { |
|
width: 100%; |
|
float: left; |
|
margin-bottom: 0px; |
|
} |
|
} |
|
|
|
.animated { |
|
animation-duration: 1s; |
|
animation-fill-mode: both |
|
} |
|
|
|
.bounce-in { |
|
animation-name: bounce-in |
|
} |
|
|
|
@keyframes bounce-in { |
|
from, |
|
60%, |
|
75%, |
|
90%, |
|
to { |
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) |
|
} |
|
0% { |
|
opacity: 0; |
|
transform: translate3d(-3000px, -50%, 0) |
|
} |
|
60% { |
|
opacity: 1; |
|
transform: translate3d(25px, -50%, 0) |
|
} |
|
75% { |
|
transform: translate3d(-10px, -50%, 0) |
|
} |
|
90% { |
|
transform: translate3d(5px, -50%, 0) |
|
} |
|
to { |
|
transform: translate3d(0, -50%) |
|
} |
|
} |
|
|
|
body { |
|
font-family: "Roboto", sans-serif; |
|
font-size: 16px; |
|
font-weight: 300; |
|
line-height: 1.75; |
|
color: rgba(0, 0, 0, 0.65) |
|
} |
|
|
|
h1 { |
|
font-family: "Merriweather", sans-serif; |
|
font-size: 50px; |
|
font-weight: 700; |
|
line-height: 1.25; |
|
color: rgba(0, 0, 0, 0.85); |
|
margin-bottom: 25px |
|
} |
|
|
|
a { |
|
color: rgba(3, 3, 3, 0.85); |
|
font-weight: 600; |
|
} |
|
|
|
@media (max-width: 580px) { |
|
body { |
|
font-size: 14px |
|
} |
|
h1 { |
|
font-size: 42px; |
|
line-height: 1.45 |
|
} |
|
} |
|
|
|
.bg-align { |
|
margin-top: 50%; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<section id="about" class="animated bounce-in"> |
|
<div class="bg-align"> |
|
<h1>404</h1> |
|
<p>Oops! It looks like you're lost...</p> |
|
<p>The Page you're looking for doesn't exist or another error occurred.</p> |
|
<p><a href="http://webstack.cc">👉 webstack.cc</a></p> |
|
</div> |
|
</section> |
|
</body> |
|
|
|
</html>
|
|
|