mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 11:06:21 +01:00
235 lines
15 KiB
HTML
235 lines
15 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>
|
|
<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 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> |