georgebiri/kh3_website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: standardize indentation and improve layout consistency across multiple HTML files

Browse source
This commit is contained in:
George Birikorang 2025-08-31 23:58:25 -04:00
parent 9111542693
commit 4dc84a9e11
7 changed files with 79 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/kh3_logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 186 KiB

Before After
Before After

BIN
assets/images/kh3_logo1.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Before After
Before After

33
index.html
View file

@ -44,8 +44,8 @@
<!-- Navigation items in inverted C shape -->
<div class="space-y-6">
<!-- HOME - Top -->
<a
href="index.html"
<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 opacity-0 animate-fade-in-left"
style="
animation-delay: 0.05s;
@ -93,8 +93,8 @@
</a>
<!-- WHY - Slightly right -->
<a
href="about.html"
<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;
@ -134,8 +134,8 @@
</a>
<!-- HOW - More right -->
<a
href="services.html"
<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;
@ -266,8 +266,8 @@
</a>
<!-- CONTACTS - More right -->
<a
href="contact.html"
<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 opacity-0 animate-fade-in-left"
style="
animation-delay: 0.75s;
@ -372,8 +372,7 @@
class="flex items-center gap-3 animate-logo-float hover:opacity-80 transition-opacity"
>
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-16 h-16" />
<span
class="hidden sm:inline text-white text-2xl font-bold tracking-wider"
<span class="text-white text-2xl font-bold tracking-wider"
>KH3</span
>
</a>
@ -455,7 +454,7 @@
>DESIGN</span
>
</div>
</div>
</div>
<!-- DELIVER -->
<div class="flex items-center gap-6">
@ -529,7 +528,7 @@
WHO
</a>
<div class="w-6 md:w-8 h-px bg-kh3-red"></div>
</div>
</div>
<!-- Mobile CTA bar: About & Contacts (centered) -->
<div
@ -537,14 +536,14 @@
style="animation: fadeInUp 0.8s ease-out 1.2s forwards"
>
<div class="flex items-center gap-4">
<a
href="about.html"
<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"
>Why</a
>
<a
href="contact.html"
<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
@ -552,7 +551,7 @@
</div>
</div>
</section>
</div>
</div>
<!-- Custom Cursor -->
<div

25
projects.html
View file

@ -392,15 +392,15 @@
<!-- Main Content -->
<main class="pt-20">
<!-- Hero Section -->
<!-- Hero Section (Left panel + vertical line + diamond markers, title with horizontal rule) -->
<section class="relative bg-kh3-black hero-section">
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
<!-- Left dark panel -->
<div class="relative bg-kh3-black flex items-center justify-center">
<div class="relative bg-kh3-black flex items-center">
<!-- Vertical timeline with diamonds -->
<div
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
style="animation-delay: 1200ms; animation-fill-mode: forwards"
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
style="animation: fadeInUp 800ms ease-out 1200ms forwards"
>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
@ -412,10 +412,10 @@
</div>
<!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
<div class="pl-28 pr-6 w-full">
<div
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
style="animation-delay: 1600ms; animation-fill-mode: forwards"
class="flex items-center gap-6 opacity-0"
style="animation: fadeInUp 800ms ease-out 1600ms forwards"
>
<div class="flex-1 h-px bg-white"></div>
<h1
@ -429,13 +429,12 @@
</div>
<!-- Right image panel -->
<div class="relative overflow-hidden pt-20 z-10">
<!-- Current image -->
<div class="relative overflow-hidden">
<img
id="projectsCurrentImg"
src="assets/images/room.png"
alt="KH3 Projects"
class="w-full h-full object-cover opacity-0 absolute inset-0"
class="w-full h-full object-cover opacity-0"
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
/>
<!-- Next image (for transitions) -->
@ -448,8 +447,8 @@
<!-- Down arrow prompt -->
<button
id="projectsScrollArrow"
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0 animate-fade-in-up"
style="animation-delay: 1900ms; animation-fill-mode: forwards"
class="flex absolute bottom-10 left-6 items-center flex-col text-white/80 hover:text-white transition-colors opacity-0"
style="animation: fadeInUp 800ms ease-out 1900ms forwards"
>
<span class="text-xs tracking-widest mb-2">SCROLL</span>
<svg
@ -482,7 +481,7 @@
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300 active"
data-category="all"
>
ALL WHAT
ALL PROJECTS
</button>
<button
class="category-filter px-6 py-3 text-white border border-white/30 rounded-full hover:bg-white hover:text-kh3-black transition-all duration-300"

16
services.html
View file

@ -544,11 +544,11 @@
<section class="relative bg-kh3-black hero-section">
<div class="grid grid-cols-1 md:grid-cols-2 min-h-[90vh]">
<!-- Left dark panel -->
<div class="relative bg-kh3-black flex items-center justify-center">
<div class="relative bg-kh3-black flex items-center">
<!-- Vertical timeline with diamonds -->
<div
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0 animate-fade-in-up"
style="animation-delay: 1200ms; animation-fill-mode: forwards;"
class="absolute left-12 top-8 bottom-16 flex flex-col items-center opacity-0"
style="animation: fadeInUp 800ms ease-out 1200ms forwards"
>
<div class="w-px flex-1 bg-neutral-800"></div>
<div class="w-2.5 h-2.5 bg-white transform rotate-45"></div>
@ -560,10 +560,10 @@
</div>
<!-- Title with horizontal ruler -->
<div class="pl-28 pr-6 w-full relative overflow-visible z-30">
<div class="pl-28 pr-6 w-full">
<div
class="flex items-center gap-6 opacity-0 animate-fade-in-up"
style="animation-delay: 1600ms; animation-fill-mode: forwards;"
class="flex items-center gap-6 opacity-0"
style="animation: fadeInUp 800ms ease-out 1600ms forwards"
>
<div class="flex-1 h-px bg-white"></div>
<h1
@ -577,13 +577,13 @@
</div>
<!-- Right image panel -->
<div class="relative overflow-hidden pt-32 z-10">
<div class="relative overflow-hidden">
<!-- Current image -->
<img
id="servicesCurrentImg"
src="assets/images/room.png"
alt="KH3 Services"
class="w-full h-full object-cover opacity-0 absolute inset-0"
class="w-full h-full object-cover opacity-0"
style="animation: diagMaskReveal 1500ms ease-out 300ms forwards"
/>
<!-- Next image (for transitions) -->

42
styles/output.css
View file

@ -1428,6 +1428,10 @@ video {
gap: 2rem;
}
.gap-2 {
gap: 0.5rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@ -1689,6 +1693,11 @@ video {
background-color: transparent;
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-opacity-20 {
--tw-bg-opacity: 0.2;
}
@ -1983,6 +1992,10 @@ video {
padding-right: 2rem;
}
.pl-8 {
padding-left: 2rem;
}
.text-center {
text-align: center;
}
@ -2531,6 +2544,10 @@ video {
top: 7rem;
}
.md\:left-12 {
left: 3rem;
}
.md\:ml-12 {
margin-left: 3rem;
}
@ -2575,6 +2592,14 @@ video {
width: 2rem;
}
.md\:w-16 {
width: 4rem;
}
.md\:flex-1 {
flex: 1 1 0%;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -2595,6 +2620,14 @@ video {
align-items: center;
}
.md\:justify-center {
justify-content: center;
}
.md\:gap-6 {
gap: 1.5rem;
}
.md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
@ -2635,6 +2668,10 @@ video {
padding-top: 2rem;
}
.md\:pl-28 {
padding-left: 7rem;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -2726,6 +2763,11 @@ video {
.lg\:gap-24 {
gap: 6rem;
}
.lg\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
}
@media (min-width: 1280px) {

2
who.html
View file

@ -492,7 +492,7 @@
</div>
<!-- Team Members Grid -->
<div class="mt-20" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;">
<div class="mt-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-6">
<!-- Team Member 1 -->
<div class="group relative team-card" data-card-index="0">
<div