# Free travel agency website template

> Free HTML travel agency website template for small group tour operators, with AGENTS.md for Claude Code and Cursor, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Travel agency website template: a one-page site for a small group tour operator that sells dated rail journeys. It has a three-stop route, four priced lines, a departures table with seats left, a FAQ and an enquiry form, in olive and cream with an amber accent. It is one HTML file an AI agent can adapt.

- Page: https://8b.com/templates/binario-tre/
- Live demo: https://8b.com/templates/binario-tre/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/binario-tre/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/travel-agency-website-template
- Download ZIP: https://8b.com/templates/binario-tre/travel-agency-website-template.zip
- Template name in the repository: Binario Tre
- At a glance: One 84 KB index.html with its CSS and JavaScript inside, 12 sections, 16 Unsplash photos credited in CREDITS.md, Schibsted Grotesk and TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); 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/travel-agency-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/travel-agency-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/travel-agency-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/travel-agency-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. This is a one-page site for <your tour or travel business: the journeys, stops and local hosts, price per person and what is included, departure dates with seats left, group size, office and how to book>. Replace the company, journeys, hosts, departures, prices, address and contacts first, then the photos and alt text. Keep every id, data-8b-section, data-8b-motion and data-8b-part, and change both --len values with the words. Ask me for any missing fact. Never invent prices, dates, licences, VAT numbers, 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/travel-agency-website-template my-site`.

## About

People who type travel agent websites or website for travel agency are often selling fixed departures, not hotel search. This template fits a tour operator, a walking holiday or retreat organiser, or a craft and food trip with local hosts. Four priced lines, seven dated departures and a private hire offer make it a travel agency website for trips that leave on set days.

Give index.html and AGENTS.md to Claude Code, Cursor or Codex. In a vibe coding session, start with the company, the four lines, the three hosts, the seven departures, prices and the office details, then the photos and alt text. The agent must keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors AGENTS.md lists. It must ask for dates, seats, terms and the licence line, never invent them.

Choose it when you sell dated departures at a price per person and want one scrolling page. It has no booking engine, so hotel or flight search needs other software. A product with a model range and a test ride fits the [electric moped](https://8b.com/templates/arco/) template better. The weak spot is the opening, which clips a full-screen layer on every scroll update and is the heaviest effect. Without code, 8B designs a new site.

## Design

- Palette: #465016 (olive: page ground, nav bar, opening plate, route, hosts, what-is-included section, private hire and footer grounds, and the first ground of the day section), #e6dcbf (cream: body text on dark grounds, ticket and form surfaces, the filled part of the route rail, cream sleeper bars), #1d2209 (near-black: journeys and FAQ grounds, text on cream tickets, dark buttons, hard offset shadows, the last ground of the day section), #5f6834 (lighter olive: route rail, FAQ dividers, and sleeper bars), #4a2f14 (brown: carriage screen, departures and contact grounds, and the middle ground of the day section), #d49a3a (amber: filled buttons, window frames, the route marker, entry times in the day section, rules, focus outlines)
- Fonts: TikTok Sans (display face: wide (140% stretch), uppercase, weight 800 headings, buttons, ticket prices and the footer wordmark), Schibsted Grotesk (body text at weight 400, subheads at 500, small uppercase labels at 700)

A fixed bar over ten sections. The opening is two screens: a landscape under a two-line title in an olive plate, then a carriage screen with a rounded window photo and three facts. Below come a rail with three stops, four ticket cards in two columns, three hosts in staggered columns, a sticky window beside three timed entries, a departures table, a ticket with a stub, a two-column FAQ, a tilted private hire band and an enquiry form.

The grounds alternate olive, near-black and brown, and the day section shifts from olive to brown to near-black as you scroll. Ticket surfaces have notched edges and most sit at slight tilts, and bands of skewed sleeper bars run under the opening, above the departures and over the footer.

## Sections and motion

- **Navigation** (navigation): fixed bar: numbered badge and name, six links, Ask for a seat button and a menu button; a menu panel with seven links; hides on scroll down. Motion: The bar slides up out of sight after about 24 px of downward scrolling and returns on scroll up or keyboard focus; this keeps running with reduced motion.
- **Slow trains. Three stops.** (opening): two screens: a full-bleed landscape under a two-line title, intro and buttons, then a carriage screen with a window photo and three facts. Motion: On load the landscape settles and the title lines rise, then the photo drifts sideways in a loop; as the carriage screen rises the landscape narrows by clip path into the window photo while the title lines slide apart.
- **The Tuscan line** (route): a rail with a marker that travels past three stops, each stop opening from behind slats. Motion: On scroll a marker travels along the rail past three stops, across on wide screens and down the left edge on narrow ones, filling the rail behind it, and eight slats over each stop fall away as it arrives.
- **Four lines for 2027** (journeys): four ticket cards with photo, stops, description, price and a Dates button. Motion: The four tickets start piled in the middle of the top row and deal out to their places as you scroll; on narrow screens each ticket drops from the one above.
- **Who waits at each stop** (hosts): three hosts with a photo of their hands at work, name, role and a quote. Motion: The heading glides in from the left, and each host photo frame opens upward from its bottom edge while the image settles from a zoom, once on arrival.
- **A day on the line** (day): a sticky window that changes its view beside three timed entries, on a ground that turns from olive to brown to dark. Motion: The window stays sticky beside three entries; as you scroll, the amber rule under each entry draws across, the ground moves from olive to brown to near-black and the window wipes to the next photo.
- **Departures 2027** (departures): a table of seven 2027 departures with seats left and price, under a band of sleeper bars. Motion: The band of sleeper bars above the table slides sideways with scroll and the heading glides in from the left.
- **One ticket covers it** (included): a ticket listing what is covered and a stub listing what is not. Motion: Six hole punches scale in one by one on the covered ticket, then the stub, which starts flush against its edge, swings away and tilts to its resting angle.
- **Before you book** (faq): six questions as native details in two columns under a heading. Motion: The heading glides in; each question opens as a native details element and its plus turns into a cross.
- **Hire the whole carriage** (private): a photo of a long table with a crossed paper band and ribbon offering a private line. Motion: As the section arrives the cream paper band rotates into its tilt, the notched ribbon swings across it and the photo eases down from a zoom.
- **Ask for a seat** (contact): office details and an enquiry form with line, month and number of travellers. Motion: The heading glides in and the carriage photo opens upward from its bottom edge.
- **Binario Tre Viaggi** (footer): a band of sleeper bars, the large wordmark, three columns and a legal line with the Design: 8B credit. Motion: The sleeper bars above the large wordmark slide sideways with scroll.

## Good for

- small group tour operator or travel agency with fixed departures
- craft, food or wine experience trips with local hosts
- retreat, walking holiday or cultural tour organiser
- any service that sells dated departures with seats left and a price per person

## Questions

**Is this one of the free travel website templates I can use for a client?** Yes. It is one index.html under the MIT license, so you can use it for your own tours or a client's at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and the photos are Unsplash images listed in CREDITS.md.

**Does the enquiry form send emails or take bookings?** No. As shipped it checks the fields, shows a thank-you line and sends nothing. Connect Formspree or Netlify Forms, or your booking system, before publishing. The seats-left column in the departures table is plain text as well, so update it by hand.

**How do I give it to Claude Code or Cursor?** Download index.html and AGENTS.md with the curl lines in the README, open the folder in Claude Code, Cursor or Codex and paste the prompt from this page. It is one plain file, so the agent edits it directly. Upload index.html, LICENSE and CREDITS.md when done.

**What has to stay when I change the text?** Keep every id, data-8b-section, data-8b-motion and data-8b-part, and the class names AGENTS.md lists. The two --len values count the characters of the longer title line and of the wordmark, so change them with the words. The departures table must stay a real table. Tickets and rows can be added; a fourth stop needs the three-column stop grid changed.

**Does it work with reduced motion or without JavaScript?** With reduced motion the scroll scenes, smooth scrolling and entrance animations are off and the page reads in full, while the nav still hides on scroll and hover effects keep running. Without JavaScript the menu button opens nothing on narrow screens and the day section shows one photo.

**Can I create a travel agency website without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and its engine designs a new site, its own design and not this template. Designing and restyling are free; publishing with hosting and SSL, 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, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

- Ask for a seat button in the nav, the link in the first screen and the Contact link in the menu lead to #contact now; point them to your booking or enquiry page, or keep #contact once the form is connected.
- See the 2027 lines button in the first screen lead to #journeys now; point them to keep, or point to your full tour catalogue.
- Dates buttons on the four journey tickets lead to #departures now; point them to the journey's own page or its booking page.
- Reserve links in the departures table (seven rows) lead to #contact now; point them to a booking link per departure.
- Plan a private line button in the private hire section lead to #contact now; point them to your group enquiry page.
- Booking terms link in the footer lead to #faq now; point them to your booking terms page.
- Send the enquiry button in the contact form lead to no submission; a script shows a thank-you line now; point them to your form service (Formspree, Netlify Forms) or your booking system.
- The enquiry form sends nothing: connect a form service or your booking system before publishing.
- The opening clips a full-screen layer on every scroll update to land on the window photo; it is the heaviest effect on the page and is skipped with reduced motion.
- The seats-left column is plain text; it does not update from a booking system.
- The opening photo is one 1600 px wide image with no srcset, used for both the full-bleed layer and the window, so phones load the large file.

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