company automotive car-dealership autohaus german kmu local-business bold
Company Car Dealership
Independent German car dealership with vehicle showcase, service offerings, testimonials, and opening hours — local business with character.
bold Responsive Vanilla JS
Live Preview
Sections
navbarherovehiclesbrandsservicesabouttestimonialscontactfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Autohaus Meyer — Your Car Dealership in Rostock</title>
<meta name="description" content="Autohaus Meyer in Rostock — Used cars, new cars, workshop & service. Your reliable partner for all brands since 1987." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — sleek premium car dealership: slate/dark with red accent */
:root {
--ws-color-accent: oklch(0.50 0.22 25); /* red-600 */
--ws-color-accent-hover: oklch(0.44 0.22 25); /* red-700 */
--ws-color-accent-subtle: oklch(0.95 0.04 25); /* red-50 */
--ws-color-surface: oklch(1 0 0);
--ws-color-surface-alt: oklch(0.97 0.005 240); /* slate-50 */
--ws-color-text: oklch(0.20 0.02 240); /* slate-900 */
--ws-color-text-muted: oklch(0.55 0.02 240); /* slate-500 */
}
/* hover-lift snippet */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.15);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
</style>
</head>
<body class="bg-white text-slate-800 antialiased">
<!-- Navbar -->
<nav class="ws-navbar bg-slate-900 text-white" aria-label="Main navigation">
<div class="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
<div class="flex items-center gap-6">
<a href="#" class="text-xl font-extrabold tracking-tight">Autohaus<span class="text-red-500"> Meyer</span></a>
<a href="tel:+493815551234" class="hidden sm:flex items-center gap-1.5 text-sm text-slate-300 hover:text-white transition-colors" aria-label="Call: 0381 555 1234">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
0381 555 1234
</a>
</div>
<ul class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-300">
<li><a href="#fahrzeuge" class="hover:text-white transition-colors">Vehicles</a></li>
<li><a href="#service" class="hover:text-white transition-colors">Service</a></li>
<li><a href="#ueber-uns" class="hover:text-white transition-colors">About Us</a></li>
<li><a href="#kontakt" class="hover:text-white transition-colors">Contact</a></li>
</ul>
<button id="menu-toggle" class="md:hidden p-2 -mr-2" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden border-t border-slate-700 bg-slate-900 px-6 pb-6 pt-4">
<ul class="flex flex-col gap-4 text-base font-medium text-slate-300">
<li><a href="#fahrzeuge" class="block py-1 hover:text-white">Vehicles</a></li>
<li><a href="#service" class="block py-1 hover:text-white">Service</a></li>
<li><a href="#ueber-uns" class="block py-1 hover:text-white">About Us</a></li>
<li><a href="#kontakt" class="block py-1 hover:text-white">Contact</a></li>
</ul>
<a href="tel:+493815551234" class="mt-4 flex items-center justify-center gap-2 bg-red-600 text-white text-sm font-medium px-5 py-2.5 rounded-lg">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
0381 555 1234
</a>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero bg-slate-900 text-white">
<div class="max-w-7xl mx-auto px-6 py-24 md:py-32 text-center">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tight leading-tight">
Your Car Dealership in Rostock.<br />
<span class="text-red-500">Since 1987.</span>
</h1>
<p class="mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto">
Used cars, new cars, workshop — everything from a single source. Personal, fair, and reliable.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="#fahrzeuge" class="bg-red-600 hover:bg-red-700 text-white font-semibold px-8 py-4 rounded-lg text-lg transition-colors">
Discover Vehicles
</a>
<a href="#kontakt" class="border-2 border-slate-500 hover:border-white text-slate-300 hover:text-white font-semibold px-8 py-4 rounded-lg text-lg transition-colors">
Service Appointment
</a>
</div>
<p class="mt-8 text-sm text-slate-400">Over 3,000 satisfied customers · TÜV-certified workshop · All brands</p>
</div>
</section>
<!-- Current Vehicles -->
<section id="fahrzeuge" class="ws-product-card bg-slate-50 py-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-900">Current Vehicles</h2>
<p class="mt-3 text-slate-500 text-lg">Hand-picked used cars — inspected and guaranteed.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Vehicle 1 -->
<article class="hover-lift bg-white rounded-xl shadow-sm overflow-hidden">
<div class="h-52 bg-gradient-to-br from-slate-300 to-slate-400" role="img" aria-label="VW Golf 8 Life in silver"></div>
<div class="p-6">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-bold text-slate-900">VW Golf 8 Life</h3>
<p class="text-sm text-slate-500">Reg. 03/2022 · 34,500 km</p>
</div>
<span class="text-xl font-extrabold text-red-600">24,900 €</span>
</div>
<div class="mt-4 flex items-center gap-4 text-xs text-slate-500">
<span class="bg-slate-100 px-2.5 py-1 rounded-full">150 HP</span>
<span class="bg-slate-100 px-2.5 py-1 rounded-full">Automatic</span>
<span class="bg-slate-100 px-2.5 py-1 rounded-full">Petrol</span>
</div>
<a href="#" class="mt-5 block text-center bg-slate-900 hover:bg-red-600 text-white font-medium py-2.5 rounded-lg transition-colors">
View Details
</a>
</div>
</article>
<!-- Vehicle 2 -->
<article class="hover-lift bg-white rounded-xl shadow-sm overflow-hidden">
<div class="h-52 bg-gradient-to-br from-slate-600 to-slate-800" role="img" aria-label="BMW 320d Touring in dark blue"></div>
<div class="p-6">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-bold text-slate-900">BMW 320d Touring</h3>
<p class="text-sm text-slate-500">Reg. 11/2021 · 52,300 km</p>
</div>
<span class="text-xl font-extrabold text-red-600">31,500 €</span>
</div>
<div class="mt-4 flex items-center gap-4 text-xs text-slate-500">
<span class="bg-slate-100 px-2.5 py-1 rounded-full">190 HP</span>
<span class="bg-slate-100 px-2.5 py-1 rounded-full">Automatic</span>
<span class="bg-slate-100 px-2.5 py-1 rounded-full">Diesel</span>
</div>
<a href="#" class="mt-5 block text-center bg-slate-900 hover:bg-red-600 text-white font-medium py-2.5 rounded-lg transition-colors">
View Details
</a>
</div>
</article>
<!-- Vehicle 3 -->
<article class="hover-lift bg-white rounded-xl shadow-sm overflow-hidden">
<div class="h-52 bg-gradient-to-br from-gray-100 to-gray-200" role="img" aria-label="Mercedes A-Class in white"></div>
<div class="p-6">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-bold text-slate-900">Mercedes A 180</h3>
<p class="text-sm text-slate-500">Reg. 06/2023 · 18,200 km</p>
</div>
<span class="text-xl font-extrabold text-red-600">28,700 €</span>
</div>
<div class="mt-4 flex items-center gap-4 text-xs text-slate-500">
<span class="bg-slate-100 px-2.5 py-1 rounded-full">136 HP</span>
<span class="bg-slate-100 px-2.5 py-1 rounded-full">Manual</span>
<span class="bg-slate-100 px-2.5 py-1 rounded-full">Petrol</span>
</div>
<a href="#" class="mt-5 block text-center bg-slate-900 hover:bg-red-600 text-white font-medium py-2.5 rounded-lg transition-colors">
View Details
</a>
</div>
</article>
</div>
<div class="text-center mt-10">
<a href="#" class="inline-flex items-center gap-2 text-red-600 hover:text-red-700 font-semibold transition-colors">
View all vehicles
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</a>
</div>
</div>
</section>
<!-- Brands -->
<section class="ws-logo-cloud bg-white py-16 border-y border-slate-100">
<div class="max-w-7xl mx-auto px-6">
<p class="text-center text-sm font-medium text-slate-400 uppercase tracking-wider mb-8">We carry all major brands</p>
<div class="flex flex-wrap items-center justify-center gap-6 md:gap-10">
<span class="bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg">VW</span>
<span class="bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg">BMW</span>
<span class="bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg">Mercedes</span>
<span class="bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg">Audi</span>
<span class="bg-slate-100 text-slate-600 font-bold text-lg px-6 py-3 rounded-lg">Skoda</span>
</div>
</div>
</section>
<!-- Service -->
<section id="service" class="ws-features bg-white py-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14">
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-900">Workshop & Service</h2>
<p class="mt-3 text-slate-500 text-lg">Master workshop with state-of-the-art technology — for all makes.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Service 1 -->
<div class="text-center p-6 rounded-xl bg-slate-50">
<div class="w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
</div>
<h3 class="text-lg font-bold text-slate-900">Maintenance & Inspection</h3>
<p class="mt-2 text-sm text-slate-500">Regular inspections per manufacturer specifications. Oil changes, filters, brakes — everything from a single source.</p>
</div>
<!-- Service 2 -->
<div class="text-center p-6 rounded-xl bg-slate-50">
<div class="w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<h3 class="text-lg font-bold text-slate-900">MOT / Emissions Test</h3>
<p class="mt-2 text-sm text-slate-500">Vehicle inspection and emissions test right at our shop. No waiting time, with pre-check included.</p>
</div>
<!-- Service 3 -->
<div class="text-center p-6 rounded-xl bg-slate-50">
<div class="w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
</div>
<h3 class="text-lg font-bold text-slate-900">Accident Repair</h3>
<p class="mt-2 text-sm text-slate-500">Body work, paint, smart repair. We work with all insurance companies and provide loaner vehicles.</p>
</div>
<!-- Service 4 -->
<div class="text-center p-6 rounded-xl bg-slate-50">
<div class="w-14 h-14 mx-auto mb-4 bg-red-100 text-red-600 rounded-xl flex items-center justify-center">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
</div>
<h3 class="text-lg font-bold text-slate-900">Tire Service</h3>
<p class="mt-2 text-sm text-slate-500">Tire changes, storage, balancing. Summer and winter tires of all brands in stock.</p>
</div>
</div>
</div>
</section>
<!-- About Us -->
<section id="ueber-uns" class="ws-blog bg-slate-50 py-20">
<div class="max-w-7xl mx-auto px-6">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="bg-gradient-to-br from-slate-200 to-slate-300 rounded-2xl h-80 md:h-96 flex items-center justify-center" role="img" aria-label="Autohaus Meyer team photo">
<span class="text-slate-400 text-sm font-medium">Team photo</span>
</div>
<div>
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-900">A Family Business with Heart</h2>
<p class="mt-6 text-slate-600 leading-relaxed">
Since 1987, we have been there for our customers in Rostock and the surrounding area. What began as a small workshop is now a modern car dealership with 15 employees — but our values have remained the same.
</p>
<p class="mt-4 text-slate-600 leading-relaxed">
With us, you don't just buy a car. You get honest advice, fair prices, and a partner who is there for you even after the purchase. Every vehicle is inspected by our master mechanics before it goes on sale.
</p>
<div class="mt-8 flex flex-wrap gap-4">
<span class="bg-white border border-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-lg text-sm">Honest.</span>
<span class="bg-white border border-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-lg text-sm">Personal.</span>
<span class="bg-white border border-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-lg text-sm">Reliable.</span>
</div>
<div class="mt-8 grid grid-cols-3 gap-6">
<div>
<p class="text-3xl font-extrabold text-red-600">37</p>
<p class="text-sm text-slate-500 mt-1">Years of Experience</p>
</div>
<div>
<p class="text-3xl font-extrabold text-red-600">15</p>
<p class="text-sm text-slate-500 mt-1">Employees</p>
</div>
<div>
<p class="text-3xl font-extrabold text-red-600">3,000+</p>
<p class="text-sm text-slate-500 mt-1">Satisfied Customers</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Customer Reviews -->
<section class="ws-testimonials bg-white py-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14">
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-900">What Our Customers Say</h2>
<p class="mt-3 text-slate-500 text-lg">Real reviews from real customers.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Review 1 -->
<blockquote class="bg-slate-50 rounded-xl p-6">
<div class="flex items-center gap-1 text-amber-400 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-700 leading-relaxed">«First-class service! Mr. Meyer really took his time and found exactly the right car for us. The Golf runs flawlessly.»</p>
<footer class="mt-5 flex items-center gap-3">
<div class="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-500 text-sm font-bold" aria-hidden="true">SK</div>
<div>
<p class="text-sm font-semibold text-slate-900">Stefan K.</p>
<p class="text-xs text-slate-400">VW Golf 8 · March 2025</p>
</div>
</footer>
</blockquote>
<!-- Review 2 -->
<blockquote class="bg-slate-50 rounded-xl p-6">
<div class="flex items-center gap-1 text-amber-400 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-700 leading-relaxed">«Fair price, top service! The workshop got my old Passat back in great shape. And without any pushy upselling.»</p>
<footer class="mt-5 flex items-center gap-3">
<div class="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-500 text-sm font-bold" aria-hidden="true">ML</div>
<div>
<p class="text-sm font-semibold text-slate-900">Martina L.</p>
<p class="text-xs text-slate-400">Workshop customer · January 2025</p>
</div>
</footer>
</blockquote>
<!-- Review 3 -->
<blockquote class="bg-slate-50 rounded-xl p-6">
<div class="flex items-center gap-1 text-amber-400 mb-4" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-slate-700 leading-relaxed">«We bought our BMW here and also have it serviced here. The team is super friendly and the prices are transparent.»</p>
<footer class="mt-5 flex items-center gap-3">
<div class="w-10 h-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-500 text-sm font-bold" aria-hidden="true">JH</div>
<div>
<p class="text-sm font-semibold text-slate-900">Jens & Heike R.</p>
<p class="text-xs text-slate-400">BMW 320d Touring · November 2024</p>
</div>
</footer>
</blockquote>
</div>
</div>
</section>
<!-- Contact & Opening Hours -->
<section id="kontakt" class="ws-contact bg-slate-50 py-20">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14">
<h2 class="text-3xl md:text-4xl font-extrabold text-slate-900">Contact & Opening Hours</h2>
<p class="mt-3 text-slate-500 text-lg">We look forward to your visit.</p>
</div>
<div class="grid md:grid-cols-2 gap-12">
<!-- Contact details -->
<div>
<h3 class="text-xl font-bold text-slate-900 mb-6">How to Reach Us</h3>
<address class="not-italic space-y-4 text-slate-600">
<div class="flex items-start gap-3">
<svg class="w-5 h-5 mt-0.5 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
<div>
<p class="font-semibold text-slate-900">Autohaus Meyer GmbH</p>
<p>Tessiner Straße 42</p>
<p>18055 Rostock</p>
</div>
</div>
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
<a href="tel:+493815551234" class="hover:text-red-600 transition-colors">0381 555 1234</a>
</div>
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
<a href="mailto:info@autohaus-meyer.de" class="hover:text-red-600 transition-colors">info@autohaus-meyer.de</a>
</div>
</address>
<!-- Map placeholder -->
<div class="mt-8 bg-slate-200 rounded-xl h-48 flex items-center justify-center" role="img" aria-label="Map view of Autohaus Meyer location">
<span class="text-slate-400 text-sm font-medium">Google Maps view</span>
</div>
</div>
<!-- Opening Hours -->
<div>
<h3 class="text-xl font-bold text-slate-900 mb-6">Opening Hours</h3>
<table class="w-full text-left" aria-label="Autohaus Meyer opening hours">
<caption class="sr-only">Autohaus Meyer opening hours by day of the week</caption>
<thead>
<tr class="border-b border-slate-200">
<th scope="col" class="py-3 text-sm font-semibold text-slate-500 uppercase tracking-wider">Day</th>
<th scope="col" class="py-3 text-sm font-semibold text-slate-500 uppercase tracking-wider text-right">Sales</th>
<th scope="col" class="py-3 text-sm font-semibold text-slate-500 uppercase tracking-wider text-right">Workshop</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr>
<td class="py-3 font-medium text-slate-900">Monday</td>
<td class="py-3 text-slate-600 text-right">08:00 – 18:00</td>
<td class="py-3 text-slate-600 text-right">07:30 – 17:00</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-900">Tuesday</td>
<td class="py-3 text-slate-600 text-right">08:00 – 18:00</td>
<td class="py-3 text-slate-600 text-right">07:30 – 17:00</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-900">Wednesday</td>
<td class="py-3 text-slate-600 text-right">08:00 – 18:00</td>
<td class="py-3 text-slate-600 text-right">07:30 – 17:00</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-900">Thursday</td>
<td class="py-3 text-slate-600 text-right">08:00 – 18:00</td>
<td class="py-3 text-slate-600 text-right">07:30 – 17:00</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-900">Friday</td>
<td class="py-3 text-slate-600 text-right">08:00 – 18:00</td>
<td class="py-3 text-slate-600 text-right">07:30 – 17:00</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-900">Saturday</td>
<td class="py-3 text-slate-600 text-right">09:00 – 13:00</td>
<td class="py-3 text-slate-400 text-right">closed</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-900">Sunday</td>
<td class="py-3 text-slate-400 text-right">closed</td>
<td class="py-3 text-slate-400 text-right">closed</td>
</tr>
</tbody>
</table>
<div class="mt-8 bg-red-50 border border-red-100 rounded-xl p-5">
<p class="text-sm font-semibold text-red-800">Schedule a Service Appointment</p>
<p class="text-sm text-red-700 mt-1">Call or write to us — we will find a short-notice appointment for you.</p>
<a href="tel:+493815551234" class="mt-3 inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
Call now
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-slate-900 text-slate-400 py-12">
<div class="max-w-7xl mx-auto px-6">
<div class="grid sm:grid-cols-2 md:grid-cols-4 gap-8 mb-10">
<div>
<p class="text-white font-extrabold text-lg">Autohaus<span class="text-red-500"> Meyer</span></p>
<p class="mt-3 text-sm leading-relaxed">Your independent car dealership in Rostock. Quality, trust, and personal service since 1987.</p>
</div>
<div>
<p class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Vehicles</p>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Used Cars</a></li>
<li><a href="#" class="hover:text-white transition-colors">New Cars</a></li>
<li><a href="#" class="hover:text-white transition-colors">Nearly-New Cars</a></li>
<li><a href="#" class="hover:text-white transition-colors">Financing</a></li>
</ul>
</div>
<div>
<p class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Service</p>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Workshop</a></li>
<li><a href="#" class="hover:text-white transition-colors">MOT / Emissions</a></li>
<li><a href="#" class="hover:text-white transition-colors">Tire Service</a></li>
<li><a href="#" class="hover:text-white transition-colors">Accident Repair</a></li>
</ul>
</div>
<div>
<p class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Legal</p>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Legal Notice</a></li>
<li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms & Conditions</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-800 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm">
<p>© 2025 Autohaus Meyer GmbH. All rights reserved.</p>
<p class="text-slate-500">Tessiner Str. 42 · 18055 Rostock · 0381 555 1234</p>
</div>
</div>
</footer>
<!-- Mobile menu script -->
<script>
const toggle = document.getElementById('menu-toggle');
const menu = document.getElementById('mobile-menu');
toggle.addEventListener('click', () => {
const open = !menu.classList.contains('hidden');
menu.classList.toggle('hidden');
toggle.setAttribute('aria-expanded', String(!open));
toggle.setAttribute('aria-label', open ? 'Open menu' : 'Close menu');
});
// Close mobile menu on link click
menu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open menu');
});
});
</script>
</body>
</html>Independent car dealership with local character. Dark hero, vehicle showcase with pricing, and practical contact section with opening hours. Not a manufacturer template — a real Autohaus.