created floating side bar

public/de/index.html

@@ -11,6 +11,12 @@
     <nav>
         <a class="navbar" href="../en/index.html">English</a>
     </nav>
+    <div id="navbar-outer">
+        <div id="navbar">
+            <a href="#about">About</a>
+            <a href="#why">Why</a>
+        </div>
+    </div>
     <header id="about">
         <h1>Hi, ich bin Marco</h1>
         <p>und das ist meine Webseite</p>

public/en/index.html

@@ -11,6 +11,12 @@
     <nav>
         <a class="navbar" href="../de/index.html">Deutsch</a>
     </nav>
+    <div id="navbar-outer">
+        <div id="navbar">
+            <a href="#about">About</a>
+            <a href="#why">Why</a>
+        </div>
+    </div>
     <header id="about">
         <h1>Hi, I'm Marco</h1>
         <p>and this is my website</p>

public/styles.css

@@ -7,8 +7,30 @@ h1, h2, h3, h4, h5, p {
   color: #DDDDEE
 }
 
-a.navbar {
+a {
   color: #DD7FB6;
   text-decoration: none
 }
 
+#navbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  overflow: hidden;
+  flex-direction: column;
+  display: flex;
+  float: right;
+}
+
+#navbar a {
+  float: right;
+  display: block;
+  text-align: end;
+  padding: 5px;
+  text-decoration: none;
+}
+
+#navbar a:hover {
+  color: #D0A7DF
+}
+

template-index.html

@@ -11,6 +11,10 @@
     <nav>
         {{language-switcher}}
     </nav>
+        <div id="navbar">
+            <a href="#about">About</a>
+            <a href="#why">Why</a>
+        </div>
     <header id="about">
         <h1>{{introduction-heading}}</h1>
         <p>{{introduction-subheading}}</p>