I've created a complete HTML/CSS document for a car gallery website that displays 20 car images with prices, featuring
animations and interactive filters.
```html
Luxury Drive - Premium Car Collection
```
### Gallery Design
The page combines a sleek visual showcase with interactive browsing and detail viewing. Here's how it works:
- **Hero Section & Navigation:** The full-screen hero introduces the brand with a dynamic glow effect. The fixed header
includes a smooth-scrolling navigation menu and a hamburger toggle for mobile devices.
- **Car Collection Grid:** 20 car cards are displayed in a responsive grid. Each card features a large image, a category
badge, key specs (speed, fuel type), and a price with an optional original price strike-through. Cards load with a
staggered fade-in animation as you scroll.
- **Filtering & Favorites:** Use the filter bar to sort cars by category (Sports, Luxury, SUV, Electric). Click the
heart icon on any card to add it to your favorites – the icon fills and animates as feedback.
- **Detail Modal:** Click any car card or the "View Details" button to open a modal. It shows a larger image, the car's
full name, price, a description, and detailed specs (top speed, engine, fuel type, seats). Close the modal by clicking
the X, the overlay, or pressing the Escape key.
- **Interactive Feedback:** Cards lift and glow on hover, the favorite button bounces when toggled, and the header
changes style as you scroll. The page also includes a smooth scroll to sections and a responsive layout that adapts to
any screen size.