fix: correct mobile layout
This commit is contained in:
parent
bc95267aa4
commit
2fc620570b
6 changed files with 576 additions and 1811 deletions
547
projects.html
547
projects.html
|
|
@ -16,7 +16,7 @@
|
|||
<!-- Navigation Menu -->
|
||||
<div
|
||||
id="navMenu"
|
||||
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"
|
||||
>
|
||||
<div class="p-8 flex flex-col h-full">
|
||||
<!-- Logo -->
|
||||
|
|
@ -31,468 +31,105 @@
|
|||
<div class="relative ml-8">
|
||||
<!-- Navigation items in inverted C shape -->
|
||||
<div class="space-y-6">
|
||||
<!-- HOME -->
|
||||
<a
|
||||
href="index.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.05s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>H</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.075s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>M</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.125s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="index.html"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.05s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>HOME</a
|
||||
>
|
||||
|
||||
<!-- ABOUT US -->
|
||||
<a
|
||||
href="about.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-6 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.15s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.175s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>B</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.225s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>U</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.25s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.275s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
> </span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>U</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.325s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
<!-- ABOUT US -->
|
||||
<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 opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>ABOUT US</a
|
||||
>
|
||||
|
||||
<!-- SERVICES -->
|
||||
<a
|
||||
href="services.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-12 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.35s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.375s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.4s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.425s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>V</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.45s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>I</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.475s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.525s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
<!-- SERVICES -->
|
||||
<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 opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.35s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>SERVICES</a
|
||||
>
|
||||
|
||||
<!-- PROJECTS - Active -->
|
||||
<a
|
||||
href="projects.html"
|
||||
class="block text-white text-lg font-medium border-b border-white pb-1 ml-20 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.55s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>P</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.575s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.6s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.625s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>J</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.65s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.675s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.7s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.725s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
<!-- PROJECTS - Active -->
|
||||
<a
|
||||
href="projects.html"
|
||||
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-20 font-montserrat opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.55s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>PROJECTS</a
|
||||
>
|
||||
|
||||
<!-- CONTACTS -->
|
||||
<a
|
||||
href="contact.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.75s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.775s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.8s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>N</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.825s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.85s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.875s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.9s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.925s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
<!-- CONTACTS -->
|
||||
<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-20 font-montserrat opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.75s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>CONTACTS</a
|
||||
>
|
||||
|
||||
<!-- PARTNERS -->
|
||||
<a
|
||||
href="partners.html"
|
||||
class="block text-white text-lg font-medium hover:text-kh3-red transition-colors ml-20 font-montserrat"
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.95s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>P</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.975s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.025s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.05s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>N</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.075s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="inline-block opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 1.125s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Menu Grid -->
|
||||
<div
|
||||
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
|
||||
style="animation-delay: 0.4s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div
|
||||
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
|
||||
id="menuGrid"
|
||||
>
|
||||
<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>
|
||||
<!-- PARTNERS -->
|
||||
<a
|
||||
href="partners.html"
|
||||
class="block text-white text-xl md:text-lg font-medium hover:text-kh3-red transition-colors ml-0 font-montserrat opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.95s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>PARTNERS</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menu Grid -->
|
||||
<div
|
||||
class="fixed bottom-12 left-12 z-50 opacity-0 animate-fade-in-left"
|
||||
style="animation-delay: 0.4s; animation-fill-mode: forwards"
|
||||
>
|
||||
<div class="cursor-pointer" id="menuToggle">
|
||||
<div
|
||||
class="grid grid-cols-3 gap-1 w-6 h-6 animate-logo-float"
|
||||
id="menuGrid"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="pt-20">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue