Steephour is an afternoon tea salon website template for introducing the room, explaining the service and helping guests plan a visit. It brings classic afternoon tea, a shorter cream tea and a more generous savory service into one connected experience, with dedicated pages for the menu, tea collection, celebrations and private gatherings.

The design takes its cues from the tea table: porcelain-colored space, burgundy display type, soft pink panels and golden accents. Large food and salon photographs sit alongside original line illustrations of the service stand, place setting, tea profiles and room arrangements. The result gives a salon room to express its character while keeping prices, timings, party sizes and arrival details easy to find.

Guests can begin with a service, an occasion or a flavor they already enjoy. Contextual links carry relevant choices into a multi-step table or private-room request, where guests review their details before reaching a finished demonstration outcome. That frontend journey is included; receiving real requests requires a buyer-connected service, and the salon confirms bookings separately.

An afternoon with a clear beginning

The service pages explain what comes to the table, how long to allow and what distinguishes each visit. Classic tea introduces the sequence of savories, warm scones and patisserie. Cream tea gives the smaller service its own setting, while savory tea describes a different balance of courses. Children's tea and dietary guidance help guests prepare useful questions before making arrangements.

The tea collection offers a searchable introduction to black teas, green and oolong teas, and botanical infusions. On the home page, a flavor cabinet lets visitors move between brisk, fresh and soft selections without needing specialist tea vocabulary. Individual tea pages pair tasting descriptions with food suggestions and serving context.

Birthdays, showers and private dining have their own pages, supported by room information and an illustrative seating plan. First-visit, arrival and salon pages bring the practical details together, so the request form follows a useful introduction to the experience.

What is included

• 25 HTML pages covering the salon, tea services, seasonal menu, tea collection, occasions, private dining, visitor guidance, requests, contact, privacy and a custom error page.
• A ready-made website plus self-contained editable HTML, CSS and vanilla JavaScript source.
• 3 color schemes: Porcelain, Camellia and Blue Hour, each with Light, Dark and Auto appearance.
• 9 original AI-generated photographs supplied in 3 responsive WebP sizes, with editable alternative text and media paths.
• Original SVG illustrations, a cup identity mark, favicon and 6 navigation icons that use the site's theme colors.
• Locally hosted Gloock and DM Sans fonts with their license files.
• A buyer guide covering content, styling, optional sections, images, source commands and the live receiver contract.

Features

• Service and occasion links that preserve relevant choices when opening a request.
• Party-size and room-capacity checks, service-day selection, contact validation and a review step.
• Received, rejected, unavailable and uncertain request states, with bounded retry handling and a reference for the demonstrated outcome.
• Search results, an empty result state and reset controls for the tea collection.
• Native navigation disclosures, expandable questions and responsive layouts for wide desktop and smaller screens.
• A separate preview Options layer for exploring color schemes without adding marketplace controls to the production site.

Accessibility in the details

Semantic landmarks, ordered headings, a skip link, descriptive image alternatives and named form controls give the pages a clear structure. Keyboard users can open navigation, change appearance, search teas and complete the request flow. Validation identifies the affected fields and moves focus to the relevant step; search and request feedback expose meaningful status changes.

The design includes visible focus treatment and reduced-motion behavior. Without JavaScript, navigation disclosures and questions remain usable, the tea selections remain readable and the request page explains the available fallback. Light and dark appearances retain the same content and controls.

Make the salon your own

Business data keeps services, prices, hours, rooms and contact configuration together. Page fragments hold the editorial content, while shared partials own the header, footer, appearance controls and illustrations. Semantic color roles let you adjust a whole scheme coherently, and explicit media entries keep replacement images independent of their original filenames.

The source includes readable styles and scripts, matching minified production files, local development tools and build and browser checks. The guide explains how to reorder optional content, preserve connected components and rebuild the site, giving a new salon a practical starting point for its own menus, photography and voice.