← All workConcept project · Café website

Bloom & Brew

A demo café website with a readable menu, clear opening hours, an illustrated map and a table-booking form. The café is fictional.

Bloom & Brew is a fictional business. This is a KP Labs concept project, built to show what we can do, not a real client's website.

View live demo

The top of the Bloom & Brew café demo website at desktop width, showing the heading, a photo and a Book a table button.

The brief

Bloom & Brew is a fictional café. We made it as a KP Labs demo to show what we can build for small hospitality businesses. A café website has four jobs: show a menu people can read, make the opening hours obvious, say how to find the place, and give people a way to book a table.

What we built

A one-page site, plus a custom page-not-found screen.

  • A menu you can read on a phone.
  • Opening hours that are easy to find.
  • A small illustrated map of the area, in place of an embedded map.
  • A booking form that only offers times the café takes bookings, and won’t accept a past date or a Monday, when the café is closed. Each problem is shown next to its field, and the form tells screen readers how many there are.

The booking form is a demo. It makes no network request and saves nothing, so no booking is made. It shows on screen what was entered, then stops.

What a real café would get

A plain form can’t take real bookings. For a real café we would connect a booking service the café already uses, or send form enquiries to the café by email with spam protection and a short privacy note. Real availability, cancellations and reminders need a booking service.

Light and private

The site has no analytics and loads nothing from other companies’ servers. Its font and photos are hosted with the site. It is marked as a demo throughout and hidden from search engines, so nobody mistakes it for a real business.

Key screens

The Bloom & Brew home page on a phone, with the demo banner, the café name and a Book a table button.
The Bloom & Brew mobile menu open on a phone, listing the page sections to jump to.
The Bloom & Brew booking form on a phone with an error summary and a message beside each field that needs fixing.
The Bloom & Brew demo confirmation on desktop, saying that no booking has been made because this is a demo.
The Bloom & Brew page-not-found screen on desktop, with a link back to the home page.

Built with

  • Plain HTML
  • CSS
  • Vanilla JavaScript
  • No framework
  • Self-hosted font and images

Want something like this?

Tell us about your business and we'll send a fixed quote after a free chat.

Get a free quote