reiyua
/
reiyua.lol
mirror of https://github.com/reiyua/reiyua.lol.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: reiyua:2b58a885c4261e0c7c08d12a0a9c600354816480
Branches Tags
reiyua:main
...
compare: reiyua:a65d3e25a4a0ad93164958566fe988f99fa67dff
Branches Tags
reiyua:main

3 Commits
2b58a885c4 ... a65d3e25a4

Author SHA1 Message Date
Ray a65d3e25a4 Update Error page to be a little better. 2024-10-19 14:51:20 +11:00
Ray 975e4ca76c Add CSS styling for Button on 404 HTML page 2024-10-19 14:48:45 +11:00
Ray b0731ad1b8 Add styles for the Error message on 404 page 2024-10-19 14:45:26 +11:00
2 changed files with 55 additions and 7 deletions
Show Stats Expand all files Collapse all files

23
404.html
View File

@ -3,14 +3,25 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - File Not Found</title> <title>404 - reiyua</title>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div class="container"> <video autoplay muted loop id="bg-video">
<h2>Whoops! Page Not Found</h2> <source src="assets/background_video.mp4" type="video/mp4">
<p>You must have made a typo of sorts, feel free to click the link below to retrn to my main page.</p> Your browser does not support HTML5 video.
<a href="/" class="button">Go Back Home</a> </video>
<div class="centered-content">
<h1>Nothing here!</h1>
<p class="error-message">No page can be found at this URL, please use the button below to go back to the main page.</p>
<a href="/" class="home-button">Go Back Home</a>
</div>
<div class="credit">
Video by <a href="https://www.pexels.com/video/an-orange-liquid-paint-in-motion-5649211/" target="_blank" rel="noopener noreferrer">Dan Cristian Pădureț</a> from Pexels
</div> </div>
</body> </body>
</html> </html>

39
styles.css
View File

@ -83,4 +83,41 @@ h1 {
.social-logo.email-logo { .social-logo.email-logo {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.error-message {
font-size: 1.5em;
color: #ffcccb; /* Light red color */
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
padding: 15px 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
margin-top: 20px;
display: inline-block;
text-align: center;
font-family: 'Jersey 10', sans-serif;
}
.home-button {
display: inline-block;
padding: 15px 30px;
margin-top: 20px;
background-color: #FAD6A5; /* Green button */
color: white;
text-decoration: none;
font-size: 1.2em;
font-family: 'Jersey 10', sans-serif;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.home-button:hover {
background-color: #45a049; /* Darker green on hover */
transform: translateY(-3px); /* Slight raise effect */
}
.home-button:active {
background-color: #388E3C; /* Even darker when active */
transform: translateY(0); /* Return to original position */
}