alvin/challenge-11
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/challenge-11.git synced 2026-03-06 11:06:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Revamp index.html, styles.css, and script.js for Tuning Pro website. Update branding to Dutch language, enhance navbar and sections with new color schemes, and improve button functionalities. Implement dynamic content in modals and refine form handling for better user experience.

Browse Source
This commit is contained in:
Alvin
2025-06-04 11:22:41 +02:00
parent f734a41678
commit d904d7beae
3 changed files with 255 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
css/styles.css
View File

@@ -323,18 +323,18 @@ body {
/* Navbar Styles */ /* Navbar Styles */
.glass-nav { .glass-nav {
background: rgba(139, 92, 246, 0.1); background: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
.glass-nav:hover { .glass-nav:hover {
background: rgba(139, 92, 246, 0.15); background: rgba(17, 24, 39, 0.9);
} }
.navbar-brand img { .navbar-brand img {
filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5)); filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
} }
.nav-link { .nav-link {
@@ -354,7 +354,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: linear-gradient(to right, #8B5CF6, #EC4899); background: linear-gradient(to right, #ef4444, #f97316);
transform: scaleX(1); transform: scaleX(1);
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
@@ -366,7 +366,7 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: linear-gradient(to right, #8B5CF6, #EC4899); background: linear-gradient(to right, #ef4444, #f97316);
transform: scaleX(0); transform: scaleX(0);
transition: transform 0.3s ease; transition: transform 0.3s ease;
transform-origin: right; transform-origin: right;
@@ -397,14 +397,82 @@ body {
} }
.navbar.scrolled { .navbar.scrolled {
background: rgba(139, 92, 246, 0.95); background: rgba(17, 24, 39, 0.95);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Modal Styles */
.modal-content {
background: #1f2937;
border: 1px solid #ef4444;
}
.modal-header {
border-bottom: 1px solid #374151;
}
.modal-footer {
border-top: 1px solid #374151;
}
/* Form Styles */
.form-control {
background-color: #374151;
border-color: #4b5563;
color: #fff;
}
.form-control:focus {
background-color: #374151;
border-color: #ef4444;
color: #fff;
box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}
/* Button Styles */
.btn-primary {
background: linear-gradient(to right, #ef4444, #f97316);
border: none;
}
.btn-primary:hover {
background: linear-gradient(to right, #dc2626, #ea580c);
}
.btn-outline-secondary {
border-color: #ef4444;
color: #ef4444;
}
.btn-outline-secondary:hover {
background: linear-gradient(to right, #ef4444, #f97316);
border-color: transparent;
color: #fff;
}
/* Search Results */
.search-result-item {
transition: all 0.3s ease;
}
.search-result-item:hover {
transform: translateX(5px);
}
/* Customer Details */
.interaction-item {
transition: all 0.3s ease;
}
.interaction-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
} }
/* Mobile menu styles */ /* Mobile menu styles */
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.navbar-collapse { .navbar-collapse {
background: rgba(139, 92, 246, 0.95); background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem; border-radius: 0.5rem;
@@ -425,3 +493,37 @@ body {
display: none; display: none;
} }
} }
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.3s ease-out;
}
/* Scrollbar Styles */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1f2937;
}
::-webkit-scrollbar-thumb {
background: #ef4444;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #dc2626;
}

205
index.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="nl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Template</title> <title>Auto Tuning Pro</title>
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg"> <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
@@ -15,52 +15,46 @@
<!-- Custom JS --> <!-- Custom JS -->
<script src="js/tailwind.config.js"></script> <script src="js/tailwind.config.js"></script>
</head> </head>
<body class="bg-gradient-to-br from-gray-100 to-blue-50"> <body class="bg-gradient-to-br from-gray-900 to-gray-800">
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top transition-all duration-300 hover:shadow-lg glass-nav"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top transition-all duration-300 hover:shadow-lg glass-nav">
<div class="container"> <div class="container">
<a class="navbar-brand hover:scale-110 transition-transform duration-300 flex items-center" href="#"> <a class="navbar-brand hover:scale-110 transition-transform duration-300 flex items-center" href="#">
<img src="assets/favicon.svg" alt="Logo" class="h-8 w-8 mr-2 animate-spin-slow"> <img src="assets/favicon.svg" alt="Logo" class="h-8 w-8 mr-2 animate-spin-slow">
<span class="bg-gradient-to-r from-purple-400 to-pink-400 text-transparent bg-clip-text font-bold">Your Brand</span> <span class="bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text font-bold">TUNING PRO</span>
</a> </a>
<button class="navbar-toggler border-0 focus:ring-2 focus:ring-purple-500 transition-all duration-300" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler border-0 focus:ring-2 focus:ring-red-500 transition-all duration-300" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active hover:text-pink-300 transition-all duration-300 relative group" href="#home"> <a class="nav-link active hover:text-red-400 transition-all duration-300 relative group" href="#home">
Home Home
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span> <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#about"> <a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#services">
About Diensten
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span> <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#services"> <a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#gallery">
Services Galerij
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span> <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#portfolio"> <a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#contact">
Portfolio
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#contact">
Contact Contact
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span> <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
</a> </a>
</li> </li>
<li class="nav-item ms-3"> <li class="nav-item ms-3">
<button class="btn btn-sm btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"> <button class="btn btn-sm btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
Get Started Afspraak Maken
</button> </button>
</li> </li>
</ul> </ul>
@@ -70,90 +64,100 @@
<!-- Hero Section --> <!-- Hero Section -->
<section id="home" class="py-5 min-h-screen flex items-center relative overflow-hidden"> <section id="home" class="py-5 min-h-screen flex items-center relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-20"></div> <div class="absolute inset-0 bg-gradient-to-br from-red-900 via-gray-900 to-orange-900 opacity-20"></div>
<div class="container relative z-10"> <div class="container relative z-10">
<div class="row"> <div class="row">
<div class="col-md-8 mx-auto text-center"> <div class="col-md-8 mx-auto text-center">
<h1 class="text-5xl font-bold mb-4 animate-float bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Welcome to Your Website</h1> <h1 class="text-6xl font-bold mb-4 animate-float bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">ONTKETEN JE AUTO</h1>
<p class="text-gray-700 mb-8 text-xl animate-pulse-slow">A clean, modern template for your next project</p> <p class="text-gray-300 mb-8 text-xl animate-pulse-slow">Professionele ECU Tuning & Prestatieverbetering</p>
<div class="space-x-4"> <div class="space-x-4">
<button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Get Started</button> <button class="btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">
<button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">Learn More</button> Start Nu
</button>
<button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
Bekijk Galerij
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- About Section -->
<section id="about" class="py-5 bg-gradient-to-br from-white to-blue-50 relative">
<div class="container">
<h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Us</h2>
<div class="row">
<div class="col-md-6 transform hover:scale-105 transition-all duration-300">
<p class="text-gray-700 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-6 transform hover:scale-105 transition-all duration-300">
<p class="text-gray-700 text-lg">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</section>
<!-- Services Section --> <!-- Services Section -->
<section id="services" class="py-5 relative bg-gradient-to-br from-blue-50 to-purple-50"> <section id="services" class="py-5 relative bg-gradient-to-br from-gray-900 to-gray-800">
<div class="container"> <div class="container">
<h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Our Services</h2> <h2 class="text-4xl font-bold text-center mb-12 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Onze Diensten</h2>
<div class="row"> <div class="row">
<div class="col-md-4 mb-4"> <div class="col-md-4 mb-4">
<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500"> <div class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-red-500">
<div class="text-4xl mb-4 animate-bounce-slow">🚀</div> <div class="text-4xl mb-4 animate-bounce-slow">🚀</div>
<h3 class="text-xl font-bold mb-3 text-purple-600">Service 1</h3> <h3 class="text-xl font-bold mb-3 text-red-500">ECU Tuning</h3>
<p class="text-gray-600">Description of your first service goes here.</p> <p class="text-gray-400">Ontgrendel het ware potentieel van je motor met onze professionele ECU-herprogrammering.</p>
<ul class="mt-4 text-gray-400 space-y-2">
<li>• Vermogen & Koppel Verhoging</li>
<li>• Brandstofverbruik Optimalisatie</li>
<li>• Gasrespons Verbetering</li>
</ul>
</div> </div>
</div> </div>
<div class="col-md-4 mb-4"> <div class="col-md-4 mb-4">
<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-pink-500"> <div class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-orange-500">
<div class="text-4xl mb-4 animate-bounce-slow">💡</div>
<h3 class="text-xl font-bold mb-3 text-pink-600">Service 2</h3>
<p class="text-gray-600">Description of your second service goes here.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-indigo-500">
<div class="text-4xl mb-4 animate-bounce-slow">⚡</div> <div class="text-4xl mb-4 animate-bounce-slow">⚡</div>
<h3 class="text-xl font-bold mb-3 text-indigo-600">Service 3</h3> <h3 class="text-xl font-bold mb-3 text-orange-500">Prestatie Onderdelen</h3>
<p class="text-gray-600">Description of your third service goes here.</p> <p class="text-gray-400">Hoogwaardige tuning onderdelen om de prestaties van je voertuig te verbeteren.</p>
<ul class="mt-4 text-gray-400 space-y-2">
<li>• Uitlaatsystemen</li>
<li>• Luchtfilters</li>
<li>• Vering Upgrades</li>
</ul>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-red-500">
<div class="text-4xl mb-4 animate-bounce-slow">🔧</div>
<h3 class="text-xl font-bold mb-3 text-red-500">Maatwerk Oplossingen</h3>
<p class="text-gray-400">Op maat gemaakte aanpassingen die aansluiten bij jouw specifieke wensen.</p>
<ul class="mt-4 text-gray-400 space-y-2">
<li>• Vermogensmeting</li>
<li>• Custom Mapping</li>
<li>• Prestatie Analyse</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Portfolio Section --> <!-- Gallery Section -->
<section id="portfolio" class="py-5 bg-gradient-to-br from-purple-50 to-pink-50 relative"> <section id="gallery" class="py-5 relative bg-gradient-to-br from-gray-800 to-gray-900">
<div class="container"> <div class="container">
<h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Portfolio</h2> <h2 class="text-4xl font-bold text-center mb-12 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Ons Werk</h2>
<div class="row"> <div class="row">
<div class="col-md-4 mb-4"> <div class="col-md-4 mb-4">
<div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl"> <div class="bg-gray-800 rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
<div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div> <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-red-500 via-orange-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
<h3 class="text-xl font-bold mb-2 text-purple-600">Project 1</h3> <div class="p-4">
<p class="text-gray-600">Brief description of your first project.</p> <h3 class="text-xl font-bold mb-2 text-red-500">BMW M3 Stage 2</h3>
<p class="text-gray-400">Complete prestatie upgrade met custom mapping</p>
</div>
</div> </div>
</div> </div>
<div class="col-md-4 mb-4"> <div class="col-md-4 mb-4">
<div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl"> <div class="bg-gray-800 rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
<div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 rounded-lg mb-3 animate-pulse-slow"></div> <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-orange-500 via-red-500 to-orange-500 rounded-lg mb-3 animate-pulse-slow"></div>
<h3 class="text-xl font-bold mb-2 text-indigo-600">Project 2</h3> <div class="p-4">
<p class="text-gray-600">Brief description of your second project.</p> <h3 class="text-xl font-bold mb-2 text-orange-500">Audi RS3 Tuning</h3>
<p class="text-gray-400">ECU herprogrammering en uitlaatsysteem upgrade</p>
</div>
</div> </div>
</div> </div>
<div class="col-md-4 mb-4"> <div class="col-md-4 mb-4">
<div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl"> <div class="bg-gray-800 rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
<div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 rounded-lg mb-3 animate-pulse-slow"></div> <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-red-500 via-orange-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
<h3 class="text-xl font-bold mb-2 text-pink-600">Project 3</h3> <div class="p-4">
<p class="text-gray-600">Brief description of your third project.</p> <h3 class="text-xl font-bold mb-2 text-red-500">Mercedes AMG Pakket</h3>
<p class="text-gray-400">Volledig prestatie verbeteringspakket</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -161,25 +165,29 @@
</section> </section>
<!-- Contact Section --> <!-- Contact Section -->
<section id="contact" class="py-5 relative bg-gradient-to-br from-blue-50 to-indigo-50"> <section id="contact" class="py-5 relative bg-gradient-to-br from-gray-900 to-gray-800">
<div class="container"> <div class="container">
<h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Contact Us</h2> <h2 class="text-4xl font-bold text-center mb-12 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Neem Contact Op</h2>
<div class="row"> <div class="row">
<div class="col-md-6 mx-auto"> <div class="col-md-6 mx-auto">
<form class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500"> <form class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-red-500">
<div class="mb-3"> <div class="mb-3">
<label for="name" class="form-label text-purple-600">Name</label> <label for="name" class="form-label text-gray-300">Naam</label>
<input type="text" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="name" placeholder="Your name"> <input type="text" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="name" placeholder="Uw naam">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="email" class="form-label text-purple-600">Email</label> <label for="email" class="form-label text-gray-300">E-mail</label>
<input type="email" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="email" placeholder="Your email"> <input type="email" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="email" placeholder="Uw e-mailadres">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="message" class="form-label text-purple-600">Message</label> <label for="car" class="form-label text-gray-300">Voertuig</label>
<textarea class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="message" rows="4" placeholder="Your message"></textarea> <input type="text" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car" placeholder="Uw voertuigmodel">
</div> </div>
<button type="submit" class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Send Message</button> <div class="mb-3">
<label for="message" class="form-label text-gray-300">Bericht</label>
<textarea class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="message" rows="4" placeholder="Wat zoekt u?"></textarea>
</div>
<button type="submit" class="btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Verstuur Bericht</button>
</form> </form>
</div> </div>
</div> </div>
@@ -187,16 +195,33 @@
</section> </section>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-4 relative"> <footer class="bg-gradient-to-r from-gray-900 to-gray-800 text-white py-8 relative border-t border-gray-700">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-4">
<p class="hover:text-pink-300 transition-colors duration-300">&copy; 2024 Your Brand. All rights reserved.</p> <h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">TUNING PRO</h3>
<p class="text-gray-400">Professionele auto tuning diensten voor prestatie liefhebbers.</p>
</div> </div>
<div class="col-md-6 text-end"> <div class="col-md-4">
<a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Privacy Policy</a> <h4 class="text-lg font-semibold mb-4 text-gray-300">Snelle Links</h4>
<a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Terms of Service</a> <ul class="space-y-2">
<a href="#" class="text-white hover:text-pink-300 transition-colors duration-300">Contact</a> <li><a href="#services" class="text-gray-400 hover:text-red-400 transition-colors duration-300">Diensten</a></li>
<li><a href="#gallery" class="text-gray-400 hover:text-red-400 transition-colors duration-300">Galerij</a></li>
<li><a href="#contact" class="text-gray-400 hover:text-red-400 transition-colors duration-300">Contact</a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="text-lg font-semibold mb-4 text-gray-300">Contactgegevens</h4>
<ul class="space-y-2 text-gray-400">
<li>📍 Locatie, Stad</li>
<li>📞 +31612345678</li>
<li>✉️ info@tuningpro.nl</li>
</ul>
</div>
</div>
<div class="row mt-8">
<div class="col-12 text-center">
<p class="text-gray-500">&copy; 2024 Tuning Pro. Alle rechten voorbehouden.</p>
</div> </div>
</div> </div>
</div> </div>

120
js/script.js
View File

@@ -26,18 +26,18 @@ document.addEventListener('DOMContentLoaded', () => {
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in'; modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
modal.innerHTML = ` modal.innerHTML = `
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 transform hover:scale-105 transition-all duration-300"> <div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4 transform hover:scale-105 transition-all duration-300 border border-red-500">
<h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Get Started</h3> <h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Boek Je Tuning</h3>
<p class="text-gray-600 mb-6">Choose how you'd like to get started with our services:</p> <p class="text-gray-300 mb-6">Kies je gewenste dienst:</p>
<div class="space-y-4"> <div class="space-y-4">
<button class="w-full btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300"> <button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
Start Free Trial ECU Tuning
</button> </button>
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300"> <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
Schedule Demo Prestatie Onderdelen
</button> </button>
<button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300"> <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
Contact Sales Maatwerk Pakket
</button> </button>
</div> </div>
<button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors duration-300" onclick="this.closest('.fixed').remove()"> <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors duration-300" onclick="this.closest('.fixed').remove()">
@@ -61,18 +61,12 @@ document.addEventListener('DOMContentLoaded', () => {
modalButtons.forEach(button => { modalButtons.forEach(button => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
const action = button.textContent.trim(); const action = button.textContent.trim();
switch(action) { // Scroll to contact form and populate service type
case 'Start Free Trial': const contactForm = document.querySelector('#contact form');
window.location.href = '#contact'; const messageField = contactForm.querySelector('#message');
break; messageField.value = `Ik ben geïnteresseerd in: ${action}`;
case 'Schedule Demo':
alert('Demo scheduling feature coming soon!');
break;
case 'Contact Sales':
window.location.href = '#contact';
break;
}
modal.remove(); modal.remove();
document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
}); });
}); });
}); });
@@ -84,7 +78,7 @@ document.addEventListener('DOMContentLoaded', () => {
contactForm.addEventListener('submit', (e) => { contactForm.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
// Add your form submission logic here // Add your form submission logic here
alert('Thank you for your message! This is a demo form.'); alert('Bedankt voor je interesse! We nemen zo snel mogelijk contact met je op.');
contactForm.reset(); contactForm.reset();
}); });
} }
@@ -132,11 +126,11 @@ document.addEventListener('DOMContentLoaded', () => {
} }
// Add hover effects to cards // Add hover effects to cards
const cards = document.querySelectorAll('.card, .bg-white.rounded-lg'); const cards = document.querySelectorAll('.card, .bg-gray-800.rounded-lg');
cards.forEach(card => { cards.forEach(card => {
card.addEventListener('mouseenter', () => { card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-5px)'; card.style.transform = 'translateY(-5px)';
card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.1)'; card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.3)';
}); });
card.addEventListener('mouseleave', () => { card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)'; card.style.transform = 'translateY(0)';
@@ -144,72 +138,6 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
}); });
// Learn More button functionality
const learnMoreBtn = document.querySelector('.btn-outline-secondary');
if (learnMoreBtn) {
learnMoreBtn.addEventListener('click', () => {
// Create and show modal
const modal = document.createElement('div');
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
modal.innerHTML = `
<div class="bg-white rounded-lg p-8 max-w-2xl w-full mx-4 transform hover:scale-105 transition-all duration-300">
<h3 class="text-3xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Our Services</h3>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">Lightning Fast Performance</h4>
<p class="text-gray-600">Our platform is optimized for speed and efficiency, ensuring your business operations run smoothly without any delays.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">Enterprise-Grade Security</h4>
<p class="text-gray-600">Your data is protected with state-of-the-art encryption and security measures, ensuring complete privacy and compliance.</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
</svg>
</div>
<div>
<h4 class="text-xl font-semibold mb-2">Cloud Integration</h4>
<p class="text-gray-600">Seamlessly connect with your existing cloud infrastructure and scale your operations as needed.</p>
</div>
</div>
</div>
<div class="mt-8 flex justify-end space-x-4">
<button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300" onclick="this.closest('.fixed').remove()">
Close
</button>
<button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300" onclick="window.location.href='#contact'">
Get Started Now
</button>
</div>
</div>
`;
document.body.appendChild(modal);
// Add click event to close modal when clicking outside
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
});
}
// Navbar scroll effect // Navbar scroll effect
const navbar = document.querySelector('.navbar'); const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
@@ -219,4 +147,18 @@ document.addEventListener('DOMContentLoaded', () => {
navbar.classList.remove('scrolled'); navbar.classList.remove('scrolled');
} }
}); });
// Gallery image hover effects
const galleryItems = document.querySelectorAll('#gallery .col-md-4');
galleryItems.forEach(item => {
item.addEventListener('mouseenter', () => {
const image = item.querySelector('.aspect-w-16');
image.style.transform = 'scale(1.05)';
image.style.transition = 'transform 0.3s ease-in-out';
});
item.addEventListener('mouseleave', () => {
const image = item.querySelector('.aspect-w-16');
image.style.transform = 'scale(1)';
});
});
}); });