Watermark EPS — Industrial Water Treatment Website Template
A B2B industrial website template for water treatment, wastewater, and stormwater engineering firms — designed with an engineering blueprint aesthetic. Free for personal and commercial use.
Quick Start
bash
git clone https://github.com/tookit/watermark-redesign.git
cd watermark-redesign
# Open index.html in your browser, or use a local server:
npx serve .
No build step. No npm install. Just open and go.
Pages
| Page | Description |
|---|---|
| Home | Hero with SVG blueprint illustration + flow animation, market band, value props, trusted clients, product line card, featured projects, territory map, CTA |
| Product Lines | Manufacturer grid (29 logos as monogram badges) + line card download |
| Manufacturers | Detailed manufacturer profiles organized by market category |
| Project Types | 6 project categories (Pump Station, Waterworks, Septic, CSO/Wetland, Plumbing, Irrigation) |
| Portfolio | Featured municipal projects with location, scope, and outcomes |
| Sales Territories | Service area map with office/warehouse locations and contact info |
| Contact | Split layout: inquiry form + office details + map placeholder |
Tech Stack
- HTML5 — Semantic, accessible markup
- CSS3 — Custom properties, CSS Grid, Flexbox, responsive design
- Vanilla JavaScript — Mobile menu toggle, scroll-triggered reveal animations, intersection observer
- Google Fonts — Big Shoulders Display, IBM Plex Sans, IBM Plex Mono
Features
- Fully responsive — desktop grid layout (≥1080px) collapses to single-column on mobile
- Sticky navigation with backdrop blur
- Mobile hamburger menu
- Scroll-triggered section reveal animations
- SVG flow-line animation on hero illustration
- Line card grid with 29 manufacturer monogram badges
- Client & project cards with real municipal project data
- Service territory indicator with office/warehouse markers
- Contact form with validation feedback
- prefers-reduced-motion support — animations collapse to static display
- Keyboard-accessible focus indicators on all interactive elements
- WCAG AA color contrast compliance
Design System
See design.md for the complete design specification — color palette, typography scale, engineering blueprint visual grammar, component behaviors, and anti-patterns.
License
MIT — free for personal and commercial use.
