mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 11:06:21 +01:00
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.
This commit is contained in:
Alvin
105
css/styles.css
105
css/styles.css
@@ -320,3 +320,108 @@ body {
|
|||||||
max-width: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
41
index.html
41
index.html
@@ -17,28 +17,51 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="bg-gradient-to-br from-gray-100 to-blue-50">
|
<body class="bg-gradient-to-br from-gray-100 to-blue-50">
|
||||||
<!-- Navigation -->
|
<!-- 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">
|
<div class="container">
|
||||||
<a class="navbar-brand hover:scale-110 transition-transform duration-300" href="#">Your Brand</a>
|
<a class="navbar-brand hover:scale-110 transition-transform duration-300 flex items-center" href="#">
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<ul class="navbar-nav">
|
<ul class="navbar-nav ms-auto">
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
10
js/script.js
10
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');
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user