Design simulation: content, reviews and images on the demo site are for illustration only
Website kit Case study · The MD Method

The Alchemist’s Yard

A seven-page website kit for a courtyard of small businesses, with an interactive facade, a vinyl music player, advisor chat, coupon, video and SEO schema. Standard licence, no dependencies, ready to edit.

Made for: cafés, apothecaries, wellness studios, wine bars and any place with several rooms and one story.

Get this kit View live demo (opens in a new tab)
7Designed pages
0External libraries
9Screen widths tested
0Horizontal overflows
Signature feature

Step inside the courtyard

The home page opens on an interactive facade. Four buildings, four businesses. Hover or tap a building and its windows light up. The text panel below changes to match: it takes the building’s colour and a pointer slides under that exact building, so you always see which business you are reading about. One tap switches the whole scene to evening. Drawn in HTML and CSS, no images needed.

Interactive facade on the home page in daylight with the roastery building lit
Daylight: the chosen building lights up, and the panel below takes its colour
Interactive facade in evening light with the cellar building lit and a moon in the sky
Evening light: one tap, the whole courtyard glows
Interactive facade on mobile in evening light
On mobile
How it looks

From desktop to the palm of your hand

Home page of The Alchemist's Yard on desktop, with a one-line headline and a vinyl player in the corner
Home: one-line headline, quick actions and vinyl player
Product page on desktop with gallery and purchase details
Smart product page: benefits, fit guide, comparison and questions
About page on desktop with facts and figures
About: a full-width photo where rain turns to sun, by itself or on tap
Eatery menu page on desktop with a photo of a candlelit courtyard in an arch and four colour-coded filter buttons
Eatery: an arch of evening light with twinkling bulbs, and colour-coded filters
Eatery page with four painted barrels in green, red, yellow and blue that work as menu filters
Eatery: four flower barrels that filter the menu when tapped
Home page After dark band with a night alley, string lights and a headline
Home: an After dark band with twinkling lights and a lantern that follows the pointer
FAQ page opening with a hand-painted courtyard lane and three clickable pins
FAQ: a watercolour that glides sideways as you scroll, with three clickable doors
Home page on mobile
Home on mobile
FAQ page on mobile with an apothecary shelf photo above the painted courtyard lane
A lit apothecary shelf, then the painted lane
Watch

A morning in the yard

A short sample film made for the design simulation.

The visual world

Five scenes, one courtyard

Colourful ochre, green and terracotta building facades in London lit by low golden sunlight
Rows of amber apothecary glass bottles with vintage labels on a dark wooden shelf lit by candles
Copper and black coffee roaster pouring warm roasted beans into a cooling tray in a London roastery
Bright empty treatment room with a massage table, wooden cabinets and large green plants
Glass of red wine and cheese on a wooden table beside a rainy London window
What the kit includes

A complete kit, not just a home page

These features live in the kit, not on this page. Open the live demo to try the advisor chat, coupon, vinyl player and quick actions yourself.

  • Seven pages: home, post, product, menu, about, FAQ and contact, plus a 404.
  • Smart action buttons: WhatsApp, table booking, Waze, delivery, ride, social and coupon.
  • Interactive facade: four buildings, four businesses, with an Evening light mode.
  • Weather hero: a full-width photo where rain turns to sun by itself, with a button to take over.
  • Eatery hero: a photo in an arch with twinkling string lights, a lantern that follows the pointer and a rotating reservation badge.
  • Menu filters: four colour-coded buttons that sort the menu in one tap.
  • Barrel picker: four painted flower barrels that do the same job, one tap and the menu follows.
  • After dark band: a night photo with twinkling lights, reused as the 404 page.
  • Painted yard: a watercolour that slides sideways as you scroll, with clickable pins.
  • Advisor chat: rule-based answers, with an option to connect an AI engine.
  • Vinyl player: one tap plays a Spotify playlist, no window opens.
  • Newsletter signup: a coupon code is revealed after subscribing.
  • Video: an embed for YouTube, TikTok or Instagram that loads only on click.
  • Styled Google reviews: a block to fill with the business’s real reviews.
  • Organic search: schema.org markup on every page, clean headings and setup notes.
  • Clean code: plain HTML, CSS and JavaScript, with EDIT comments wherever you customise.
  • Documentation: a README with a three-step quick start and a single-project licence.
Ready to use

Get The Alchemist’s Yard

Two ways to take it home: download the kit and set it up yourself, or let us build it into your site.

  • Standard marketplace licence: the licence terms on the marketplace listing apply.
  • Plain HTML, CSS and JavaScript with no third-party dependencies in the download.
  • Images and reviews on the demo site are illustrative. Replace them with your own content.

Turnkey: we set it up for you

We adapt the kit to your brand, load your content, connect the forms and launch it on your WordPress site. Tell us a little about your project and we will reply with a quote.

Scroll to Top