|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Arkep | Creative Solutions</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
color: #1a1a1a; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.section-divider { |
|
|
height: 1px; |
|
|
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-white"> |
|
|
|
|
|
<nav class="py-6 px-4 md:px-8 lg:px-12"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<div class="text-2xl font-bold"> |
|
|
<span class="gradient-text">ARKEP</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#services" class="text-gray-600 hover:text-gray-900 transition">Services</a> |
|
|
<a href="#approach" class="text-gray-600 hover:text-gray-900 transition">Approach</a> |
|
|
<a href="#testimonials" class="text-gray-600 hover:text-gray-900 transition">Testimonials</a> |
|
|
<a href="#contact" class="text-gray-600 hover:text-gray-900 transition">Contact</a> |
|
|
</div> |
|
|
<button class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 md:px-8 lg:px-12"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-light leading-tight mb-6"> |
|
|
Transforming <span class="gradient-text">Ideas</span> into<br>Innovative Solutions |
|
|
</h1> |
|
|
<p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto"> |
|
|
We help visionary thinkers turn their concepts into reality through creativity and cutting-edge technology. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="bg-gray-900 hover:bg-gray-800 text-white px-8 py-3 rounded-full font-medium transition"> |
|
|
Get Started |
|
|
</button> |
|
|
<button class="border border-gray-300 hover:border-gray-400 text-gray-800 px-8 py-3 rounded-full font-medium transition"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<div class="section-divider my-12"></div> |
|
|
|
|
|
|
|
|
<section class="py-16 px-4 md:px-8 lg:px-12"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-3xl font-light text-center mb-16"> |
|
|
Why <span class="gradient-text">Choose</span> Arkep? |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="text-5xl font-light mb-4 gradient-text">85%</div> |
|
|
<h3 class="text-xl font-medium mb-3">Client Satisfaction</h3> |
|
|
<p class="text-gray-600"> |
|
|
Our clients consistently rate their experience with us as exceptional, with 85% satisfaction across all projects. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="text-5xl font-light mb-4 gradient-text">95%</div> |
|
|
<h3 class="text-xl font-medium mb-3">On-Time Delivery</h3> |
|
|
<p class="text-gray-600"> |
|
|
We meet deadlines with precision - 95% of our projects are delivered on time without compromising quality. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="text-5xl font-light mb-4 gradient-text">90%</div> |
|
|
<h3 class="text-xl font-medium mb-3">Return Clients</h3> |
|
|
<p class="text-gray-600"> |
|
|
The majority of our clients return for additional projects, a testament to our lasting partnerships. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<div class="section-divider my-12"></div> |
|
|
|
|
|
|
|
|
<section id="approach" class="py-16 px-4 md:px-8 lg:px-12"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h2 class="text-3xl font-light mb-6"> |
|
|
How We Can <span class="gradient-text">Help</span> You |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
At Arkep, we're dedicated to your success. Our tailored solutions fit your unique needs, helping you explore opportunities, spark creativity, and drive meaningful growth. |
|
|
</p> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start gap-4"> |
|
|
<div class="mt-1 text-blue-500"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Customized Solutions</h3> |
|
|
<p class="text-gray-600">Approaches designed specifically for your challenges</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start gap-4"> |
|
|
<div class="mt-1 text-blue-500"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Expert Guidance</h3> |
|
|
<p class="text-gray-600">Seasoned professionals to navigate complex problems</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start gap-4"> |
|
|
<div class="mt-1 text-blue-500"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Sustainable Results</h3> |
|
|
<p class="text-gray-600">Solutions that deliver lasting impact</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2 bg-gray-50 rounded-xl p-8"> |
|
|
<h3 class="text-xl font-medium mb-4">Our Process</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex gap-4"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center">1</div> |
|
|
<div class="w-0.5 h-12 bg-gray-200"></div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Discovery</h4> |
|
|
<p class="text-gray-600">Deep dive into your needs and objectives</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center">2</div> |
|
|
<div class="w-0.5 h-12 bg-gray-200"></div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Strategy</h4> |
|
|
<p class="text-gray-600">Developing the optimal approach</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center">3</div> |
|
|
<div class="w-0.5 h-12 bg-gray-200"></div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Execution</h4> |
|
|
<p class="text-gray-600">Implementing with precision and care</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex gap-4"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center">4</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Iteration</h4> |
|
|
<p class="text-gray-600">Refining based on feedback and results</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<div class="section-divider my-12"></div> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 px-4 md:px-8 lg:px-12"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-3xl font-light text-center mb-16"> |
|
|
Our <span class="gradient-text">Services</span> |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-code text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium mb-3">Custom Software</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Tailor-made software solutions designed to meet your specific needs and drive your success forward. |
|
|
</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-robot text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium mb-3">AI Integration</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Seamlessly integrate AI tools to enhance your processes and boost efficiency in your business operations. |
|
|
</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-laptop-code text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium mb-3">Digital Platforms</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Engaging digital platforms that connect users and enhance experiences through innovative design. |
|
|
</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="w-12 h-12 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-theater-masks text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium mb-3">Performance Arts</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Captivating performance arts that inspire, entertain, and celebrate cultural diversity. |
|
|
</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="w-12 h-12 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-music text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium mb-3">Music Production</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Bring your musical vision to life with services that capture your unique sound and style. |
|
|
</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl card-hover"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-100 text-green-600 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-chart-line text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-medium mb-3">Consulting Services</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Expert guidance to help you achieve your business and personal goals with confidence. |
|
|
</p> |
|
|
<a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center"> |
|
|
Learn more <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<div class="section-divider my-12"></div> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-16 px-4 md:px-8 lg:px-12 bg-gray-50"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<h2 class="text-3xl font-light text-center mb-16"> |
|
|
What Our <span class="gradient-text">Clients</span> Say |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex mb-4 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
"Arkep transformed our vision into reality! Their innovative approach made all the difference for our project." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-gray-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Jordan Smith</h4> |
|
|
<p class="text-sm text-gray-500">CEO, TechCorp</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex mb-4 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
"The team at Arkep exceeded our expectations! Their support and creativity were invaluable to our success." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-gray-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Emily Johnson</h4> |
|
|
<p class="text-sm text-gray-500">Marketing Director</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-sm card-hover"> |
|
|
<div class="flex mb-4 text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
"Working with Arkep was a game-changer! Their insights and solutions helped us grow beyond our goals." |
|
|
</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user text-gray-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Michael Lee</h4> |
|
|
<p class="text-sm text-gray-500">Founder, StartupX</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<div class="section-divider my-12"></div> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 md:px-8 lg:px-12 bg-gradient-to-r from-blue-500 to-purple-600 text-white"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-light mb-6"> |
|
|
Ready to Transform Your Ideas into Reality? |
|
|
</h2> |
|
|
<p class="text-xl mb-8 opacity-90"> |
|
|
Let's create something amazing together. Get started with Arkep today. |
|
|
</p> |
|
|
<button class="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 rounded-full font-medium transition shadow-lg"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 px-4 md:px-8 lg:px-12"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
<h2 class="text-3xl font-light text-center mb-16"> |
|
|
Get in <span class="gradient-text">Touch</span> |
|
|
</h2> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-8"> |
|
|
<form> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
|
|
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-gray-900 hover:bg-gray-800 text-white px-8 py-3 rounded-full font-medium transition w-full md:w-auto"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12 px-4 md:px-8 lg:px-12"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 gradient-text">ARKEP</h3> |
|
|
<p class="text-gray-400"> |
|
|
Transforming ideas into innovative solutions through creativity and technology. |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-medium mb-4">Services</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Custom Software</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">AI Integration</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Digital Platforms</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-medium mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Our Approach</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-medium mb-4">Connect</h4> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-github text-xl"></i></a> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
[email protected]<br> |
|
|
+1 (555) 123-4567 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 Arkep. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScroll = function() { |
|
|
const elements = document.querySelectorAll('.card-hover'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementPosition = element.getBoundingClientRect().top; |
|
|
const screenPosition = window.innerHeight / 1.3; |
|
|
|
|
|
if (elementPosition < screenPosition) { |
|
|
element.style.opacity = '1'; |
|
|
element.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.card-hover').forEach(el => { |
|
|
el.style.opacity = '0'; |
|
|
el.style.transform = 'translateY(20px)'; |
|
|
el.style.transition = 'all 0.6s ease'; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('load', animateOnScroll); |
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=XXXMARK/arkep" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
