48 lines
3.0 KiB
Plaintext
48 lines
3.0 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">
|
|
<div class="bg-white rounded-full p-2 flex gap-2 group-logo">
|
|
<img class="w-8 h-8" src="/images/logo/e_bank_sampah.png" alt="E Bank Sampah" />
|
|
<img class="w-8 h-8" src="/images/logo/dlh_jakarta.png" alt="DLH Jakarta" />
|
|
<img class="w-8 h-8" src="/images/logo/jakarta.png" alt="Jakarta" />
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:flex justify-start items-center gap-8 bg-white/10 backdrop-blur-md p-2 rounded-lg navbar-landing">
|
|
<a href="#home" class="rounded 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 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 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 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 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 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 auth-btn">
|
|
<a asp-controller="Auth" asp-action="Login" class="btn bg-white rounded-full shadow-none border-none">
|
|
<div class="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> |