diff --git a/Javascript/app.js b/Javascript/app.js
index 2ee03a5..82f5e79 100644
--- a/Javascript/app.js
+++ b/Javascript/app.js
@@ -6,3 +6,21 @@ const swiper = new Swiper('.swiper', {
el: '.swiper-pagination',
},
});
+
+// Für die Links in der Navbar, dass die Striche beim aktuell geklickten bleiben
+document.addEventListener("DOMContentLoaded", function() {
+ var navLinks = document.querySelectorAll('.navbar .nav-link');
+ var initialSelected = document.querySelector('.navbar .nav-link[aria-current="page"]');
+ if (initialSelected) {
+ initialSelected.classList.add('selected');
+ }
+
+ navLinks.forEach(function(link) {
+ link.addEventListener('click', function() {
+ // Alle anderen Links zurücksetzen
+ navLinks.forEach(l => l.classList.remove('selected'));
+ // Die 'selected' Klasse zum angeklickten Link hinzufügen
+ link.classList.add('selected');
+ });
+ });
+});
diff --git a/Styles/style.css b/Styles/style.css
index dee8606..b099aa6 100644
--- a/Styles/style.css
+++ b/Styles/style.css
@@ -1,3 +1,59 @@
+/* Navigation*/
+.navbar {
+ background-color: #212121 !important;
+ margin-bottom: 20px;
+ height: 70px;
+}
+
+.navbar .navbar-nav .nav-link { /* Schrift für Nav-Links ändern */
+ color: #FFFFFF;
+ font-size: 13pt;
+}
+
+.navbar-expand-lg .navbar-nav .nav-link {
+ padding-right: 20px !important;
+}
+
+.navbar-brand img {
+ padding-left: 10px;
+}
+
+.nav-link.selected::after { /* Über uns startet mit den Grünen-Nav-Strichen */
+ visibility: visible;
+ transform: scaleX(1);
+}
+
+.nav-link.active, .nav-link:hover, .nav-link:focus {
+ color: #4CAF50;
+ transition: color 0.5s ease;
+ color: #FFFFFF;
+}
+
+.nav-link { /* Animation für das die Links */
+ position: relative;
+ transition: all 0.3s ease-out;
+}
+
+.nav-link::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ bottom: 0;
+ left: 0;
+ background-color: #4CAF50;
+ visibility: hidden;
+ transform: scaleX(0);
+ transition: all 0.3s ease-in-out 0s;
+}
+
+.nav-link:hover::after, .nav-link:focus::after {
+ visibility: visible;
+ transform: scaleX(1);
+}
+/* Navigationsende*/
+
+
section {
width: 100%;
height: 100vh;
diff --git a/index.html b/index.html
index 8ef8f83..dd15c57 100644
--- a/index.html
+++ b/index.html
@@ -11,21 +11,24 @@
-
+
+