25 lines
2.0 KiB
Plaintext
25 lines
2.0 KiB
Plaintext
<nav class="fixed w-full z-50 bg-white/95 backdrop-blur-md border-b border-slate-100 transition-all duration-300" id="navbar">
|
|
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
|
<a href="/Home" class="text-2xl font-bold text-slate-900 tracking-tight hover:opacity-80 transition">CLIVE <span class="text-blue-600">LANCASTER</span></a>
|
|
|
|
<div class="hidden md:flex space-x-8 items-center">
|
|
<a href="/Home/#about" class="text-slate-600 hover:text-blue-600 font-medium transition">About</a>
|
|
<a href="/Home/#services" class="text-slate-600 hover:text-blue-600 font-medium transition">Services</a>
|
|
<a href="/Home/#experience" class="text-slate-600 hover:text-blue-600 font-medium transition">Experience</a>
|
|
<a href="https://blog.clivelancaster.com" class="text-slate-600 hover:text-blue-600 font-medium transition">Blog</a>
|
|
</div>
|
|
|
|
<button id="mobile-menu-btn" class="md:hidden text-slate-600 text-2xl focus:outline-none p-2" aria-label="Toggle Menu">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden absolute top-20 left-0 w-full bg-white border-b border-slate-100 shadow-xl">
|
|
<div class="flex flex-col px-6 py-4 space-y-4">
|
|
<a href="/Home/#about" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">About</a>
|
|
<a href="/Home/#services" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">Services</a>
|
|
<a href="/Home/#experience" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">Experience</a>
|
|
<a href="https://blog.clivelancaster.com" class="mobile-link text-slate-600 hover:text-blue-600 font-medium text-lg block py-2 border-b border-slate-50">Blog</a>
|
|
</div>
|
|
</div>
|
|
</nav> |