++ Added Nav nearly everywhere.

deployor · Nov 1, 2024 · 2fd55eb · 2fd55eb
1 parent ec7800f
commit 2fd55eb
Show file tree

Hide file tree

Showing 17 changed files with 252 additions and 9 deletions.
diff --git a/v2/Flags/style.css b/v2/Flags/style.css
@@ -88,4 +88,42 @@ p {
 #restart-btn:hover {
     background-color: #00d312;
     transform: scale(1.05);
-}
+}
+
+/* TODO: Revamp to allow for non centered stuff LOL */
+
+nav {
+    background-color: #34495e;
+    overflow: hidden;
+    z-index: 2;
+}
+
+nav ul {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    margin: 0 15px;
+}
+
+nav ul li a {
+    color: #ecf0f1;
+    display: block;
+    font-size: 1rem;
+    padding: 14px 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: transform 0.2s, background-color 0.3s, color 0.3s;
+}
+
+nav ul li a:hover {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    color: #ffffff;
+    transform: scale(1.1);
+    z-index: 2;
+}
diff --git a/v2/fragen/Password/OmisRezept/index.html b/v2/fragen/Password/OmisRezept/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-
     <meta charset="UTF-8"/>
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <title>Omas Apfelkuchen rezept</title>
@@ -38,6 +37,14 @@
     <meta content="#ffffff" name="theme-color"/>
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../../../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <div class="container">
     <h1>Omas Apfelkuchen!</h1>
     <img alt="Omis Kuchen" src="assets/images/kuchen.png"/>
@@ -49,7 +56,7 @@ <h1>Omas Apfelkuchen!</h1>
             title="YouTube video player"
             width="560"
     ></iframe>
-    <h2>Zutaten:</h2>
+    <h2>Zutaten:</h2> <!-- TODO: Fix all the things prettier messed up -->
     <ul>
         <li>250g Mehl</li>
         <li>125g Zucker</li>

diff --git a/v2/fragen/Password/index.html b/v2/fragen/Password/index.html
@@ -8,6 +8,14 @@
     <link href="style.css" rel="stylesheet"/>
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <main>
     <header>
         <h1>

diff --git a/v2/fragen/Password/style.css b/v2/fragen/Password/style.css
@@ -130,4 +130,39 @@ h1 {
         background-color: yellow;
     }
 }
-
+
+nav {
+    background-color: #34495e;
+    overflow: hidden;
+    z-index: 2;
+}
+
+nav ul {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    margin: 0 15px;
+}
+
+nav ul li a {
+    color: #ecf0f1;
+    display: block;
+    font-size: 1rem;
+    padding: 14px 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: transform 0.2s, background-color 0.3s, color 0.3s;
+}
+
+nav ul li a:hover {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    color: #ffffff;
+    transform: scale(1.1);
+    z-index: 2;
+}
diff --git a/v2/fragen/css/style.css b/v2/fragen/css/style.css
@@ -189,3 +189,39 @@ footer {
 
     color: #bdc3c7;
 }
+
+nav {
+    background-color: #34495e;
+    overflow: hidden;
+    z-index: 2;
+}
+
+nav ul {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    margin: 0 15px;
+}
+
+nav ul li a {
+    color: #ecf0f1;
+    display: block;
+    font-size: 1rem;
+    padding: 14px 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: transform 0.2s, background-color 0.3s, color 0.3s;
+}
+
+nav ul li a:hover {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    color: #ffffff;
+    transform: scale(1.1);
+    z-index: 2;
+}
diff --git a/v2/fragen/falsch.html b/v2/fragen/falsch.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <title>Labyrinth - Falsch</title>
@@ -17,9 +16,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
-<audio autoplay loop>
-    <source src="assets/audio/You Failed!.mp3">
-</audio>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <main> <!-- Hauptbereich der Webseite -->
     <section class="falsch"> <!-- Abschnitt bzw Container "falsch" -->
         <img alt="Falsch" class="falsch-bild" src="assets/images/falsch.png">

diff --git a/v2/fragen/frage1.html b/v2/fragen/frage1.html
@@ -17,11 +17,18 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 1</h1>
     <p>Wähle die richtige Antwort.</p>
 </header>
-
 <main class="container">
     <section class="frage">
         <img alt="Denken" class="frage-bild" src="assets/images/padding.png"/>

diff --git a/v2/fragen/frage10.html b/v2/fragen/frage10.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 10</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage2.html b/v2/fragen/frage2.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 2</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage3.html b/v2/fragen/frage3.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 3</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage4.html b/v2/fragen/frage4.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 4</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage5.html b/v2/fragen/frage5.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 5</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage6.html b/v2/fragen/frage6.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 6</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage7.html b/v2/fragen/frage7.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 7</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage8.html b/v2/fragen/frage8.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 8</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/frage9.html b/v2/fragen/frage9.html
@@ -17,6 +17,14 @@
     <meta content="#ffffff" name="theme-color">
 </head>
 <body>
+<header>
+    <nav>
+        <ul>
+            <li><a href="../wahl.html">Home</a></li>
+        </ul>
+    </nav>
+    <h1>Die Idee</h1>
+</header>
 <header>
     <h1>Frage 9</h1>
     <p>Wähle die richtige Antwort.</p>

diff --git a/v2/fragen/style.css b/v2/fragen/style.css
@@ -318,3 +318,39 @@ footer {
         background-color: yellow;
     }
 }
+
+nav {
+    background-color: #34495e;
+    overflow: hidden;
+    z-index: 2;
+}
+
+nav ul {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav ul li {
+    margin: 0 15px;
+}
+
+nav ul li a {
+    color: #ecf0f1;
+    display: block;
+    font-size: 1rem;
+    padding: 14px 16px;
+    text-align: center;
+    text-decoration: none;
+    transition: transform 0.2s, background-color 0.3s, color 0.3s;
+}
+
+nav ul li a:hover {
+    background-color: #2c3e50;
+    border-radius: 4px;
+    color: #ffffff;
+    transform: scale(1.1);
+    z-index: 2;
+}