Northline Motors — Used Car Dealership Website (8 Pages)

8 pages, each a complete, self-contained HTML page — a showroom-dark independent used car dealership design: a spotlight hero that sweeps onto an SVG car over a glossy grid floor, Unbounded wide headings over Onest, graphite / polished chrome / electric cyan palette with cool-grey light sections, chamfered cut-corner cards with chrome bevel borders, gauge spec pills and wide letterbox photos with a reflective floor. 1. Home (index.html) — showroom hero with gauge placards, quick search console (body type, max price, max miles → links to the filtered inventory), horizontal inventory scroller of tilt cards, gauge dashboard with count-ups, letterbox pricing band, payment calculator, 120-point inspection dial, trade-in and service panels, reviews, trust badges. 2. Inventory (inventory.html) — 12 sample vehicles with body-type chips, a price slider, mileage filter, text search and sort; an out-the-door price example; shopping FAQ. 3. Financing (financing.html) — four pre-qualification steps, the payment calculator, credit tiers explained, a documents checklist and a financing FAQ (FAQPage markup). 4. Trade-In (trade-in.html) — how valuation works with factor meters, a condition checklist and a trade-in estimate request form. 5. Service Center (service.html) — four core services, a tabbed service menu with sample prices, service hours, a maintenance timeline that fills as you scroll. 6. Why Northline (why-northline.html) — the 120-point checklist with a ticking dial, a sample history report, the exchange window, warranty options and "what we don't do". 7. About & Reviews (about.html) — story with count-ups, house rules, rating breakdown meters, six reviews and trust badges. 8. Contact & Test Drive (contact.html) — test-drive request form, dealer hours, location, what to expect and a test-drive FAQ. ANIMATION. On the home page a spotlight sweeps across and lands on the car, which brightens and reflects on the floor. Gauge needles and arcs sweep to their value as they scroll into view, the inspection dial ticks through each system and counts to 120, statistics count up (they read the number you type), rating meters and the maintenance timeline fill, and inventory cards tilt in 3D under a mouse (fine pointers only). Everything is visible without JavaScript, and visitors who ask for reduced motion see a still page. VEHICLE ARTWORK. Vehicles are drawn as inline-SVG side-profile silhouettes (sedan, SUV, pickup, hatchback, coupe, minivan) — no real makes, models, badges or logos. Each card's paint colour comes from a class such as nm-paint--silver, nm-paint--midnight or nm-paint--garnet on the card's stage; the colours themselves are --paint-* tokens you can change in the Theme panel. When you have real photos, replace the SVG in a card's stage with an <img> of the actual vehicle. INVENTORY FILTERS. Each card's filter data lives in its data-type (sedan, suv, truck, hatch, coupe, van), data-price, data-miles and data-year attributes — update them when you edit a card's text. The header search box and the home quick search open inventory.html with the filters in the address (#type=suv&price=25000&miles=50000&q=hybrid), so you can also link to a pre-filtered view. For a live inventory, replace the static cards with your dealer management system's feed or inventory widget. PAYMENT CALCULATOR. It works in the browser: price, down payment, trade-in, APR and term produce an estimated monthly payment, amount financed, interest and total of payments. The defaults (including the 7.9% APR) are samples; the card payments use sample terms of $2,000 down, 8.9% APR, 60 months. If you advertise a payment or rate, federal Truth in Lending rules (Regulation Z) and state law may require additional terms to be disclosed alongside it. FONTS. Unbounded and Onest load from Google Fonts via @font-face in each page's style block, with system sans-serif fallbacks. SEO. Each page opens with a labeled block (title, meta description, canonical link, Open Graph tags and JSON-LD). Every page includes an AutoDealer entity; the inventory page adds an ItemList of three sample Car offers, the financing page an FAQPage and the service page an OfferCatalog. Copy it into your real <head> when you deploy, and update the domain, address, hours, rating and listings. FORMS. The test-drive request form and the trade-in estimate form post nowhere and ship no backend — set each form's action attribute to your CRM or form endpoint before publishing. The header search boxes only filter the on-page inventory. EDITING. Change colours and fonts site-wide in the editor's Theme panel; edit the header or footer once and use "Apply to all pages"; sections can be moved, duplicated, hidden or deleted; use the Tablet and Mobile views for device-specific tweaks. CLAIMS & SAMPLE CONTENT. The dealership name, address, phone numbers, dealer license number, every vehicle, price, mileage, MPG figure, payment estimate, APR, doc fee, tax example, service price, warranty term, exchange policy, statistic, rating and review are fictional samples. Replace them with your own real details and only publish reviews you have permission to use. Dealer advertising is regulated: price advertising and fee disclosure (including documentation fees), financing and payment terms, warranty and "as is" statements, and the FTC Used Car Rule's Buyers Guide are governed by the FTC and by state law — have your real prices, fees, financing language and policies reviewed before publishing. Do not add real manufacturer names, logos or badges you are not authorised to use. IMAGES. All photography is real Unsplash stock, self-hosted under /content-images: a rim-lit sedan, a car on an open road, a coastal road, an engine bay, a technician's hands and a driver's hand on a steering wheel. No photo shows a recognisable face, but some show real vehicles whose shapes may be recognisable — replace them with photos of your own lot and inventory before commercial use.