# Free boat tour website template

> Free HTML boat tour website template for harbour cruises, sightseeing boats and charter skippers. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Boat tour website template: one free HTML page for a harbour operator who sells seats from a pier kiosk, with three timetabled trips, a five-place route, three boats, skippers and private charter. Near-black panels on a pale grey ground and one orange accent set the look. It ships with AGENTS.md, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/pierhead/
- Live demo: https://8b.com/templates/pierhead/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/pierhead/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/boat-tour-website-template
- Download ZIP: https://8b.com/templates/pierhead/boat-tour-website-template.zip
- Template name in the repository: Pierhead
- At a glance: One 92 KB index.html with its CSS and JavaScript inside, 12 sections, 29 Unsplash photos credited in CREDITS.md, National Park 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/boat-tour-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/boat-tour-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/boat-tour-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/boat-tour-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make it the site for <my boat firm: name, home pier, season, each trip with boat, times and fares, route places, boats with seats, skippers, charter prices, weather and dog rules, kiosk hours>. Replace trips and fares first, then the rest. Keep the ids, data-8b-section, data-8b-motion, data-8b-part and the selectors AGENTS.md lists, and set the footer wordmark's len to the new name's length. Ask me for what is missing; never invent fares, times, safety rules, licences, ratings 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/boat-tour-website-template my-site`.

### Boat tour website design prompt for any AI tool

Use this to build a boat tour site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions. With the template itself, the short prompt above is enough.

```text
Build a single-page website for a harbour boat tour operator who sells seats from a pier kiosk. Audience: visitors and families choosing a trip on the day. Sections in order: navigation, opening with the pitch and a facts row, three timetabled trips with departure times and fares, a five-place route, the boats with seats, onboard, the skippers, private charter, reviews, FAQ, contact, footer. Type: National Park only, weights 300 to 500; light tightly tracked headings, regular body, medium buttons, wordmark in spaced capitals. Colours: #eef0f2 page ground, #0c0d10 text and dark buttons, #070a0f dark panels, #ffffff text on dark, #545a63 secondary text, #ff8a1f as the only accent for hover fills, focus outlines and stars. Motion: one idea, rows and photos that slide and pan against each other as you scroll; switch it off under prefers-reduced-motion. Layout: near-black rounded panels on a pale grey ground, a fare card beside two photos per trip. No purple gradient, no three icon cards, no centred hero with two buttons. Copy: short and concrete, the owner's real facts. Ask for fares, times, address, hours, licences, weather and dog rules; never invent them; leave visible placeholders. One primary action, Book a seat, repeated on each trip and in contact. Mobile: check 390 px width, tap targets of 44 px, a full-screen menu. Acceptance: no console errors, visible keyboard focus, a list of every placeholder.
```

## About

A boat tour website has to say where the boat leaves, when, what a seat costs and what happens in bad weather. This page does it with three trips that carry departure times and fares, a route of five places and a weather answer in the FAQ. It also works as a boat charter website template: a section quotes private hire prices for up to sixty guests, and the structure fits wildlife runs, water taxis and sailing schools.

Vibe coding goes fastest when the agent gets the operator's own facts first, and this boat tour website template for Claude Code, Cursor or Codex rewards that. Replace the three trips, then the route places, boats with seats, three skippers, charter prices and the kiosk address. Keep every section id and the data-8b-section, data-8b-motion and data-8b-part attributes, and ask for ratings, licences, weather and dog rules instead of inventing them, since [made-up filler](https://8b.com/templates/not-ai-generated/) reads as generated. The demo's fares are in pounds and its Kelmouth details are invented.

Pick it for a local operator with a few named trips, fixed fares and boats worth showing. A firm selling dated group journeys from a departures table fits the [group tour operator](https://8b.com/templates/binario-tre/) template better. People who search for a boat rental website template usually want self-drive hire with an availability calendar, and this page has none. The trip Book links jump to the contact block until you point them at a ticket shop. Without code, 8B's builder is the other route.

## Design

- Palette: #eef0f2 (page background, the solid nav bar and the wordmark tab, the charter photo frame backing on phones), #0c0d10 (text and headings on the light ground, dark button pills, the wordmark in the nav tab), #070a0f (background of the opening frame and of the trips, onboard, reviews, contact and footer panels, and of the phone menu overlay), #ffffff (text on dark panels, the white button pills, the FAQ question cards and the phone card over the FAQ photo), #ff8a1f (the only accent: hover fill on buttons and round icon buttons, focus outlines, the five stars in the opening), #545a63 (secondary text on the light ground: route, fleet and charter intros, place and crew captions, FAQ answers), #a1a8b2 (secondary text on dark panels: trip lines and facts, onboard notes, review captions, footer text), #11161e (the dark cards inside panels (trip cards, review cards) and the colour behind photos while they load)
- Fonts: National Park (the only typeface, weights 300 to 500: light, tightly tracked headings, regular body text, medium-weight buttons and labels, and the wordmark in light spaced capitals)

A pale grey ground carries near-black rounded panels. Trips are three rows, each a dark fare card beside two photos, flipped on the second row. The route is a strip of five portrait cards, the fleet three ruled rows of a wide photo and four facts, and the crew a ruled list of three with a portrait each. Charter holds one photo frame beside four occasions. On desktop the wordmark hangs as a tab between the two link lists.

Dark rounded panels hold the trips, onboard, reviews, contact and footer. Orange shows up only on button and round icon hover fills, focus outlines and the five stars in the opening. One light face is set tight for headings, with spaced capitals for the wordmark.

## Sections and motion

- **Navigation** (navigation): wordmark in a tab between two link lists on desktop; on phones a Menu button opens a full-screen overlay with seven section links and a Book a seat link. Motion: The bar turns solid after a short scroll, slides away when you scroll down and returns on scroll up, and on phones the Menu button opens a full-screen overlay.
- **We leave the quay on the turn of the tide, round the light at Gull Point and bring you home with salt on your sleeves.** (opening): a full-bleed harbour photo behind one large statement with three small photo chips, a Book a seat button, a rating line and a link to the skippers. Motion: On load the statement and the facts row rise in, the three photo chips open from the centre one after another, and the background photo drifts sideways in a loop that pauses once the section is off screen.
- **Three ways out of the harbour** (trips): three trip rows: a card with name, boat, times and fare, and two photos beside it. Motion: Each row arrives shifted sideways with its cells spread apart, alternating sides, and closes into the grid as it scrolls up while the photos pan the other way.
- **The water we cover** (route): five place cards in a row that travels sideways while the section is held, with a wave running through the cards. Motion: The section is pinned and the row of five place cards slides sideways in a wave that lifts and tilts the cards away from the middle and lets each settle flat as it passes the centre.
- **Three boats, all older than their skippers** (fleet): three boats, each with a wide photo, a short description and four facts. Motion: Each boat photo opens upward from its bottom edge and then drifts inside its frame as you scroll.
- **Everything you need is already on board** (onboard): a heading split around a photo chip that grows into a picture filling the panel, then four notes about comfort. Motion: Pinned: a small photo chip between the two heading lines grows from a pill into the full picture while the lines move apart.
- **Three skippers, one rule: home before the tide turns** (crew): three skippers with a portrait, name, boat, a quote and their favourite stretch. Motion: The three portraits open upward on arrival and then drift inside their frames.
- **Take the whole boat** (charter): private hire: a held photo frame that changes picture beside four occasions with prices. Motion: The photo frame stays in view while each occasion comes to full strength at mid-screen and the next picture wipes up over the frame.
- **Heard on the way back in** (reviews): four comment cards stacked like a deck; each scroll step flings the top card away. Motion: Pinned: four comment cards sit as a deck and each scroll step flings the front card sideways with a turn.
- **Before you come aboard** (faq): a held photo with a phone card beside six questions (native details). Motion: The photo and phone card stay in view beside the questions and the photo drifts as you scroll.
- **Your seat is waiting at Pier 3** (contact): a big closing heading with an email sign-up, two tilted photo cards and the kiosk details. Motion: The two photo cards swing in from opposite tilts and settle as the panel comes into view.
- **Footer** (footer): short company note, three link columns, the wordmark across the width and the copyright with the Design: 8B credit. Motion: The wordmark rises out of a mask once as it enters.

## Good for

- harbour boat trips or sightseeing cruises
- wildlife watching, ferry or water taxi operator
- charter skipper or sailing school with a few vessels
- any local tour business with a few named trips, fares and guides

## Questions

**Is this boat tour website template free to use?** Yes. The code is MIT licensed and sits on [a single page of trips and fares](https://8b.com/templates/one-page/), the photos are Unsplash images credited in CREDITS.md, and the font is open licence. 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.

**How do I give the template to Claude Code, or use a boat tour website design prompt?** Put index.html and AGENTS.md in one folder, open it in the agent and paste the prompt above. In Cursor, [start in Plan mode](https://8b.com/templates/for-cursor/). Lovable, v0 and Bolt write their own code, so paste the boat tour website design prompt from this page into them instead. AGENTS.md lists what to replace and which facts to ask for.

**What must stay when I swap in my own trips?** Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes. Keep each trip card and its two photos as direct children of the .trip row, and each place inside its .place__lift wrapper. Set the footer wordmark's len to your name's length.

**Can passengers book and pay on this site?** No. The Book links and the Book a seat button jump to the trips or contact sections, and the email sign-up form posts to # and sends nothing. Point the links at your ticket shop, and connect the form to Mailchimp, Formspree or Netlify Forms or delete it.

**What changes with reduced motion or without JavaScript?** With reduced motion entrance and scroll animations and smooth scrolling are off, so route and reviews become grids; hover fills and the nav hiding still run. Without JavaScript the phone Menu opens nothing; the questions still open.

**Can I get a site like this without editing code?** Yes, in another way. [8B's AI website builder](https://8b.com/) designs a new site from a sentence, in its own design rather than this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

## Before publishing

Replace: social preview image, favicon, phone number, contact form (sends nothing yet), email address and social media links, plus the invented demo facts (prices, dates, addresses).

- Book a seat button in the first screen lead to #trips now; point them to your online ticket shop or booking page, or keep it on the trips section.
- Plan your trip button and the three Book links (Book the Loop, Book the Light, Book the Sail) in the trips section lead to #contact now; point them to the ticket page of each trip on your booking system, or keep them on the contact block.
- Ask about a charter button in the charter section lead to #contact now; point them to a charter enquiry form or an email link.
- Book a seat link in the menu lead to #contact now; point them to your online ticket shop.
- Gift vouchers link in the footer lead to #contact now; point them to your voucher page, or remove the link if you sell none.
- Sailing news email form in the contact block lead to action="#" with method post, nothing receives the address now; point them to your mailing list form endpoint (Mailchimp, Formspree, Netlify Forms) or remove the form.
- Privacy and terms of carriage link in the footer lead to #footer (the footer itself) now; point them to your privacy policy and terms of carriage page.
- The sailing news form does not send anything: it posts to # until you connect it to a service.
- The route and reviews sections are pinned: the route holds for about 1.15 times its overflow width and the reviews for roughly 1.65 screen heights, which feels long on short laptop screens.
- gsap, ScrollTrigger, SplitText and Lenis load from a CDN before the motion scripts; offline they are missing and the motion does not run.

## 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).