Overview
A Divine Encounter Cafe is a faith-based breakfast and brunch establishment in Fort Wayne, Indiana, built on a mission to serve the community with wholesome food and a welcoming atmosphere. The website was designed and developed to reflect the cafe's values—warmth, hope, and fellowship—while providing visitors with an easy-to-navigate, modern online presence.
Live Site: View Live Website (Add deployed cafe URL when live — e.g. adivineencountercafe.com)
The Challenge
The cafe needed a website that would:
- Communicate its mission — Founded during the pandemic in obedience to faith, the site needed to convey the spiritual and community-focused nature of the business
- Build trust — Share the owner's story and testimony so visitors feel connected before they arrive
- Display the menu — Present both breakfast and lunch offerings in a clear, scannable format
- Provide essential info — Hours, location, and contact details for visitors planning a visit
- Work on all devices — Be fully responsive for diners browsing on phones, tablets, and desktops
The Solution
Design Approach
The design leans into Christian elements while staying clean and modern. Key decisions included:
- Color palette — Gold, sage green, and cream tones inspired by the cafe's logo, creating a warm, inviting feel that aligns with the brand
- Typography — Cormorant Garamond for headings (elegant, serif) and Source Sans 3 for body text (readable, professional)
- Visual hierarchy — Clear sections with generous whitespace and subtle animations to guide the eye without overwhelming content
Key Features
| Feature | Description |
|---|---|
| Hero section | Large logo, tagline, and call-to-action against a soft gradient background with a subtle light-beam effect |
| Transparent navbar | Navbar starts transparent over the hero and becomes solid on scroll for a polished, modern feel |
| Our Story | Origin story, quote, and Faith-Founded card explaining the cafe's mission |
| Meet Our Founder | Full-width section with owner photo placeholder and bio/testimony from Betty Shuman |
| The Experience | Three cards highlighting Wholesome Food, Filled With Joy, and Community Connection |
| Hours & Location | Operating hours (Wed–Sun, 8:00 AM–2:00 PM) and address at 1019 East Coliseum Blvd., Fort Wayne, IN |
| Social proof | Stats for 100% recommendation rate, 50+ reviews, and 3.1K+ followers with animated counters |
| Menu page | Breakfast/Lunch toggle with full menu items, sides, drinks, kids menu, desserts, and specialty drinks |
Technical Implementation
- HTML5 — Semantic markup with accessibility in mind (ARIA labels, alt text)
- CSS3 — Custom properties (variables), responsive grid/flex layouts, CSS animations
- JavaScript — Scroll-triggered navbar state, mobile menu toggle, counter animations, breakfast/lunch menu toggle
- Responsive design — Breakpoints at 900px, 768px, and 480px for smooth adaptation across devices
Pages
- Home — Hero, Our Story, Meet Our Founder, Experience, Hours & Location, Social Proof
- Menu — Toggleable Breakfast and Lunch sections with full menu content
Results & Outcomes
Logo, colors, and messaging align across the site
Easy access to Menu, Our Story, Hours, and contact info
Hamburger menu and stacked layouts on smaller screens
Links to Facebook, phone, and email for visitors to connect
Project Details
| Stack | HTML, CSS, JavaScript |
| Fonts | Cormorant Garamond, Source Sans 3 (Google Fonts) |
| Hosting | Static site (ready for deployment) |
Screenshots
Add screenshots of the home page, menu page, and key sections here for your portfolio.
Client: A Divine Encounter Cafe — Fort Wayne, IN
Design & Development: viziedesigns.com