File size: 7,925 Bytes
568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d 73c7aa6 568e73d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Dark Navbar</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.navbar {
backdrop-filter: blur(10px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #3b82f6;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.mobile-menu {
transition: all 0.3s ease-in-out;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100">
<!-- Premium Dark Navbar -->
<nav class="navbar fixed top-0 left-0 right-0 z-50 bg-gray-900/80 py-4 px-6 lg:px-12">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<!-- Logo -->
<div class="flex items-center">
<a href="#" class="text-2xl font-bold">
<span class="gradient-text">PREMIUM</span>
</a>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Home</a>
<a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Features</a>
<a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Pricing</a>
<a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">About</a>
<a href="#" class="nav-link text-gray-300 hover:text-white transition-colors duration-300">Contact</a>
<div class="relative group">
<button class="flex items-center space-x-1 text-gray-300 hover:text-white transition-colors duration-300">
<span>More</span>
<i class="fas fa-chevron-down text-xs transition-transform duration-300 group-hover:rotate-180"></i>
</button>
<div class="absolute left-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
<a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Blog</a>
<a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Careers</a>
<a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Support</a>
</div>
</div>
</div>
<!-- CTA Buttons -->
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="px-4 py-2 text-gray-300 hover:text-white transition-colors duration-300">Login</a>
<a href="#" class="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full hover:opacity-90 transition-opacity duration-300 shadow-lg hover:shadow-blue-500/30">
Get Started
</a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="mobile-menu md:hidden absolute top-full left-0 right-0 bg-gray-800/95 overflow-hidden max-h-0">
<div class="px-6 py-4 space-y-4">
<a href="#" class="block py-2 text-gray-300 hover:text-white">Home</a>
<a href="#" class="block py-2 text-gray-300 hover:text-white">Features</a>
<a href="#" class="block py-2 text-gray-300 hover:text-white">Pricing</a>
<a href="#" class="block py-2 text-gray-300 hover:text-white">About</a>
<a href="#" class="block py-2 text-gray-300 hover:text-white">Contact</a>
<div class="pt-2 border-t border-gray-700">
<a href="#" class="block py-2 text-gray-300 hover:text-white">Login</a>
<a href="#" class="inline-block mt-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full hover:opacity-90">
Get Started
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section (for demo purposes) -->
<div class="min-h-screen pt-32 px-6 lg:px-12">
<h1 class="text-4xl md:text-6xl font-bold text-center mb-6">Premium <span class="gradient-text">Dark Navbar</span></h1>
<p class="text-gray-400 max-w-2xl mx-auto text-center">A sleek, professional navigation bar with dark theme design. Perfect for modern web applications and premium websites.</p>
</div>
<script>
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
const isOpen = mobileMenu.classList.contains('max-h-0');
if (isOpen) {
mobileMenu.classList.remove('max-h-0');
mobileMenu.classList.add('max-h-screen', 'py-4');
} else {
mobileMenu.classList.add('max-h-0');
mobileMenu.classList.remove('max-h-screen', 'py-4');
}
});
// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) {
mobileMenu.classList.add('max-h-0');
mobileMenu.classList.remove('max-h-screen', 'py-4');
}
});
// Add shadow on scroll
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 10) {
navbar.classList.add('shadow-xl');
} else {
navbar.classList.remove('shadow-xl');
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SilentProgrammer/credit-card-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |