Navigation fertiggestellt

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;