404.html

<!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: 0;
        }
        #about .social {
            margin: 30px;
            margin-bottom: 0;
        }
        #about .copyright {
            width: 100%;
            float: left;
            margin-bottom: 0;
        }
    }
    
    .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>