XeMerc: Luxury Car Showroom Website

Responsive single-page website for a (fictional) luxury car showroom: browse models, filter/search/sort, book a test drive and contact the dealer. Built with plain HTML, CSS and JavaScript, no framework and no image files (all cars are drawn as inline SVG).

Live demo: https://dlam17.github.io/xemerc/

Features

• Model catalogue rendered from data: cars live in js/data.js; cards are generated in JS
• Filter, search and sort: by body type (Sedan / SUV / Coupé), by name, and by price or power
• Test-drive booking modal: pre-selects the chosen car, validates name, phone (10 digits) and date (from tomorrow), closes with Esc or backdrop click, returns focus
• Form validation with Vietnamese error messages for the contact and newsletter forms
• SVG car illustrations generated per model and color (js/car-art.js), so there are no image assets to break
• Responsive layout with a mobile menu; no horizontal scroll at 390px width
• Small touches: animated stat counters, active nav link on scroll, scroll-snap review carousel, prefers-reduced-motion support

Catalogue with filters	Mobile menu

Run locally

No build step. Open index.html in a browser, or serve the folder:

npx serve .

Project structure

xemerc/
├── index.html
├── css/style.css
├── js/
│   ├── car-art.js   # SVG car drawings (sedan / suv / coupe)
│   ├── data.js      # car models and sample reviews
│   └── main.js      # rendering, filters, modal, form validation
└── docs/            # screenshots

Team

Group project at university by Đỗ Đức Lâm (@dlam17) and Hoàng Quốc Duy (@HoangQuocDuy29). The first version (2024) was a static template page. In 2026 it was rebuilt with a data-driven catalogue, filters, booking modal, validation, SVG artwork and a fully responsive layout.

Disclaimer

Student project for learning purposes. Not affiliated with or endorsed by Mercedes-Benz. Model names belong to their owners. Prices, specs and reviews are illustrative sample data.