Overview
The Foster Collaborative is a Christ-centered network that unites churches, agencies, and local partners to support children and families touched by foster care. The site was designed and developed to express that mission clearly—collaboration, compassion, and practical help—while making it easy for families, churches, and professionals to find events, resources, and ways to connect.
Live Site: fosterallencounty.org
The Challenge
The organization needed a web presence that would:
- Explain the mission — Communicate a faith-rooted, county-wide collaborative without sounding like a government agency or placement service
- Clarify the audience — Speak to foster and kinship families, biological families, churches, volunteers, and caseworkers in one cohesive story
- Drive action — Surface events, quarterly gatherings, CarePortal, contact paths, and social channels without overwhelming visitors
- Scale across pages — Support a multi-page site (home, about, events, gatherings, contact, CarePortal) with consistent navigation and branding
- Work everywhere — Full responsiveness plus layouts that still read well when embedded in third-party or narrow contexts (iframes, smaller viewports)
- Integrate tools — Newsletter signup, RSVP/forms, and external links to the broader Foster Allen County ecosystem
The Solution
Design Approach
The design balances warmth and clarity for a sensitive topic—kids and families in crisis—while staying modern and scannable. Key decisions included:
- Color palette — Sage green (
#919f89) as the primary brand color, warm gold accent (#efbc68) for highlights and CTAs, and deep slate text (#2c3e50) for readability - Typography — Inter across the site for a clean, approachable, highly legible UI at all sizes
- Visual hierarchy — Section accents, taglines (“Our Mission,” “Community,” “What’s Happening”), and card-based grids so users can skim and dive deeper as needed
- Photography — Full-width hero and supportive imagery that reinforces family, care, and community without cluttering the message
Key Features
| Feature | Description |
|---|---|
| Hero | Full-viewport hero with mission headline, supporting line, and primary CTAs (resources + events) |
| Intro band | Short Christ-centered positioning statement that sets tone before detailed sections |
| What We Do | Four feature cards: Connect Families, Coordinate Collaborative Projects, Share Events, Encourage & Equip |
| Who This Is For | Audience grid for families, biological/relative caregivers, churches/volunteers, and caseworkers/partners—plus a clear note that the org is not a placement or licensing agency |
| About | Story blocks (heartbeat, faith and collaboration) with sidebar CTA to the full About page |
| Events preview | Event-type tiles (support groups, trainings, info nights, service days, resource fairs) and link-out to the full events experience |
| CarePortal banner | Prominent strip linking to Allen County CarePortal for tangible, local needs |
| Contact CTA | Email, Instagram, Facebook, and button to the full contact flow |
| Events page | Filterable listing with event cards, imagery, meta (date, location), and actions |
| Quarterly gatherings | Dedicated page for recurring partner meetings with RSVP/form integration and supporting copy |
| Shared chrome | Injected shared header / navigation across inner pages for one place to update the menu |
Technical Implementation
- HTML5 — Semantic sections, meta descriptions for SEO, and thoughtful alt text on imagery
- CSS3 — Layout with flexbox and grid, custom properties where used, hero overlays, cards, and responsive breakpoints (including ~768px and ~480px patterns on key pages)
- JavaScript — Embedded/constrained detection for iframe-friendly layout; shared header fetch and injection on satellite pages; newsletter/modal patterns where integrated with the form provider
- Third-party — Font Awesome icons; form/modal tooling (e.g., Plato) for signup and RSVP where configured
- Responsive & embed-aware —
embedded/constrainedbody classes adjust typography, hero behavior (e.g.,background-attachment), and spacing when the site is not the top-level window or when the viewport is narrow
Pages
- Home (
Index.html) — Hero, intro, What We Do, Who This Is For, About preview, Events preview, CarePortal banner, Contact CTA - About — Extended story and values
- Events — Full events listing with filters
- Quarterly gatherings — Meeting details, FAQ-style content, RSVP
- Contact — Full contact experience
- CarePortal — Dedicated entry point for the CarePortal program
- Supporting includes — Shared header/footer, widgets, and campaign pages as needed for embeds and promotions
Results & Outcomes
Mission, audience, and disclaimers are consistent so visitors understand what the Collaborative is—and is not
Events, gatherings, CarePortal, and contact are each one or two clicks from the home narrative
Embeddable-friendly styling supports use inside other sites or tools without breaking layout
Shared header reduces duplicate nav work across HTML pages
Project Details
| Stack | HTML, CSS, JavaScript |
| Fonts | Inter (Google Fonts) |
| Icons | Font Awesome 6 |
| Hosting | Static site (deployed to Foster Allen County infrastructure) |
Screenshots
Add screenshots of the home page, events page, quarterly gatherings page, and mobile navigation here for your portfolio.
Client: The Foster Collaborative — Allen County, IN
Design & Development: viziedesigns.com