added new 404 error page

Author: mbplabst

assets/images/error/404-error.jpg

@@ -20,19 +20,19 @@
             <div id="navigation-bar">
                 <ul>
                     <li>
-                        <a href="home.html">
+                        <a href="/home.html">
                             <i class="fa-solid fa-house"></i>
                             <span>Home</span>
                         </a>
                     </li>
                     <li>
-                        <a href="games.html">
+                        <a href="/games.html">
                             <i class="fa-solid fa-chess-knight"></i>
                             <span>Spielen</span>
                         </a>
                     </li>
                     <li>
-                        <a href="infos.html">
+                        <a href="/infos.html">
                             <i class="fa-solid fa-circle-info"></i>
                             <span>Infos</span>
                         </a>
@@ -43,15 +43,24 @@
     </nav>
 
     <main class="header">
-        <h1 class="page-title"><strong>Home</strong></h1>
 
-        <section class="wrapper card-wrapper">
-            <h1 class="header-title">Wer wir sind</h1>
-            <p class="content-text content-hightlight">Wir sind die Schülerinnen und Schüler des<br>
-                P-Seminars Musik! Wir wollen mit euch einen besonderen Spieletag veranstalten, bei dem ihr alles rund um
-                die Musik spielerisch entdecken und kennenlernen könnt.</p>
+        <section class="wrapper">
+            <img src="/assets/images/error/404-error.jpg" alt="error" class="error-image" draggable="false"
+                style="border-radius: 10px;">
+            <h1 class="header bold" style="color: #e74c3c;">
+                <i class="fa-solid fa-triangle-exclamation" style="color: #e74c3c;"></i> Ein Fehler ist aufgetreten!
+            </h1>
+            <p class="content-text content-hightlight">Leider können wir deine gewünschte Seite nicht finden. Wenn du
+                nicht weißt, wie oder warum du hierher gekommen bist, kommst du unten ganz einfach zurück zur
+                Startseite.<br><br>
+                Fehlercode: 404
+            </p>
+            <a href="/games/quizz/">
+                <button type="button" class="game-button button-top">
+                    <i class="fa-solid fa-play"></i><span class="button-with-adjust"></span> Zurück zur Startseite
+                </button>
+            </a>
         </section>
-
     </main>
 
     <footer>

errors/404.html error/404.html

@@ -119,7 +119,7 @@ <h1 class="header-title">Zuordnen</h1>
                     </p>
 
                     <a href="/games/instruments/"><button type="button" class="game-button">
-                            <i class="fa-solid fa-play"></i><span class="button-with-adjust"></span> 
+                            <i class="fa-solid fa-play"></i><span class="button-with-adjust"></span>
                             Jetzt Spielen</button></a>
                 </div>
             </div>

games.html

@@ -1,4 +1,4 @@
 [[redirects]]
   from = "/*"
-  to = "/errors/404.html"
+  to = "/error/404.html"
   status = 404

netlify.toml

@@ -251,6 +251,26 @@ button {
     margin-bottom: 15px;
 }
 
+.error-image {
+    max-width: 330px;
+    margin: 5px 0px 5px 0px;
+}
+
+hr {
+    margin: 5px 0px 5px;
+    border: 2px solid #242424;
+    border-radius: 2px;
+}
+
+.bold {
+    font-weight: 100 !important;
+    margin-bottom: 5px;
+}
+
+.button-top {
+    margin-top: 10px !important;
+}
+
 /*****************************************/
 /*               FOOTER                  */
 /*****************************************/