45 lines
2.8 KiB
Plaintext
45 lines
2.8 KiB
Plaintext
<nav id="navbar" class="w-full h-24 px-4 lg:px-28 fixed left-0 top-0 z-50 flex flex-col justify-center items-center transition-all duration-300">
|
|
<div class="w-full max-w-[1440px] flex justify-center items-center gap-8">
|
|
<div class="flex-1 flex justify-start items-center gap-2">
|
|
<img class="w-11 h-10" src="/images/logo.png" alt="Logo" />
|
|
</div>
|
|
<div class="hidden lg:flex justify-start items-center gap-8">
|
|
<a href="/" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
|
|
<div class="text-white text-base font-semibold font-jakarta leading-6">Beranda</div>
|
|
</a>
|
|
<a href="#about" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
|
|
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Tentang</div>
|
|
</a>
|
|
<a href="#publications" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
|
|
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Publikasi</div>
|
|
</a>
|
|
<a href="#regulations" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
|
|
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Regulasi</div>
|
|
</a>
|
|
<a href="#location" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
|
|
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Lokasi</div>
|
|
</a>
|
|
<a href="#helpdesk" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
|
|
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Helpdesk</div>
|
|
</a>
|
|
</div>
|
|
<div class="flex-1 flex justify-end items-center gap-4">
|
|
<a asp-controller="Auth" asp-action="Login" class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-[99px] flex justify-center items-center gap-2 transition-colors">
|
|
<div class="text-white text-base font-semibold font-jakarta leading-6">Login</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', function() {
|
|
const navbar = document.getElementById('navbar');
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
|
|
} else {
|
|
navbar.classList.remove('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
|
|
}
|
|
});
|
|
</script>
|