<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Not Found</title> <style> body { font-family: Roboto, sans-serif; margin: 0px; } .code { position: relative; width: 369px; height: 42.0px; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 36px; line-height: 42px; text-decoration: underline; display: flex; align-items: center; color: rgba(255, 255, 255, 0.84); } .text-msg { position: relative; width: 460px; height: 320px; margin: auto; font-family: Roboto; font-style: normal; font-weight: normal; font-size: 36px; line-height: 42px; text-indent: 8px; color: #FFFFFF; } .popup { margin: auto; min-width: 500px; min-height: 400px; width: 30%; padding: 10px; background: linear-gradient(165.31deg, rgba(67, 151, 141, 0.44) 18.49%, rgba(67, 151, 141, 0) 97.15%); box-shadow: 0px 13px 6px 4px rgba(0, 0, 0, 0.25); backdrop-filter: blur(12px); } .major-blur { height: 100vh; background: rgba(38, 77, 89, 0.199); backdrop-filter: blur(4px); display: flex; flex-direction: column; } .flex-grow { flex-grow: 1; } .button-back { margin: auto; margin-bottom: 16px; width: 269px; height: 69px; background: linear-gradient(272.39deg, rgba(247, 175, 67, 0.93) -34.2%, rgba(245, 72, 17, 0.93) 100%); box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.25); border-radius: 20px; } .bg { background-image: url('/img/Banner.jpg'); height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } p { padding-top: 12px; font-size: 28px; text-align: center; font-family: Roboto; font-style: normal; font-weight: normal; line-height: 42px; text-indent: 8px; color: #FFFFFF; } </style> </head> <body> <div class="bg"> <div class="major-blur flex"> <div class="flex-grow"></div> <div class="popup" > <div> <p class="code">404 Page not Found</p> <p class="text-msg">It appears that you’ve wandered too far from the forest, press the magic button below to get back.</p> <a style="text-decoration: none;" href="https://foxbank-69.web.app/" > <div class="button-back"> <p class="text-center">Take me back!</p> </div> </a> </div> </div> <div class="flex-grow"></div> </div> </div> </body> </html>