submissions/miraclebanks.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Chinese Year!</title>
    <link href="https://fonts.googleapis.com/css2?family=Neonderthaw&family=Pacifico&family=Clicker+Script&display=swap"
        rel="stylesheet">

    <style>
        body {
            background: url("https://media.istockphoto.com/photos/chinese-new-year-2022-picture-id1360025404?b=1&k=20&m=1360025404&s=170667a&w=0&h=z-7wvH0EZejJej0pxdBJhoQsGB34Db0Hc9gcmXiDCNE=") no-repeat center center fixed;
            background-size: cover;
            height: 100%;
            overflow: hidden;
            font-family: Clicker Script;
            color: goldenrod;
        }

        .content {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 100vh;
            min-width: 90vw
        }

        .zodiac-year {
            align-self: center;
            text-align: center;
            justify-content: center;
            background-color: black;
            opacity: 0.8;
            width: 600px;
            height: 400px;

        }

        #zodiac {
            font-size: 4em;
            justify-content: center;
            text-align: center;

        }

        #timer-container {
            font-size: 2rem;
        }
    </style>
</head>

<body>
    <div class='content'>
        <div class="zodiac-year">
            <p id='zodiac'>Year of the Tiger </p>
            <p id="timer-container"></p>
        </div>

    </div>
    <script>
        var x = setInterval(function () {
            var newYearsDay = new Date("Feb 1, 2022 00:00:00");
            var today = new Date().getTime();
            var timeLeft = newYearsDay - today;
            var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
            document.getElementById("timer-container").innerHTML = days + " days  " + hours + " hours  "
                + minutes + " minutes  " + seconds + " seconds  ";
            if (timeLeft <= 0) {
                clearInterval(x);
                document.getElementById("timer-container").innerHTML = "Happy New Year";
            }
        }, 1000);
    </script>
</body>

</html>