alvin/challenge-11
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/challenge-11.git synced 2026-03-06 13:21:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Alvin
2025-06-04 11:12:00 +02:00
parent 1b0f0ca1a6
commit 2a9e57bb5d
3 changed files with 147 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@@ -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>