website
404 page
| -rw-r--r-- | 404.html | 28 | ||||
| -rw-r--r-- | style/404.css | 12 | ||||
| -rw-r--r-- | style/styles.css | 22 |
3 files changed, 61 insertions, 1 deletions
diff --git a/404.html b/404.html new file mode 100644 index 0000000..eda508b --- /dev/null +++ b/404.html @@ -0,0 +1,28 @@ +<!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>bendn - page not found</title> + <link rel="stylesheet" href="/style/404.css" /> + <link rel="stylesheet" href="/style/styles.css" /> + <script + src="https://kit.fontawesome.com/be4f130556.js" + crossorigin="anonymous" + ></script> + </head> + <body> + <div id="wrapper"> + <h1 class="header"><i class="fa-solid fa-bug"></i> 404</h1> + <div id="inner_column"> + <p align="center"> + the page you were looking for could not be found.<br />return to + <a class="link" href="/index.html" + ><i class="fa-solid fa-house"></i> home</a + >? + </p> + </div> + </div> + </body> +</html> diff --git a/style/404.css b/style/404.css new file mode 100644 index 0000000..554690e --- /dev/null +++ b/style/404.css @@ -0,0 +1,12 @@ +.header { + font-size: 5em; + color: #dc322f !important; +} + +#inner_column { + height: 40% !important; +} + +p { + font-size: 1.5em; +} diff --git a/style/styles.css b/style/styles.css index e79cc11..ffbedcd 100644 --- a/style/styles.css +++ b/style/styles.css @@ -20,8 +20,10 @@ --background-color: #002b36; --background2-color: #073642; --button-text-color: var(--text-color); - --button-color: #268bd2; + --button-color: var(--link-color); --background-border-color: var(--button-color); + --link-color: #268bd2; + --visited-link-color: #d33682; --text-color: #eee8d5; --highlight-text-color: #fdf6e3; --ease: cubic-bezier(0.68, -0.55, 0.27, 1.55); @@ -61,3 +63,21 @@ button:hover, border-radius: 10px; overflow: scroll; } + +a.link:link { + color: var(--link-color); + text-decoration: none; +} + +a.link:visited { + color: var(--visited-link-color); + text-decoration: none; +} + +a.link:hover { + text-decoration: underline; +} + +a.link:active { + text-decoration: underline; +} |