mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 02:56:27 +01:00
446 lines
32 KiB
HTML
446 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Auto Tuning Pro</title>
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<!-- Custom JS -->
|
|
<script src="js/tailwind.config.js"></script>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-gray-900 to-gray-800">
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top transition-all duration-300 hover:shadow-lg glass-nav">
|
|
<div class="container">
|
|
<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">
|
|
<span class="bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text font-bold">TUNING PRO</span>
|
|
</a>
|
|
<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>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link active hover:text-red-400 transition-all duration-300 relative group" href="#home">
|
|
Home
|
|
<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>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#services">
|
|
Diensten
|
|
<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>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#gallery">
|
|
Galerij
|
|
<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>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#contact">
|
|
Contact
|
|
<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>
|
|
</li>
|
|
<li class="nav-item ms-3">
|
|
<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">
|
|
Afspraak Maken
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<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-red-900 via-gray-900 to-orange-900 opacity-20"></div>
|
|
<div class="container relative z-10">
|
|
<div class="row">
|
|
<div class="col-md-8 mx-auto text-center">
|
|
<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-300 mb-8 text-xl animate-pulse-slow">Professionele ECU Tuning & Prestatieverbetering</p>
|
|
<div class="space-x-4">
|
|
<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">
|
|
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>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-5 relative bg-gradient-to-br from-gray-900 to-gray-800">
|
|
<div class="container">
|
|
<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="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">ECU Tuning</h3>
|
|
<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 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-orange-500">
|
|
<div class="text-4xl mb-4 animate-bounce-slow">⚡</div>
|
|
<h3 class="text-xl font-bold mb-3 text-orange-500">Prestatie Onderdelen</h3>
|
|
<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>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section id="gallery" class="py-5 relative bg-gradient-to-br from-gray-800 to-gray-900">
|
|
<div class="container">
|
|
<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="col-md-4 mb-4">
|
|
<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-red-500 via-orange-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
|
|
<div class="p-4">
|
|
<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 class="col-md-4 mb-4">
|
|
<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-orange-500 via-red-500 to-orange-500 rounded-lg mb-3 animate-pulse-slow"></div>
|
|
<div class="p-4">
|
|
<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 class="col-md-4 mb-4">
|
|
<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-red-500 via-orange-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
|
|
<div class="p-4">
|
|
<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>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="py-5 relative bg-gradient-to-br from-gray-900 to-gray-800">
|
|
<div class="container">
|
|
<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="col-md-6 mx-auto">
|
|
<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">
|
|
<label for="name" class="form-label text-gray-300">Naam</label>
|
|
<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 class="mb-3">
|
|
<label for="email" class="form-label text-gray-300">E-mail</label>
|
|
<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 class="mb-3">
|
|
<label for="car" class="form-label text-gray-300">Voertuig</label>
|
|
<select class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car">
|
|
<option value="" disabled selected>Selecteer uw voertuigmodel</option>
|
|
<optgroup label="BMW">
|
|
<option value="BMW M2">BMW M2</option>
|
|
<option value="BMW M3">BMW M3</option>
|
|
<option value="BMW M4">BMW M4</option>
|
|
<option value="BMW M5">BMW M5</option>
|
|
<option value="BMW M8">BMW M8</option>
|
|
<option value="BMW 1 Serie M">BMW 1 Serie M</option>
|
|
<option value="BMW 2 Serie M">BMW 2 Serie M</option>
|
|
<option value="BMW 3 Serie M">BMW 3 Serie M</option>
|
|
<option value="BMW 4 Serie M">BMW 4 Serie M</option>
|
|
<option value="BMW 5 Serie M">BMW 5 Serie M</option>
|
|
<option value="BMW X3 M">BMW X3 M</option>
|
|
<option value="BMW X4 M">BMW X4 M</option>
|
|
<option value="BMW X5 M">BMW X5 M</option>
|
|
<option value="BMW X6 M">BMW X6 M</option>
|
|
<option value="BMW 118i">BMW 118i</option>
|
|
<option value="BMW 120i">BMW 120i</option>
|
|
<option value="BMW 125i">BMW 125i</option>
|
|
<option value="BMW 320i">BMW 320i</option>
|
|
<option value="BMW 330i">BMW 330i</option>
|
|
<option value="BMW 420i">BMW 420i</option>
|
|
<option value="BMW 430i">BMW 430i</option>
|
|
</optgroup>
|
|
<optgroup label="Audi">
|
|
<option value="Audi RS3">Audi RS3</option>
|
|
<option value="Audi RS4">Audi RS4</option>
|
|
<option value="Audi RS5">Audi RS5</option>
|
|
<option value="Audi RS6">Audi RS6</option>
|
|
<option value="Audi RS7">Audi RS7</option>
|
|
<option value="Audi RS Q3">Audi RS Q3</option>
|
|
<option value="Audi RS Q8">Audi RS Q8</option>
|
|
<option value="Audi S3">Audi S3</option>
|
|
<option value="Audi S4">Audi S4</option>
|
|
<option value="Audi S5">Audi S5</option>
|
|
<option value="Audi S6">Audi S6</option>
|
|
<option value="Audi S7">Audi S7</option>
|
|
<option value="Audi S8">Audi S8</option>
|
|
<option value="Audi SQ5">Audi SQ5</option>
|
|
<option value="Audi SQ7">Audi SQ7</option>
|
|
<option value="Audi SQ8">Audi SQ8</option>
|
|
<option value="Audi A3">Audi A3</option>
|
|
<option value="Audi A4">Audi A4</option>
|
|
<option value="Audi A5">Audi A5</option>
|
|
<option value="Audi A6">Audi A6</option>
|
|
<option value="Audi Q3">Audi Q3</option>
|
|
<option value="Audi Q5">Audi Q5</option>
|
|
</optgroup>
|
|
<optgroup label="Mercedes-AMG">
|
|
<option value="Mercedes-AMG A35">Mercedes-AMG A35</option>
|
|
<option value="Mercedes-AMG A45">Mercedes-AMG A45</option>
|
|
<option value="Mercedes-AMG CLA35">Mercedes-AMG CLA35</option>
|
|
<option value="Mercedes-AMG CLA45">Mercedes-AMG CLA45</option>
|
|
<option value="Mercedes-AMG C43">Mercedes-AMG C43</option>
|
|
<option value="Mercedes-AMG C63">Mercedes-AMG C63</option>
|
|
<option value="Mercedes-AMG E53">Mercedes-AMG E53</option>
|
|
<option value="Mercedes-AMG E63">Mercedes-AMG E63</option>
|
|
<option value="Mercedes-AMG G63">Mercedes-AMG G63</option>
|
|
<option value="Mercedes-AMG GT">Mercedes-AMG GT</option>
|
|
<option value="Mercedes-AMG GT63">Mercedes-AMG GT63</option>
|
|
<option value="Mercedes-AMG GLE63">Mercedes-AMG GLE63</option>
|
|
<option value="Mercedes-AMG GLS63">Mercedes-AMG GLS63</option>
|
|
</optgroup>
|
|
<optgroup label="Volkswagen">
|
|
<option value="Volkswagen Golf R">Volkswagen Golf R</option>
|
|
<option value="Volkswagen Golf GTI">Volkswagen Golf GTI</option>
|
|
<option value="Volkswagen Golf GTD">Volkswagen Golf GTD</option>
|
|
<option value="Volkswagen Polo GTI">Volkswagen Polo GTI</option>
|
|
<option value="Volkswagen Arteon R">Volkswagen Arteon R</option>
|
|
<option value="Volkswagen Tiguan R">Volkswagen Tiguan R</option>
|
|
<option value="Volkswagen T-Roc R">Volkswagen T-Roc R</option>
|
|
<option value="Volkswagen T-Cross">Volkswagen T-Cross</option>
|
|
<option value="Volkswagen Passat R-Line">Volkswagen Passat R-Line</option>
|
|
<option value="Volkswagen Golf">Volkswagen Golf</option>
|
|
<option value="Volkswagen Polo">Volkswagen Polo</option>
|
|
<option value="Volkswagen T-Roc">Volkswagen T-Roc</option>
|
|
<option value="Volkswagen Tiguan">Volkswagen Tiguan</option>
|
|
</optgroup>
|
|
<optgroup label="Porsche">
|
|
<option value="Porsche 911">Porsche 911</option>
|
|
<option value="Porsche 911 GT3">Porsche 911 GT3</option>
|
|
<option value="Porsche 911 Turbo">Porsche 911 Turbo</option>
|
|
<option value="Porsche 718 Cayman">Porsche 718 Cayman</option>
|
|
<option value="Porsche 718 Boxster">Porsche 718 Boxster</option>
|
|
<option value="Porsche Taycan">Porsche Taycan</option>
|
|
<option value="Porsche Panamera">Porsche Panamera</option>
|
|
<option value="Porsche Macan">Porsche Macan</option>
|
|
<option value="Porsche Cayenne">Porsche Cayenne</option>
|
|
</optgroup>
|
|
<optgroup label="Audi Sport">
|
|
<option value="Audi Sport Quattro">Audi Sport Quattro</option>
|
|
<option value="Audi Sport RS e-tron GT">Audi Sport RS e-tron GT</option>
|
|
<option value="Audi Sport R8">Audi Sport R8</option>
|
|
<option value="Audi Sport TT RS">Audi Sport TT RS</option>
|
|
</optgroup>
|
|
<optgroup label="Alfa Romeo">
|
|
<option value="Alfa Romeo Giulia Quadrifoglio">Alfa Romeo Giulia Quadrifoglio</option>
|
|
<option value="Alfa Romeo Stelvio Quadrifoglio">Alfa Romeo Stelvio Quadrifoglio</option>
|
|
<option value="Alfa Romeo 4C">Alfa Romeo 4C</option>
|
|
<option value="Alfa Romeo Giulia">Alfa Romeo Giulia</option>
|
|
<option value="Alfa Romeo Stelvio">Alfa Romeo Stelvio</option>
|
|
<option value="Alfa Romeo Tonale">Alfa Romeo Tonale</option>
|
|
</optgroup>
|
|
<optgroup label="Jaguar">
|
|
<option value="Jaguar F-Type">Jaguar F-Type</option>
|
|
<option value="Jaguar F-Pace SVR">Jaguar F-Pace SVR</option>
|
|
<option value="Jaguar XE SV Project 8">Jaguar XE SV Project 8</option>
|
|
<option value="Jaguar XE">Jaguar XE</option>
|
|
<option value="Jaguar XF">Jaguar XF</option>
|
|
<option value="Jaguar E-Pace">Jaguar E-Pace</option>
|
|
</optgroup>
|
|
<optgroup label="Land Rover">
|
|
<option value="Land Rover Range Rover Sport SVR">Land Rover Range Rover Sport SVR</option>
|
|
<option value="Land Rover Defender V8">Land Rover Defender V8</option>
|
|
<option value="Land Rover Discovery SVX">Land Rover Discovery SVX</option>
|
|
<option value="Land Rover Discovery Sport">Land Rover Discovery Sport</option>
|
|
<option value="Land Rover Evoque">Land Rover Evoque</option>
|
|
</optgroup>
|
|
<optgroup label="Maserati">
|
|
<option value="Maserati MC20">Maserati MC20</option>
|
|
<option value="Maserati Levante Trofeo">Maserati Levante Trofeo</option>
|
|
<option value="Maserati Ghibli Trofeo">Maserati Ghibli Trofeo</option>
|
|
<option value="Maserati Ghibli">Maserati Ghibli</option>
|
|
<option value="Maserati Levante">Maserati Levante</option>
|
|
</optgroup>
|
|
<optgroup label="Bentley">
|
|
<option value="Bentley Continental GT">Bentley Continental GT</option>
|
|
<option value="Bentley Flying Spur">Bentley Flying Spur</option>
|
|
<option value="Bentley Bentayga">Bentley Bentayga</option>
|
|
</optgroup>
|
|
<optgroup label="Aston Martin">
|
|
<option value="Aston Martin Vantage">Aston Martin Vantage</option>
|
|
<option value="Aston Martin DB11">Aston Martin DB11</option>
|
|
<option value="Aston Martin DBS">Aston Martin DBS</option>
|
|
</optgroup>
|
|
<optgroup label="Ferrari">
|
|
<option value="Ferrari F8 Tributo">Ferrari F8 Tributo</option>
|
|
<option value="Ferrari SF90 Stradale">Ferrari SF90 Stradale</option>
|
|
<option value="Ferrari 296 GTB">Ferrari 296 GTB</option>
|
|
</optgroup>
|
|
<optgroup label="Lamborghini">
|
|
<option value="Lamborghini Huracán">Lamborghini Huracán</option>
|
|
<option value="Lamborghini Aventador">Lamborghini Aventador</option>
|
|
<option value="Lamborghini Urus">Lamborghini Urus</option>
|
|
</optgroup>
|
|
<optgroup label="McLaren">
|
|
<option value="McLaren 720S">McLaren 720S</option>
|
|
<option value="McLaren 765LT">McLaren 765LT</option>
|
|
<option value="McLaren Artura">McLaren Artura</option>
|
|
</optgroup>
|
|
<optgroup label="Toyota">
|
|
<option value="Toyota GR Yaris">Toyota GR Yaris</option>
|
|
<option value="Toyota GR Corolla">Toyota GR Corolla</option>
|
|
<option value="Toyota GR86">Toyota GR86</option>
|
|
<option value="Toyota Supra">Toyota Supra</option>
|
|
<option value="Toyota Yaris">Toyota Yaris</option>
|
|
<option value="Toyota Corolla">Toyota Corolla</option>
|
|
</optgroup>
|
|
<optgroup label="Honda">
|
|
<option value="Honda Civic Type R">Honda Civic Type R</option>
|
|
<option value="Honda Civic">Honda Civic</option>
|
|
<option value="Honda Jazz">Honda Jazz</option>
|
|
<option value="Honda HR-V">Honda HR-V</option>
|
|
</optgroup>
|
|
<optgroup label="Ford">
|
|
<option value="Ford Focus ST">Ford Focus ST</option>
|
|
<option value="Ford Focus RS">Ford Focus RS</option>
|
|
<option value="Ford Fiesta ST">Ford Fiesta ST</option>
|
|
<option value="Ford Mustang">Ford Mustang</option>
|
|
<option value="Ford Focus">Ford Focus</option>
|
|
<option value="Ford Fiesta">Ford Fiesta</option>
|
|
</optgroup>
|
|
<optgroup label="Renault">
|
|
<option value="Renault Megane RS">Renault Megane RS</option>
|
|
<option value="Renault Clio RS">Renault Clio RS</option>
|
|
<option value="Renault Megane">Renault Megane</option>
|
|
<option value="Renault Clio">Renault Clio</option>
|
|
<option value="Renault Captur">Renault Captur</option>
|
|
</optgroup>
|
|
<optgroup label="Peugeot">
|
|
<option value="Peugeot 308 GTI">Peugeot 308 GTI</option>
|
|
<option value="Peugeot 208 GTI">Peugeot 208 GTI</option>
|
|
<option value="Peugeot 308">Peugeot 308</option>
|
|
<option value="Peugeot 208">Peugeot 208</option>
|
|
<option value="Peugeot 3008">Peugeot 3008</option>
|
|
</optgroup>
|
|
<optgroup label="Opel">
|
|
<option value="Opel Astra GSi">Opel Astra GSi</option>
|
|
<option value="Opel Corsa OPC">Opel Corsa OPC</option>
|
|
<option value="Opel Astra">Opel Astra</option>
|
|
<option value="Opel Corsa">Opel Corsa</option>
|
|
<option value="Opel Mokka">Opel Mokka</option>
|
|
</optgroup>
|
|
<optgroup label="Seat">
|
|
<option value="Seat Leon Cupra">Seat Leon Cupra</option>
|
|
<option value="Seat Ibiza Cupra">Seat Ibiza Cupra</option>
|
|
<option value="Seat Leon">Seat Leon</option>
|
|
<option value="Seat Ibiza">Seat Ibiza</option>
|
|
<option value="Seat Arona">Seat Arona</option>
|
|
</optgroup>
|
|
<optgroup label="Skoda">
|
|
<option value="Skoda Octavia RS">Skoda Octavia RS</option>
|
|
<option value="Skoda Kodiaq RS">Skoda Kodiaq RS</option>
|
|
<option value="Skoda Octavia">Skoda Octavia</option>
|
|
<option value="Skoda Kodiaq">Skoda Kodiaq</option>
|
|
<option value="Skoda Karoq">Skoda Karoq</option>
|
|
</optgroup>
|
|
<optgroup label="Andere">
|
|
<option value="Ander model">Ander model</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<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="row">
|
|
<div class="col-md-4">
|
|
<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 class="col-md-4">
|
|
<h4 class="text-lg font-semibold mb-4 text-gray-300">Snelle Links</h4>
|
|
<ul class="space-y-2">
|
|
<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">© 2024 Tuning Pro. Alle rechten voorbehouden.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JavaScript -->
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |