Enhance navbar design and functionality in index.html, styles.css, and script.js. Implement a glass effect for the navbar, add animated hover effects for navigation links, and introduce a scroll effect that changes the navbar's appearance on scroll. Update styles for improved responsiveness and visual appeal.

2026-03-06 02:56:27 +01:00 · 2025-06-04 11:12:00 +02:00
parent 1b0f0ca1a6
commit 2a9e57bb5d
3 changed files with 147 additions and 9 deletions
--- a/css/styles.css
+++ b/css/styles.css
@@ -319,4 +319,109 @@ body {
        flex: 0 0 100%;
        max-width: 100%;
    }
+}
+
+/* Navbar Styles */
+.glass-nav {
+    background: rgba(139, 92, 246, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.glass-nav:hover {
+    background: rgba(139, 92, 246, 0.15);
+}
+
+.navbar-brand img {
+    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
+}
+
+.nav-link {
+    position: relative;
+    padding: 0.5rem 1rem;
+    margin: 0 0.25rem;
+}
+
+.nav-link.active {
+    color: #fff !important;
+}
+
+.nav-link.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, #8B5CF6, #EC4899);
+    transform: scaleX(1);
+    transition: transform 0.3s ease;
+}
+
+.nav-link:not(.active)::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, #8B5CF6, #EC4899);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+    transform-origin: right;
+}
+
+.nav-link:hover::after {
+    transform: scaleX(1);
+    transform-origin: left;
+}
+
+/* Slow spin animation for logo */
+@keyframes spin-slow {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.animate-spin-slow {
+    animation: spin-slow 20s linear infinite;
+}
+
+/* Navbar scroll effect */
+.navbar {
+    transition: all 0.3s ease;
+}
+
+.navbar.scrolled {
+    background: rgba(139, 92, 246, 0.95);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Mobile menu styles */
+@media (max-width: 991.98px) {
+    .navbar-collapse {
+        background: rgba(139, 92, 246, 0.95);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+        border-radius: 0.5rem;
+        padding: 1rem;
+        margin-top: 0.5rem;
+    }
+
+    .nav-link {
+        padding: 0.75rem 1rem;
+        border-radius: 0.375rem;
+    }
+
+    .nav-link:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .nav-link::after {
+        display: none;
+    }
 } 
--- a/index.html
+++ b/index.html
@@ -17,28 +17,51 @@
 </head>
 <body class="bg-gradient-to-br from-gray-100 to-blue-50">
    <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-to-r from-purple-600 to-indigo-600 fixed-top transition-all duration-300 hover:shadow-lg">
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top transition-all duration-300 hover:shadow-lg glass-nav">
        <div class="container">
-            <a class="navbar-brand hover:scale-110 transition-transform duration-300" href="#">Your Brand</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <a class="navbar-brand hover:scale-110 transition-transform duration-300 flex items-center" href="#">
+                <img src="assets/favicon.svg" alt="Logo" class="h-8 w-8 mr-2 animate-spin-slow">
+                <span class="bg-gradient-to-r from-purple-400 to-pink-400 text-transparent bg-clip-text font-bold">Your Brand</span>
+            </a>
+            <button class="navbar-toggler border-0 focus:ring-2 focus:ring-purple-500 transition-all duration-300" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav">
+                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
-                        <a class="nav-link active hover:text-pink-300 transition-colors duration-300" href="#home">Home</a>
+                        <a class="nav-link active hover:text-pink-300 transition-all duration-300 relative group" href="#home">
+                            Home
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                        </a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#about">About</a>
+                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#about">
+                            About
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                        </a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#services">Services</a>
+                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#services">
+                            Services
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                        </a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#portfolio">Portfolio</a>
+                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#portfolio">
+                            Portfolio
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                        </a>
                    </li>
                    <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#contact">Contact</a>
+                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#contact">
+                            Contact
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                        </a>
+                    </li>
+                    <li class="nav-item ms-3">
+                        <button class="btn btn-sm btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
+                            Get Started
+                        </button>
                    </li>
                </ul>
            </div>
--- a/js/script.js
+++ b/js/script.js
@@ -209,4 +209,14 @@ document.addEventListener('DOMContentLoaded', () => {
            });
        });
    }
+
+    // Navbar scroll effect
+    const navbar = document.querySelector('.navbar');
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 50) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
 });