mirror of
https://git.kh3group.com/georgebiri/kh3_website.git
synced 2026-10-16 18:41:46 +00:00
feat: complete projects page
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
2595c7571e
commit
ddc015cffb
11 changed files with 3473 additions and 564 deletions
516
contact.html
516
contact.html
|
|
@ -39,19 +39,397 @@
|
|||
<!-- Navigation items in inverted C shape -->
|
||||
<div class="space-y-6">
|
||||
<!-- HOME - Top -->
|
||||
<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>
|
||||
<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;
|
||||
"
|
||||
data-trans="crossfade"
|
||||
>
|
||||
<span class="md:hidden">HOME</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.05s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>H</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.075s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>M</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.125s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- ABOUT US - Slightly right -->
|
||||
<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>
|
||||
<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;
|
||||
"
|
||||
data-trans="crossfade"
|
||||
>
|
||||
<span class="md:hidden">ABOUT US</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.225s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>B</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.25s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.275s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>U</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.325s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
> </span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.35s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>U</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.375s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- SERVICES - More right -->
|
||||
<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>
|
||||
<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;
|
||||
"
|
||||
data-trans="crossfade"
|
||||
>
|
||||
<span class="md:hidden">SERVICES</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.35s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.375s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.4s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.425s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>V</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.45s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>I</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.475s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.525s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- PROJECTS - Most right -->
|
||||
<a href="projects.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.55s; animation-fill-mode: forwards; animation-duration: 0.3s;">PROJECTS</a>
|
||||
<a
|
||||
href="projects.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.55s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
data-trans="crossfade"
|
||||
>
|
||||
<span class="md:hidden">PROJECTS</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.55s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>P</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.575s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>R</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.6s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.625s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>J</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.65s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>E</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.675s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.7s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.725s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
<!-- CONTACTS - More right -->
|
||||
<a href="contact.html" class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left" style="animation-delay: 0.75s; animation-fill-mode: forwards; animation-duration: 0.3s;">CONTACTS</a>
|
||||
<a
|
||||
href="contact.html"
|
||||
class="block text-white text-xl md:text-lg font-medium border-b border-white pb-1 ml-0 md:ml-12 font-montserrat opacity-0 animate-fade-in-left"
|
||||
style="
|
||||
animation-delay: 0.75s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
"
|
||||
>
|
||||
<span class="md:hidden">CONTACTS</span>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.75s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.775s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>O</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.8s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>N</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.825s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.85s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>A</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.875s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>C</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.9s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>T</span
|
||||
>
|
||||
<span
|
||||
class="hidden md:inline"
|
||||
style="
|
||||
animation-delay: 0.925s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.15s;
|
||||
"
|
||||
>S</span
|
||||
>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -92,7 +470,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative h-screen flex items-center justify-center">
|
||||
<section class="relative h-screen flex items-center justify-center hero-section">
|
||||
<!-- Background Image -->
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
|
|
@ -125,7 +503,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="relative min-h-screen flex items-center">
|
||||
<section class="relative min-h-screen flex items-center contact-form-section">
|
||||
<!-- Background Image with Overlay -->
|
||||
<div class="absolute inset-0">
|
||||
<img
|
||||
|
|
@ -337,7 +715,7 @@
|
|||
</section>
|
||||
|
||||
<!-- Map Section -->
|
||||
<section class="py-20 bg-kh3-black text-white">
|
||||
<section class="py-20 bg-kh3-black text-white map-section">
|
||||
<div class="container mx-auto px-8 max-w-6xl">
|
||||
<h2
|
||||
class="text-4xl font-bold text-center mb-16 opacity-0"
|
||||
|
|
@ -543,6 +921,36 @@
|
|||
.masked-reveal {
|
||||
clip-path: inset(0 100% 0 0);
|
||||
}
|
||||
|
||||
/* Request quote button hover effect */
|
||||
.bg-kh3-red:hover {
|
||||
box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
|
||||
}
|
||||
|
||||
/* Page transition animations */
|
||||
@keyframes staggerFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
/* Section classes for targeting */
|
||||
.hero-section {
|
||||
/* This class will be added to the hero section for targeting */
|
||||
}
|
||||
|
||||
.contact-form-section {
|
||||
/* This class will be added to the contact form section for targeting */
|
||||
}
|
||||
|
||||
.map-section {
|
||||
/* This class will be added to the map section for targeting */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -559,17 +967,6 @@
|
|||
if (isMenuOpen) {
|
||||
// Close menu
|
||||
navMenu.classList.add("hidden");
|
||||
menuGrid.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>
|
||||
`;
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
|
|
@ -578,6 +975,19 @@
|
|||
} else {
|
||||
// Open menu
|
||||
navMenu.classList.remove("hidden");
|
||||
// Keep the grid icon as is, don't transform to X
|
||||
menuGrid.innerHTML = `
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
<span class="w-1 h-1 bg-white rounded-full"></span>
|
||||
`;
|
||||
|
||||
// Place red X close button at the bottom of the menu panel
|
||||
closeBtnEl = document.createElement("button");
|
||||
closeBtnEl.setAttribute("aria-label", "Close navigation");
|
||||
|
|
@ -595,22 +1005,23 @@
|
|||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
}
|
||||
menuGrid.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>
|
||||
`;
|
||||
isMenuOpen = false;
|
||||
});
|
||||
isMenuOpen = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!menuToggle.contains(e.target) && !navMenu.contains(e.target)) {
|
||||
navMenu.classList.add("hidden");
|
||||
if (closeBtnEl) {
|
||||
closeBtnEl.remove();
|
||||
closeBtnEl = null;
|
||||
}
|
||||
isMenuOpen = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Form submission
|
||||
|
|
@ -687,6 +1098,51 @@
|
|||
requestAnimationFrame(animation);
|
||||
}
|
||||
}, 2500);
|
||||
|
||||
// Page transition functionality
|
||||
function handlePageTransition(e) {
|
||||
e.preventDefault();
|
||||
const targetUrl = e.currentTarget.href;
|
||||
const transitionType = e.currentTarget.getAttribute('data-trans') || 'crossfade';
|
||||
|
||||
// Get all elements to animate out
|
||||
const elementsToAnimate = [
|
||||
document.querySelector('.hero-section'),
|
||||
document.querySelector('.contact-form-section'),
|
||||
document.querySelector('.map-section'),
|
||||
document.querySelector('main')
|
||||
].filter(el => el);
|
||||
|
||||
// Animate elements out in order
|
||||
elementsToAnimate.forEach((element, index) => {
|
||||
setTimeout(() => {
|
||||
if (element) {
|
||||
element.style.animation = 'staggerFadeOut 0.6s ease-in-out forwards';
|
||||
}
|
||||
}, index * 100);
|
||||
});
|
||||
|
||||
// Navigate after animations complete
|
||||
setTimeout(() => {
|
||||
window.location.href = targetUrl;
|
||||
}, elementsToAnimate.length * 100 + 600);
|
||||
}
|
||||
|
||||
// Add event listeners for page transitions
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const transitionLinks = document.querySelectorAll('[data-trans]');
|
||||
transitionLinks.forEach(link => {
|
||||
link.addEventListener('click', handlePageTransition);
|
||||
});
|
||||
});
|
||||
|
||||
// Handle back/forward navigation
|
||||
window.addEventListener('pageshow', function(event) {
|
||||
if (event.persisted) {
|
||||
// Page was loaded from cache (back/forward)
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
// Ensure clean state on back/forward cache restores
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue