CINXE.COM
404
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <meta charset="utf-8" /> <title>404</title> </head> <body> <div class="error-container"> <div class="image-container"> <img src="Content/desert-ani.GIF" class="centered-image" style="width: 1100px; display: block; margin: 0 auto;" /> <div class="text-notfound"> <div class="text-line">Sorry, that page never returned</div> <div class="text-line">from a trip to the <span id="page"></span> desert</div> </div> <div class="desert-btns"> <a href="/home/index" class="leave-desert-btn">LEAVE DESERT</a> <a href="https://en.wikipedia.org/wiki/Desert" class="explore-desert-btn">EXPLORE DESERT</a> </div> </div> </div> </body> </html> <style> body { background-color: #604f3f; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { max-width: 1400px; width: 100%; text-align: center; background-color: #604f3f; } .image-container { display: flex; flex-direction: column; align-items: center; } .centered-image { width: 100%; max-width: 1100px; } .text-notfound { color: white; padding: 10px; font-family: sans-serif; font-size: 38px; max-width: 900px; } .desert-btns { display: flex; justify-content: center; padding: 10px 0; } .leave-desert-btn, .explore-desert-btn { background-color: transparent; border: 2px solid #FFF; padding: 10px 20px; cursor: pointer; transition: background-color 0.3s; color: #FFF; text-decoration: none; margin: 0 10px; } .leave-desert-btn:hover, .explore-desert-btn:hover { background-color: rgba(96, 79, 63, 0.5); color: #fff; } @media screen and (max-width: 768px) { .desert-btns { flex-direction: column; align-items: center; justify-content: center; } .leave-desert-btn, .explore-desert-btn { width: 80%; margin: 5px 0; } } </style>