One-page marketing site for a Mazda auto repair shop in Huntington Beach, CA.
Plain HTML/CSS — no build step. Open index.html in a browser, or host the
folder on any static host (GitHub Pages, Netlify, Cloudflare Pages, S3, etc.).
index.html— page markup, JSON-LD, OG tagsstyles.css— all styling, mobile-first
Search-and-replace these across index.html:
| What | Placeholder | Notes |
|---|---|---|
| Business name | Mazda Repair HB |
Appears in header, footer, JSON-LD |
| Display phone | (714) 555-0123 |
Header, hero, callout, footer |
tel: phone |
+17145550123 |
Five <a href="tel:..."> links |
| Hero background | CSS gradient in .hero |
Replace with a real photo when ready (use background-image: url(...) on .hero) |
The hero, header, mid-page callout, and footer all link to
tel:+17145550123. On a mobile device, tapping any of these prompts the OS
to place the call.
- Open
index.htmllocally; resize the viewport to ~375px to confirm the mobile layout. - On a real phone, tap each call button — the device should prompt to dial
+17145550123. - Run Lighthouse for Accessibility / SEO sanity checks.
