# HTML Display Templates

These are production-ready HTML templates the agency can render to PNG or use directly in ad servers that accept HTML creative (Google DV360, Flashtalking, Celtra).

## Included

| File | Size | Notes |
|------|------|-------|
| `template-square-1200x1200.html` | 1200x1200 | Full overlay system, headline + CTA + chips |
| `template-small-display-300x250.html` | 300x250 | Stripped for legibility |
| `template-leaderboard-728x90.html` | 728x90 | Horizontal reflow, one-line headline |

## How to use

### To render as PNG:
```bash
npx puppeteer-screenshot-cli \
  file://$(pwd)/template-square-1200x1200.html \
  --viewport 1200x1200 \
  --output ad-good-people-1200x1200-rendered.png
```

### To use in ad server:
Replace the placeholder image path (`REPLACE_WITH_SUBJECT_PHOTO.jpg`) with the actual asset URL served from your CDN.

### To duplicate across concepts:
Each template is structured so the agency can:
1. Swap the background photo
2. Swap the headline (keep coral emphasis word)
3. Swap the overlay chips (keep specific, credible, short)
4. Swap the CTA (from approved CTA library)

## Required fonts

Load via Google Fonts or from `/03-fonts/`:

```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
```

## Missing sizes

The following sizes still need to be authored:

- 160x600 (Skyscraper) - vertical reflow of small display template
- 336x280 (Large Rectangle) - use 300x250 template with 12% scale-up
- 320x50 (Mobile Banner) - cut to headline + pulse mark only
- 970x250 (Billboard) - horizontal reflow with photo right 40%
- 1200x628 (Link Preview) - landscape version of hero widescreen
- 1080x1920 (Story/Reel) - vertical reflow of portrait ad

Use the 3 included templates as the foundation. Match the palette, typography, and overlay rules from `/08-guardrails/`.