# Free boutique hotel website template > Free HTML boutique hotel website template for guesthouses and small inns, with rooms, a day and a stay form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Boutique hotel website template: one free HTML page for a small hotel or guesthouse, with a house history, three kinds of room, an hour-by-hour day, a table, outings, a photo grid of the town and a stay request form. Warm off-white and ink with terracotta accents. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it. - Page: https://8b.com/templates/ostro/ - Live demo: https://8b.com/templates/ostro/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/ostro/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/boutique-hotel-website-template - Download ZIP: https://8b.com/templates/ostro/boutique-hotel-website-template.zip - Template name in the repository: Hotel Ostro - At a glance: One 95 KB index.html with its CSS and JavaScript inside, 12 sections, 30 Unsplash photos credited in CREDITS.md, Host Grotesk and Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/boutique-hotel-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/boutique-hotel-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/boutique-hotel-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/boutique-hotel-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . Replace first the name everywhere, the place names, the rooms and prices, the staff and boat names and the guest-book line. Keep the section ids, the classes AGENTS.md lists, one room name per panel and the wordmark's --len at the name's letter count. Ask me for missing facts; never invent prices, policies, reviews or contacts. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/boutique-hotel-website-template my-site`. ### Boutique hotel website design prompt for any AI tool Paste this into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a boutique hotel site from scratch, or brief a designer. It writes this template's design as decisions, the opposite of default model choices; with the template itself, the short prompt above is enough. ```text Build a one page website for a small boutique hotel or guesthouse. Sections in order: nav with a Menu button and a Book a room link, opening with a headline and a small photo window that grows to full frame, house history with three photos, three kinds of room on a pinned stage, an hour by hour day, the table with a menu column, outings as stacked plates, a grid of fifteen tall photos of the town, FAQ, a guest book line, stay request form with dates, guests and room kind, footer wordmark. Type: Source Serif 4 light uppercase for headings and body text, Host Grotesk for small tracked capital labels and buttons. Colours: #f3efea warm off white ground, #191615 ink, #a3401a terracotta accents, #67625d captions, #fbfaf7 cards. Motion: one idea, the photo window opening to full frame and room photos wiping in; headings slide in by line. Respect prefers-reduced-motion. Do not use purple gradients, three icon cards or a centered hero with two buttons. Copy is short and concrete. Ask me for room kinds, sizes, nightly prices, season, check-in, meal times, outings, policies, address and contacts, and never invent them; leave visible placeholders. One primary action, Book a room, in the nav and again in the contact section. Check at 390 px width, tap targets of 44 px, visible keyboard focus and no console errors, and list every placeholder when done. ``` ## About A guesthouse, B&B, small inn or villa with a few rooms can use this as a hotel website design: it tells the story of the building, shows three kinds of room, walks through a day and ends with a request for dates. Once the form is connected, guests send dates, party size and a room kind and a person answers. Read each kind of room as a unit and it serves as a vacation rental website template. Vibe coding with Claude Code, Cursor or Codex starts with facts only the house has: room kinds, sizes and nightly prices, season, check-in time, meal times, outings, policies, address, phone and email. The demo invents all of them, along with the cook, the desk, the fisherman and the boat. With this boutique hotel website template for Claude Code, replace the name everywhere, then set the footer wordmark's --len to its letter count. Add or remove a room panel and its name together. Choose it as a website for boutique hotels when the pitch is a place: the building, the rooms, the day and the table. A business that sells fixed-date trips rather than rooms fits the [group tour](https://8b.com/templates/binario-tre/) template better. The weak spot is booking: it is a hotel booking template only in the sense of an enquiry form, with no availability calendar or rate engine, and one page has no room detail pages. Without code, 8B's builder is the other route. ## Design - Palette: #f3efea (page ground, full-screen menu, footer and the 07:00 day row), #191615 (text and low-opacity rules, the fill of dark buttons and of light buttons on hover, the opening's dark block, the 21:00 day row and the shade under the room names), #a3401a (room-kind labels, outing times, the form message, the hover fill of dark buttons and the 15:00 day row; blended into the 12:00 and 18:30 rows), #67625d (captions, field and fact labels, the menu head and small footer lines), #fbfaf7 (light buttons, the logo pill, room fact cards, outing plates, the 09:30 day row and text on dark grounds) - Fonts: Source Serif 4 (body text at 17px regular, the light uppercase display headings (weight 300, 40 to 96px in section headings, larger for the day phrases, room names and guest-book line), the spaced wordmark in the bar, the huge footer wordmark, and italic for one word of the first headline), Host Grotesk (weights 400 to 500: small tracked capital labels, buttons, form fields, room fact values, footer links, the questions and the medium-weight statements and quotes at 22 to 32px (the opening statement up to 54px)) Light uppercase serif headings, centred in most sections, sit over sections that each change shape: a ledger of three history photos in 6:3:4 columns, a full-screen room stage, six tall hour rows, a split section with a held photo beside a menu column, stacked outing plates, a five-column grid of fifteen tall photos, a two-column questions section and a split contact with the form held in view. Labels are small tracked sans capitals; body text is serif. In this hotel web design terracotta is kept for small things: room-kind labels, outing times and the afternoon band of the day section. Photos open from a small window and shift inside the rooms panels, a [gentle layer effect](https://8b.com/templates/parallax/), while headings slide in by line. ## Sections and motion - **Navigation** (navigation): fixed bar with a Menu button, the wordmark and a Book a room button; full-screen menu with eight links, address, phone and email. Motion: The bar slides away after about 24px of downward scrolling and returns on scroll up; the Menu button opens a full-screen overlay and pauses smooth scrolling while it is open. - **A house where the sea keeps the hours.** (opening): a headline cut as a window over a photo of the bay; scrolling opens the window to the full frame, then a statement and three facts arrive on the view. Motion: On load the headline rises line by line and the small photo window scales in while the photo drifts sideways in a loop; scrolling then opens the window to the full frame, drops the lede and buttons away and brings a statement and three facts over a dark shade. - **A customs house of 1908** (house): a history of the building as three dated photos with captions, then two paragraphs. Motion: The heading slides in by line, the three photos open from small windows, and the first also drifts inside its frame as you scroll. - **The sea rooms, the harbour rooms, the tower.** (rooms): a held full-screen stage of three room kinds: the next panel wipes in over the previous one while the heading line of room names slides and lights the current one. Motion: Pinned for about two screens of scroll: each next room photo wipes in from the right over the last while the heading line of room names slides sideways and lights the current name. - **A day kept by the sea** (hours): six hours of the day as tall rows; the whole section takes each hour's colour as it reaches the middle of the screen. Motion: The whole section takes each hour's colours as its row reaches the middle of the screen, and each big phrase drifts sideways as you scroll. - **Lunch is what the boats bring** (table): a large held photo beside a text column: four meals, two photos, the cook's quote and a booking button. Motion: The heading slides in by line, the held photo drifts a little inside its frame, and the two smaller photos open from windows. - **Out from the mole** (sea): four outings as plates that stack like cards: each held plate settles back, smaller and darker, while the next rises over it. Motion: Each outing plate sticks near the upper edge and shrinks and darkens as the next plate rises over it. - **Around the harbour** (harbour): a grid of fifteen small photos of the town around a held button; the tiles part to leave a clearing as each row passes the middle. Motion: Tile rows near the middle of the screen part sideways, and the middle column's tiles shrink, leaving a clearing around the held button. - **Before you come** (faq): seven questions in native details elements beside a heading and a phone note. Motion: The heading slides in by line; each question opens natively and its plus turns into a minus. - **From the guest book** (guestbook): one huge guest-book sentence that closes up from its two halves, with the guests' names. Motion: The two halves of the guest-book sentence slide in from opposite sides and close up as you scroll. - **Write to the house** (contact): a heading, an aperture photo, address lines and three ways to arrive, beside a stay request form. Motion: The heading slides in by line and the photo opens from a window. - **Footer** (footer): a letter sign-up, page links, contact links, a very wide wordmark that opens from a window and a base line. Motion: The wordmark opens from a narrow window to full width and settles from slightly enlarged as it comes into view. ## Good for - boutique hotel - guesthouse, B&B or small inn - holiday apartments or a villa with a few rooms - any small place with rooms, a day's rhythm, a table and a place around it ## Questions **Can I use this hotel website theme for a client's guesthouse?** Yes. It is one index.html under the MIT license, so a freelancer can ship it for a client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and CREDITS.md lists the Unsplash photos. Both typefaces are under the Open Font License. **Can guests book a room or check availability on it?** No. The Book a room buttons and room links jump to the stay request form, which asks for dates, guests, a room kind, name and email. As shipped it shows a thank-you line and sends nothing. Connect Formspree or Netlify Forms, or point the buttons at your booking engine. **How do I hand it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines from AGENTS.md, then tell the agent to read AGENTS.md before editing index.html. Give it the files, not the page address. To start from nothing, paste the boutique hotel website design prompt below into Lovable, v0 or Bolt, or give it to [Gemini in AI Studio](https://8b.com/templates/for-google-ai-studio/). **What must I keep when I change the rooms and the text?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists. The rooms heading needs one name per panel, in order. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it. **What happens on a phone, with reduced motion or without JavaScript?** On a phone the harbour grid has three columns instead of five and the sea plates put their text under the photo. With reduced motion, entrance and scroll animations and smooth scrolling stop, the page still reads in full and the bar still hides on scroll. Without JavaScript the Menu button does nothing; the footer keeps its page links. **Can I get a site like this without editing code?** Not this file; it needs an AI coding agent or a developer. [8B's AI website builder](https://8b.com/) designs a new site from a one-sentence description, in its own design. Designing and restyling are free; publishing with hosting, HTML export and AI edits in chat are Pro, $9 a month billed yearly. It also runs inside Claude and ChatGPT. ## Before publishing Replace: social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - Book a room button in the bar, the Book a room button on the first screen, the Ask for a sea room, Ask for a harbour room and Ask for the tower links, Book a table on the mole and Ask for the harbour map buttons, and the address link in the footer lead to #contact now; point them to your booking engine or reservation page, or keep #contact once the form is connected. - See the rooms link on the first screen lead to #rooms now; point them to keep, or a page with your room list. - Send the request button in the stay form lead to does not send anything: the form action is #, and section-script:contact checks the required fields and shows the thank-you line now; point them to a form service (Formspree, Netlify Forms), your own endpoint, or a link to your booking engine. - Subscribe button in the footer letter form lead to does not send anything: section-script:footer checks the email and shows the thank-you line now; point them to your newsletter service, or remove the form. - Instagram link in the footer lead to https://www.instagram.com/ (the Instagram home page) now; point them to your Instagram profile, or remove it. - Phone and email links in the menu, the questions note, the contact lines and the footer lead to tel: and mailto: placeholders now; point them to your real phone number and email address. - Both forms send nothing yet; the action is # and the thank-you lines come from scripts. - GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr; without them the page stays a plain static layout. - The rooms stage is held at the screen height for two screens of scroll with the three kinds, and the room names sit as one line at its bottom over a dark gradient, so a long name or a short window can crowd the text panel. - The nav hide-on-scroll runs even with reduced motion; the scenes do not. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).