Coming Soon Page

<!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>Coming Soon</title>
</head>
<body>
    <style>
         body{
            background-color: rgb(70, 70, 70);
         }
         div{
            border: 1px solid;
            padding: 10px;
            box-shadow: 5px 10px #333333;
            background-color: #FFFFFF;
            border-radius: 1rem;
            width: 20rem;
            height: 22rem;
            margin: auto;
            text-align: center;
            font-family: cursive;
            animation: div-an infinite 5s;
         }
         @keyframes div-an {
             0%{
                 transform: rotateZ(0deg);
             }
             25%{
                 transform: rotateZ(5deg);
             }
             50%{
                 transform: rotateZ(0deg);
             }
             75%{
                 transform: rotateZ(-5deg);
             }
             100%{
                 transform: rotateZ(0deg);
             }
         }
         a{
            text-decoration: none;
            color: #415a40;
            font-size: 1rem;
            font-family: cursive;
            font-weight: bold;
         }
         a:hover{
            text-decoration: underline;
         }
         div > hr{
             width: 16rem
         }
         div > h2{
             line-height: 3rem;
         }
         #big{
            font-size: 1.3rem;
         }
    </style>
    <br><br><br><br><br><br><br><br><br>
    <div>
        <h2>Coming Soon</h2>
        <h3>No one knows what is coming!</h3>
        <h3>The developers is trying their best!</h3>
        <hr>
        <br><br><br>
        <a href="/">&#10096;&#10096;&nbsp;Go back to home page</a>
    </div>
</body>
</html>