mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-07-02 07:03:46 +00:00
fix: correct mobile layout
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
bc95267aa4
commit
2fc620570b
6 changed files with 576 additions and 1811 deletions
178
index.html
178
index.html
|
|
@ -20,13 +20,13 @@
|
|||
<body class="bg-kh3-black text-white font-montserrat overflow-x-hidden">
|
||||
<!-- Navigation Menu -->
|
||||
<div
|
||||
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
|
||||
class="fixed left-0 top-0 h-full w-5/6 md:w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
|
||||
id="navMenu"
|
||||
>
|
||||
<div class="p-8 flex flex-col h-full">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center gap-3 mb-12">
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
|
||||
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -37,11 +37,13 @@
|
|||
<!-- Navigation items in inverted C shape -->
|
||||
<div class="space-y-6">
|
||||
<!-- HOME - Top -->
|
||||
<a
|
||||
href="index.html"
|
||||
class="block text-white text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
|
||||
<a
|
||||
href="index.html"
|
||||
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 font-montserrat"
|
||||
>
|
||||
<span class="md:hidden">HOME</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.05s;
|
||||
|
|
@ -51,6 +53,7 @@
|
|||
>H</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.075s;
|
||||
|
|
@ -60,6 +63,7 @@
|
|||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.1s;
|
||||
|
|
@ -69,6 +73,7 @@
|
|||
>M</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.125s;
|
||||
|
|
@ -80,11 +85,13 @@
|
|||
</a>
|
||||
|
||||
<!-- ABOUT US - Slightly right -->
|
||||
<a
|
||||
href="about.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
|
||||
<a
|
||||
href="about.html"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-6 font-montserrat"
|
||||
>
|
||||
<span class="md:hidden">ABOUT US</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.15s;
|
||||
|
|
@ -94,6 +101,7 @@
|
|||
>A</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.175s;
|
||||
|
|
@ -103,6 +111,7 @@
|
|||
>B</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.2s;
|
||||
|
|
@ -112,6 +121,7 @@
|
|||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.225s;
|
||||
|
|
@ -121,6 +131,7 @@
|
|||
>U</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.25s;
|
||||
|
|
@ -130,6 +141,7 @@
|
|||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.275s;
|
||||
|
|
@ -139,6 +151,7 @@
|
|||
> </span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.3s;
|
||||
|
|
@ -148,6 +161,7 @@
|
|||
>U</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.325s;
|
||||
|
|
@ -159,11 +173,13 @@
|
|||
</a>
|
||||
|
||||
<!-- SERVICES - More right -->
|
||||
<a
|
||||
href="services.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
|
||||
<a
|
||||
href="services.html"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
|
||||
>
|
||||
<span class="md:hidden">SERVICES</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.35s;
|
||||
|
|
@ -173,6 +189,7 @@
|
|||
>S</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.375s;
|
||||
|
|
@ -182,6 +199,7 @@
|
|||
>E</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.4s;
|
||||
|
|
@ -191,6 +209,7 @@
|
|||
>R</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.425s;
|
||||
|
|
@ -200,6 +219,7 @@
|
|||
>V</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.45s;
|
||||
|
|
@ -209,6 +229,7 @@
|
|||
>I</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.475s;
|
||||
|
|
@ -218,6 +239,7 @@
|
|||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.5s;
|
||||
|
|
@ -227,6 +249,7 @@
|
|||
>E</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.525s;
|
||||
|
|
@ -240,9 +263,11 @@
|
|||
<!-- PROJECTS - Most right -->
|
||||
<a
|
||||
href="projects.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-20 font-montserrat"
|
||||
>
|
||||
<span class="md:hidden">PROJECTS</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.55s;
|
||||
|
|
@ -252,6 +277,7 @@
|
|||
>P</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.575s;
|
||||
|
|
@ -261,6 +287,7 @@
|
|||
>R</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.6s;
|
||||
|
|
@ -270,6 +297,7 @@
|
|||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.625s;
|
||||
|
|
@ -279,6 +307,7 @@
|
|||
>J</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.65s;
|
||||
|
|
@ -288,6 +317,7 @@
|
|||
>E</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.675s;
|
||||
|
|
@ -297,6 +327,7 @@
|
|||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.7s;
|
||||
|
|
@ -306,6 +337,7 @@
|
|||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.725s;
|
||||
|
|
@ -317,11 +349,13 @@
|
|||
</a>
|
||||
|
||||
<!-- CONTACTS - More right -->
|
||||
<a
|
||||
href="contact.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
|
||||
<a
|
||||
href="contact.html"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 md:ml-12 font-montserrat"
|
||||
>
|
||||
<span class="md:hidden">CONTACTS</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.75s;
|
||||
|
|
@ -331,6 +365,7 @@
|
|||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.775s;
|
||||
|
|
@ -340,6 +375,7 @@
|
|||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.8s;
|
||||
|
|
@ -349,6 +385,7 @@
|
|||
>N</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.825s;
|
||||
|
|
@ -358,6 +395,7 @@
|
|||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.85s;
|
||||
|
|
@ -367,6 +405,7 @@
|
|||
>A</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.875s;
|
||||
|
|
@ -376,6 +415,7 @@
|
|||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.9s;
|
||||
|
|
@ -385,6 +425,7 @@
|
|||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.925s;
|
||||
|
|
@ -398,9 +439,11 @@
|
|||
<!-- PARTNERS - Back to left -->
|
||||
<a
|
||||
href="partners.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
||||
>
|
||||
<span class="md:hidden">PARTNERS</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.95s;
|
||||
|
|
@ -410,6 +453,7 @@
|
|||
>P</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.975s;
|
||||
|
|
@ -419,6 +463,7 @@
|
|||
>A</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1s;
|
||||
|
|
@ -428,6 +473,7 @@
|
|||
>R</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.025s;
|
||||
|
|
@ -437,6 +483,7 @@
|
|||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.05s;
|
||||
|
|
@ -446,6 +493,7 @@
|
|||
>N</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.075s;
|
||||
|
|
@ -455,6 +503,7 @@
|
|||
>E</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.1s;
|
||||
|
|
@ -464,6 +513,7 @@
|
|||
>R</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.125s;
|
||||
|
|
@ -482,7 +532,7 @@
|
|||
|
||||
<!-- Main Layout -->
|
||||
<div class="min-h-screen relative">
|
||||
<section class="relative h-screen flex">
|
||||
<section class="relative min-h-screen flex flex-col md:flex-row">
|
||||
<!-- KH3 Logo -->
|
||||
<div
|
||||
class="absolute top-8 left-8 z-20 opacity-0 animate-fade-in-left"
|
||||
|
|
@ -495,7 +545,7 @@
|
|||
class="w-16 h-16"
|
||||
/>
|
||||
<span
|
||||
class="text-white text-2xl font-bold tracking-wider animate-logo-glow"
|
||||
class="hidden sm:inline text-white text-2xl font-bold tracking-wider animate-logo-glow"
|
||||
>KH3</span
|
||||
>
|
||||
</div>
|
||||
|
|
@ -540,7 +590,7 @@
|
|||
|
||||
<!-- LEFT COLUMN -->
|
||||
<div
|
||||
class="w-1/3 bg-kh3-black flex items-center p-8 opacity-0 animate-fade-in-left"
|
||||
class="w-full md:w-1/3 bg-kh3-black flex items-start md:items-center p-8 pt-24 md:pt-8 opacity-0 animate-fade-in-left"
|
||||
style="animation-delay: 0.8s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="max-w-xl space-y-2">
|
||||
|
|
@ -577,7 +627,7 @@
|
|||
>DESIGN</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DELIVER -->
|
||||
<div class="flex items-center gap-6">
|
||||
|
|
@ -601,10 +651,10 @@
|
|||
|
||||
<!-- RIGHT COLUMN -->
|
||||
<div
|
||||
class="w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden"
|
||||
class="w-full md:w-2/3 relative opacity-0 animate-fade-in-right overflow-hidden"
|
||||
style="animation-delay: 0.3s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="relative h-full">
|
||||
<div class="relative h-[60vh] md:h-full">
|
||||
<!-- Current Image -->
|
||||
<img
|
||||
id="currentImg"
|
||||
|
|
@ -625,11 +675,11 @@
|
|||
|
||||
<!-- About Us Button - Bottom Center -->
|
||||
<div
|
||||
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0"
|
||||
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 opacity-0 hidden md:block"
|
||||
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
||||
>
|
||||
<a
|
||||
class="inline-block uppercase tracking-wider px-6 py-3 border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
|
||||
class="inline-block uppercase tracking-wider px-5 py-2 md:px-6 md:py-3 text-sm md:text-base border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none animate-border-glow"
|
||||
href="about.html"
|
||||
data-trans
|
||||
>
|
||||
|
|
@ -639,18 +689,39 @@
|
|||
|
||||
<!-- Contact Link - Bottom Right -->
|
||||
<div
|
||||
class="absolute bottom-8 right-8 flex items-center space-x-4 z-20 opacity-0 animate-fade-in-right"
|
||||
class="absolute bottom-8 right-8 hidden md:flex items-center space-x-3 md:space-x-4 z-20 opacity-0 animate-fade-in-right"
|
||||
style="animation-delay: 1.4s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="w-8 h-px bg-kh3-red"></div>
|
||||
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
||||
<a
|
||||
href="contact.html"
|
||||
data-trans
|
||||
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider"
|
||||
class="text-white hover:text-kh3-red transition-colors uppercase tracking-wider text-sm md:text-base"
|
||||
>
|
||||
CONTACTS
|
||||
</a>
|
||||
<div class="w-8 h-px bg-kh3-red"></div>
|
||||
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile CTA bar: About & Contacts (centered) -->
|
||||
<div
|
||||
class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 md:hidden opacity-0"
|
||||
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<a
|
||||
href="about.html"
|
||||
data-trans
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
|
||||
>About us</a
|
||||
>
|
||||
<a
|
||||
href="contact.html"
|
||||
data-trans
|
||||
class="px-4 py-2 text-sm uppercase tracking-wider border border-white text-white hover:bg-kh3-red hover:border-kh3-red transition-all duration-300 rounded-none"
|
||||
>Contacts</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -848,6 +919,27 @@
|
|||
});
|
||||
});
|
||||
|
||||
// Hide curtains and close nav just before page is cached (prevents blank back step)
|
||||
window.addEventListener("pagehide", () => {
|
||||
if (curtainTop) curtainTop.style.transform = "translateY(-100%)";
|
||||
if (curtainBottom) curtainBottom.style.transform = "translateY(100%)";
|
||||
const navEl = document.getElementById("navMenu");
|
||||
const gridEl = document.getElementById("menuGrid");
|
||||
if (navEl) navEl.classList.add("hidden");
|
||||
if (gridEl) {
|
||||
gridEl.innerHTML = `
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>
|
||||
<span class=\"w-1 h-1 bg-white\"></span>`;
|
||||
}
|
||||
});
|
||||
|
||||
// Enhanced slide + zoom hero image transitions
|
||||
const imgs = [
|
||||
"assets/images/room.png",
|
||||
|
|
@ -987,6 +1079,36 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Ensure back/forward navigation (bfcache) shows a clean page
|
||||
window.addEventListener("pageshow", () => {
|
||||
const loadingScreen = document.getElementById("loadingScreen");
|
||||
if (loadingScreen) {
|
||||
loadingScreen.style.display = "none";
|
||||
loadingScreen.style.opacity = "0";
|
||||
}
|
||||
const ct = document.getElementById("pageCurtainTop");
|
||||
const cb = document.getElementById("pageCurtainBottom");
|
||||
if (ct) ct.style.transform = "translateY(-100%)";
|
||||
if (cb) cb.style.transform = "translateY(100%)";
|
||||
|
||||
// Close nav if it was left open and reset grid icon
|
||||
const navMenuEl = document.getElementById("navMenu");
|
||||
const menuGridEl = document.getElementById("menuGrid");
|
||||
if (navMenuEl) navMenuEl.classList.add("hidden");
|
||||
if (menuGridEl) {
|
||||
menuGridEl.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>
|
||||
<span class="w-1 h-1 bg-white"></span>`;
|
||||
}
|
||||
});
|
||||
|
||||
// Menu grid animation sequence
|
||||
function startMenuGridAnimation() {
|
||||
const menuGrid = document.getElementById("menuGrid");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue