35 lines
2.3 KiB
HTML
35 lines
2.3 KiB
HTML
<header class="site-header">
|
|
<div class="mx-auto flex h-20 max-w-content items-center justify-between px-5 lg:px-8">
|
|
<a href="/" class="flex items-center gap-3" aria-label="Venus Photo Studio And Lab home">
|
|
<img src="assets/images/logo/venus-monogram.jpg" class="h-11 w-11" alt="" width="44" height="44">
|
|
<span class="leading-tight">
|
|
<span class="block font-display text-lg font-bold text-white sm:text-xl">Venus Photo Studio</span>
|
|
<span class="block text-[0.62rem] font-bold uppercase tracking-[0.18em] text-gold">And Lab | Photography & Film</span>
|
|
</span>
|
|
</a>
|
|
<nav class="hidden items-center gap-8 lg:flex" aria-label="Primary navigation">
|
|
<a href="/" class="nav-link text-sm font-semibold" data-nav="home">Home</a>
|
|
<a href="/about" class="nav-link text-sm font-semibold" data-nav="about">About</a>
|
|
<a href="/gallery" class="nav-link text-sm font-semibold" data-nav="gallery">Gallery</a>
|
|
<a href="/services" class="nav-link text-sm font-semibold" data-nav="services">Services</a>
|
|
<a href="/contact" class="nav-link text-sm font-semibold" data-nav="contact">Contact</a>
|
|
</nav>
|
|
<a href="https://www.instagram.com/venus_karaikal/" target="_blank" rel="noopener" class="ghost-button hidden lg:inline-flex">
|
|
<i data-lucide="instagram" class="h-4 w-4"></i>
|
|
Instagram
|
|
</a>
|
|
<button class="grid h-11 w-11 place-items-center border border-white/15 text-white lg:hidden" type="button" data-menu-toggle aria-expanded="false" aria-label="Open navigation">
|
|
<i data-menu-icon data-lucide="menu" class="h-5 w-5"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-panel border-t border-white/10 bg-night/95 lg:hidden" data-mobile-panel>
|
|
<nav class="mx-auto grid max-w-content gap-1 px-5 py-5" aria-label="Mobile navigation">
|
|
<a href="/" class="nav-link py-3 text-base font-semibold" data-nav="home">Home</a>
|
|
<a href="/about" class="nav-link py-3 text-base font-semibold" data-nav="about">About</a>
|
|
<a href="/gallery" class="nav-link py-3 text-base font-semibold" data-nav="gallery">Gallery</a>
|
|
<a href="/services" class="nav-link py-3 text-base font-semibold" data-nav="services">Services</a>
|
|
<a href="/contact" class="nav-link py-3 text-base font-semibold" data-nav="contact">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|