kh3_website/contact.html

944 lines
35 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" />
<title>Contact Us - KH3 | Building Inspiring Spaces</title>
<meta
name="description"
content="Get in touch with KH3 for your construction and project management needs. Contact us today for a consultation."
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
</head>
<body
class="bg-kh3-black text-white font-montserrat overflow-x-hidden"
style="animation: pageEnter 0.8s ease-out both"
>
<!-- Navigation Menu -->
<div
class="fixed left-0 top-0 h-full w-1/3 bg-kh3-black z-50 hidden shadow-2xl"
id="navMenu"
>
<div class="p-8 pt-12 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" />
<span class="text-white text-2xl font-bold tracking-wider">KH3</span>
</div>
<!-- Navigation Links - Inverted C Layout -->
<nav class="flex-1 relative">
<div class="absolute inset-0 flex items-start">
<div class="relative ml-8">
<!-- 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 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>
<!-- 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"
>
<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;
"
>&nbsp;</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>
<!-- 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"
>
<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>
<!-- 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"
>
<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>
<!-- CONTACTS - More right -->
<a
href="contact.html"
class="block text-white text-lg font-medium border-b border-white pb-1 ml-12 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>
<!-- PARTNERS - Back to left -->
<a
href="brands.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.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>
</div>
</div>
</nav>
</div>
</div>
<!-- Header -->
<header
class="fixed top-0 left-0 right-0 z-40 bg-kh3-black/80 backdrop-blur-sm"
>
<div class="container mx-auto px-8">
<div class="flex justify-between items-center py-6">
<div class="flex items-center gap-3">
<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>
<div class="cursor-pointer" id="menuToggle">
<div class="grid grid-cols-3 gap-1 w-6 h-6" id="menuGrid">
<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>
</div>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center">
<div
class="absolute inset-0 bg-gradient-to-br from-kh3-black/80 to-kh3-black/60"
></div>
<div class="relative z-10 text-center">
<h1 class="text-6xl md:text-8xl font-bold mb-6 masked-reveal">
CONTACT US
</h1>
<div class="text-xl md:text-2xl text-neutral-300 tracking-widest">
LET'S DISCUSS YOUR PROJECT
</div>
</div>
<div
class="absolute inset-0 bg-gradient-to-b from-transparent to-kh3-black"
></div>
</section>
<!-- Contact Section -->
<section class="py-20 bg-white text-kh3-black">
<div class="container mx-auto px-8 max-w-6xl">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
<div class="space-y-8">
<h2 class="text-4xl font-bold">GET IN TOUCH</h2>
<p class="text-lg leading-relaxed text-neutral-600">
Ready to start your next project? We'd love to hear from you. Fill
out the form and we'll get back to you within 24 hours.
</p>
<div class="space-y-8">
<div class="flex items-start space-x-4">
<div class="text-3xl">📍</div>
<div>
<h3 class="text-xl font-semibold mb-2">Address</h3>
<p class="text-neutral-600">Accra, Ghana<br />Main Office</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="text-3xl">📞</div>
<div>
<h3 class="text-xl font-semibold mb-2">Phone</h3>
<p class="text-neutral-600">
+233 20 123 4567<br />+233 24 123 4567
</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="text-3xl">✉️</div>
<div>
<h3 class="text-xl font-semibold mb-2">Email</h3>
<p class="text-neutral-600">
info@kh3.com<br />projects@kh3.com
</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="text-3xl">🕒</div>
<div>
<h3 class="text-xl font-semibold mb-2">Business Hours</h3>
<p class="text-neutral-600">
Monday - Friday<br />8:00 AM - 6:00 PM
</p>
</div>
</div>
</div>
</div>
<div class="bg-neutral-50 p-8 rounded-lg">
<form class="space-y-6" id="contactForm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="name" class="block text-sm font-semibold mb-2"
>Full Name *</label
>
<input
type="text"
id="name"
name="name"
required
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
/>
</div>
<div>
<label for="email" class="block text-sm font-semibold mb-2"
>Email Address *</label
>
<input
type="email"
id="email"
name="email"
required
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
/>
</div>
<div>
<label for="phone" class="block text-sm font-semibold mb-2"
>Phone Number</label
>
<input
type="tel"
id="phone"
name="phone"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
/>
</div>
<div>
<label for="company" class="block text-sm font-semibold mb-2"
>Company</label
>
<input
type="text"
id="company"
name="company"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
/>
</div>
<div>
<label for="service" class="block text-sm font-semibold mb-2"
>Service Interest</label
>
<select
id="service"
name="service"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
>
<option value="">Select a service</option>
<option value="design">Interior Design</option>
<option value="build">Construction & Build</option>
<option value="furnish">Furnishing</option>
<option value="full-service">
Full Service (Design + Build + Furnish)
</option>
</select>
</div>
<div>
<label for="budget" class="block text-sm font-semibold mb-2"
>Project Budget</label
>
<select
id="budget"
name="budget"
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent"
>
<option value="">Select budget range</option>
<option value="under-100k">Under 100K GHS</option>
<option value="100k-500k">100K - 500K GHS</option>
<option value="500k-1m">500K - 1M GHS</option>
<option value="over-1m">Over 1M GHS</option>
</select>
</div>
</div>
<div>
<label for="message" class="block text-sm font-semibold mb-2"
>Project Details *</label
>
<textarea
id="message"
name="message"
rows="6"
required
placeholder="Tell us about your project, requirements, timeline, and any specific needs..."
class="w-full px-4 py-3 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-kh3-red focus:border-transparent resize-none"
></textarea>
</div>
<button
type="submit"
class="w-full bg-kh3-red text-white py-4 px-8 rounded-md hover:bg-kh3-red/90 transition-colors duration-300 flex items-center justify-center space-x-2"
>
<span>Send Message</span>
<span>→</span>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<section class="py-20 bg-kh3-black text-white">
<div class="container mx-auto px-8 max-w-6xl">
<h2 class="text-4xl font-bold text-center mb-16">FIND US</h2>
<div class="bg-neutral-800 rounded-lg p-12 text-center">
<div class="max-w-5xl mx-auto">
<h3 class="text-2xl font-bold mb-4">Accra, Ghana</h3>
<p class="text-neutral-300 leading-relaxed mb-6">
Our main office is located in the heart of Accra, easily
accessible from all major areas.
</p>
<div class="text-kh3-red font-semibold">
<span>📍 5.5600° N, 0.2057° W</span>
</div>
<!-- Embedded Map -->
<div
class="mt-10 w-full overflow-hidden rounded-lg"
style="aspect-ratio: 4 / 3"
>
<iframe
title="KH3 Office Location Map"
width="100%"
height="100%"
style="border: 0; filter: grayscale(20%) contrast(110%)"
loading="lazy"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps?q=29%20Labone%20Crescent%2C%20Accra%2C%20Ghana&z=18&output=embed"
>
</iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-kh3-black text-white py-16">
<div class="container mx-auto px-8 max-w-6xl">
<div
class="flex flex-col md:flex-row justify-between items-center space-y-6 md:space-y-0"
>
<div class="flex items-center gap-3">
<img src="assets/images/kh3_logo.png" alt="KH3" class="w-12 h-12" />
<span class="text-2xl font-bold tracking-wider">KH3</span>
</div>
<div class="flex space-x-8">
<a
href="contact.html"
class="text-neutral-300 hover:text-white transition-colors"
>Contact</a
>
<a
href="privacy.html"
class="text-neutral-300 hover:text-white transition-colors"
>Privacy Policy</a
>
<a
href="terms.html"
class="text-neutral-300 hover:text-white transition-colors"
>Terms of Service</a
>
</div>
<div class="text-neutral-400">© 2024 KH3. All rights reserved.</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
<style>
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes maskReveal {
0% {
clip-path: inset(0 100% 0 0);
opacity: 0.001;
}
20% {
opacity: 1;
}
100% {
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
.masked-reveal {
clip-path: inset(0 100% 0 0);
}
</style>
<script>
// Menu toggle functionality
const menuToggle = document.getElementById("menuToggle");
const navMenu = document.getElementById("navMenu");
const menuGrid = document.getElementById("menuGrid");
if (menuToggle && navMenu && menuGrid) {
let isMenuOpen = false;
let closeBtnEl = null;
menuToggle.addEventListener("click", () => {
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;
}
isMenuOpen = false;
} else {
// Open menu
navMenu.classList.remove("hidden");
// Place red X close button at the bottom of the menu panel
closeBtnEl = document.createElement("button");
closeBtnEl.setAttribute("aria-label", "Close navigation");
closeBtnEl.className =
"absolute bottom-12 left-6 text-kh3-red hover:text-white transition-colors";
closeBtnEl.innerHTML = `
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
`;
navMenu.appendChild(closeBtnEl);
closeBtnEl.addEventListener("click", () => {
navMenu.classList.add("hidden");
if (closeBtnEl) {
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;
}
});
}
// Form submission
const contactForm = document.getElementById("contactForm");
if (contactForm) {
contactForm.addEventListener("submit", (e) => {
e.preventDefault();
// Add your form submission logic here
alert(
"Thank you for your message! We'll get back to you within 24 hours."
);
contactForm.reset();
});
}
// Staggered entrance for hero and sections
window.addEventListener("load", () => {
const heroTitle = document.querySelector(
"section.relative h1.masked-reveal"
);
const heroSub = document.querySelector("section.relative div.text-xl");
if (heroTitle) {
heroTitle.style.animation =
"maskReveal 900ms ease-out 150ms forwards";
}
if (heroSub) {
heroSub.style.opacity = "0";
heroSub.style.animation = "fadeUp 700ms ease-out 320ms forwards";
}
const contactSection = document.querySelector("section.py-20.bg-white");
if (contactSection) {
contactSection.style.opacity = "0";
contactSection.style.animation =
"fadeUp 800ms ease-out 600ms forwards";
}
const mapSection = document.querySelector("section.py-20.bg-kh3-black");
if (mapSection) {
mapSection.style.opacity = "0";
mapSection.style.animation = "fadeUp 800ms ease-out 850ms forwards";
}
});
// Auto-scroll to contact section after 2 seconds with custom smooth animation
setTimeout(() => {
const contactSection = document.querySelector("section:nth-of-type(2)"); // Contact Section
if (contactSection) {
const targetPosition = contactSection.offsetTop;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
const duration = 2000; // 2 seconds for the scroll animation
let start = null;
function animation(currentTime) {
if (start === null) start = currentTime;
const timeElapsed = currentTime - start;
const run = easeInOutCubic(
timeElapsed,
startPosition,
distance,
duration
);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
// Easing function for smooth animation
function easeInOutCubic(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t * t + b;
t -= 2;
return (c / 2) * (t * t * t + 2) + b;
}
requestAnimationFrame(animation);
}
}, 2000);
</script>
</body>
</html>