# Free glamping website template
> Free HTML glamping website template for cabin, dome and tent stays on a few sites, with a stay finder. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Glamping website template: one free HTML file for a glamping or remote cabin business that rents a handful of stays on a few sites. It has a stay finder, ridge and stay windows, supper, hosts and a booking request form. Indigo dusk, ember orange and frosted cards sit over photos, and AGENTS.md lets Claude Code, Cursor or Codex adapt it.
- Page: https://8b.com/templates/farlight/
- Live demo: https://8b.com/templates/farlight/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/farlight/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/glamping-website-template
- Download ZIP: https://8b.com/templates/farlight/glamping-website-template.zip
- Template name in the repository: Farlight
- At a glance: One 127 KB index.html with its CSS and JavaScript inside, 13 sections, 23 Unsplash photos credited in CREDITS.md, Gabarito and Onest from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 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/glamping-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/glamping-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/glamping-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/glamping-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, ridges, stays, prices, hosts and guest notes. Keep the section ids and the classes AGENTS.md lists, set the footer wordmark's len to the new name's length, and keep the finder and form options identical. Ask me for missing facts; never invent prices, 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/glamping-website-template my-site`.
### Glamping website design prompt for any AI tool
Paste this glamping website design prompt into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a cabin or glamping site from scratch, or hand it to a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.
```text
Build a one-page website for a glamping business that rents a handful of cabins and domes on a few remote ridges. Audience: couples and small groups who want a dark-sky night away. Static HTML, CSS and a little GSAP; no framework.
Sections in order: floating nav, opening, four ridge windows, four stays with prices, five moments of one night, supper, four hosts, a dark-sky pledge, getting there, guest notes, questions, booking request form, footer.
Type: Gabarito weight 500 for headings, prices and names; Onest 400 to 600 for body, chips, buttons and form fields.
Colours: #eef0f7 page ground, #211c55 indigo text and buttons, #0d0b27 night ground, #f2783f ember orange as the only accent, #b8c1ee periwinkle on dark, #e7b6cb dawn rose for the contact ground.
Motion: one idea, a single night. The section ground blends between the five moments of light as you scroll, and pledge lines burn ember as they pass. Respect prefers-reduced-motion.
Avoid: purple gradients, three icon cards, a centred hero with two buttons, stock-photo smiles. Use rounded photo windows with thick white borders, frosted cards and a floating pill bar.
Copy: short and concrete. Ask me for site names, altitudes, nightly prices, supper price, policies, hosts, phone and address; never invent them or reviews. Mark every placeholder.
One action: Book a stay, in the nav and repeated down the page, leading to the booking form.
Phone: check at 390 px, 44 px tap targets, no horizontal scroll.
Done when: no console errors, visible keyboard focus, and you list every placeholder.
```
## About
Glamping websites for a few sites share one job: show each place, price the nights and take a request. This page does that for cabins, domes, pods and canvas suites, and a dark-sky or stargazing retreat can keep the pledge section as it is. Anyone planning camping website design or campsite website design can reuse the structure by swapping the stays for tents and pitches.
As a glamping website template for Claude Code or Cursor, the [vibe coding routine](https://8b.com/templates/vibe-coding/) starts with the facts only the owner has: site names, altitudes and drive times, nightly prices per stay, the supper price, policies, host names, phone, email and address. Replace those first, then the 23 photos and the six invented guest notes. Keep the section ids and the classes AGENTS.md lists, and set the footer wordmark's --len to the new name's length. A new hero photo needs its own cut-out outline in the opening script.
This base suits a business that sells a few special places and wants a calm, nocturnal look, including a vacation rental website template for a handful of cabins. A business that rents out equipment with prices by the hour, day and week, such as an [e-bike hire](https://8b.com/templates/kickstand/) shop, fits a price-table layout better. The weak spot is booking: there is no availability calendar or payment, and the form sends nothing yet. Without an agent, 8B can design a site from a sentence.
## Design
- Palette: #eef0f7 (page ground of the first screen, ridges, stays, supper, getting-there, guestbook and questions sections, and the fill of the form fields), #211c55 (body text, filled buttons, the rail icons, step discs, the Firelight moment ground and the text on the rose contact ground), #ffffff (photo frame borders, white cards, the pill buttons, the current rail mark, the hosts section ground and text on dark grounds), #0d0b27 (the second screen, menu panel, pledge and footer grounds, the Starlight moment and the start of the contact ground), #f2783f (the only accent: round button discs, the top of the logo mark, arrow strokes, the open question sign and the pledge lines while they burn), #57547a (lead paragraphs, field labels, captions and secondary card text), #b8c1ee (periwinkle for pledge lines after they switch off, the footer wordmark, the shuttle note band, the status line and muted text on dark grounds), #e7b6cb (dawn rose for the Last light and First light moments, the contact ground and the pink glow over the first photo), #323d80 (the Blue hour moment ground and the base behind the first photo window)
- Fonts: Gabarito (display face, loaded in weight 500 only: the first heading, section headings, card titles, ridge, stay and moment names, prices, big figures and the menu links), Onest (body face in weights 400 to 600: paragraphs, small labels, chips, buttons at 500, form fields and the step numbers at 600)
A floating pill bar and a full-screen menu frame the page. Rounded photo windows with thick white borders carry most sections, with white or frosted cards over them: a stay finder pill, spec chips, price tags and round thumbnails. Section headings sit in two columns on desktop. Four ridge windows share one frame, the four stays alternate card left and right, hosts stand as four tall pills with every second one dropped, and the guestbook is a staggered three-column grid.
The night section's ground blends from dawn rose through indigo to near black and back as you scroll, and the contact section turns from night to rose as it arrives. Ember orange stays small: button discs, the logo mark's sun, open question signs and burning pledge lines.
## Sections and motion
- **Navigation** (navigation): a floating pill with the logo mark and name, a Book a stay pill and a menu button; a full-screen menu panel with eight section links, hours and phone. Motion: The bar slides away when you scroll down and returns on a scroll up; the menu opens as a full-screen panel and Escape closes it.
- **Out Past The Lights** (opening): a dusk photo window with the heading set behind a cabin, a stay finder pill, floating cards and a rail; below it the sentence "Lights Out. Sky On.". Motion: On load the heading rises and the photo settles, then the photo drifts sideways and a pink glow breathes in loops; over about one screen of scrolling the window widens to full bleed, the floating controls drift off, the heading sinks behind the cabin and the night sky photo takes over.
- **Four Ridges, One Rule** (ridges): four ridge windows held in one frame, each opening from a horizon slit over the last, with a card of name, place and facts. Motion: Pinned for about three screens of scrolling: each next ridge window opens from a horizon slit over the last while the previous one shrinks and dims, and the cards swap.
- **Four Ways To Sleep Outside** (stays): four stay windows, each with a frosted spec card gliding across the photo. Motion: Each stay's card glides across its photo from the far side while the photo pans a few percent; on phones the card rises instead.
- **One Night, Five Lights** (night): one night in five stages; the section ground follows the sky from last light to first light. Motion: The section ground blends between the colours of the five moments as you scroll, and each photo rises a little into place.
- **Supper Comes Up The Ridge** (table): the supper box: a photo, a frosted Fire Kitchen card and a Tonight's Box list with a price. Motion: The heading rises, the photo window opens from a horizon slit and the two cards glide in from their sides.
- **One Host Per Ridge** (hosts): four hosts, one per ridge, as tall pill portraits. Motion: Each portrait grows from a small round shape into a tall pill, one after another, and its name and ridge line rise in.
- **We Keep It Dark** (pledge): five dark-sky rules as large lines that burn ember and switch off as they pass the middle of the screen. Motion: Each rule burns ember with a glow as it enters and fades to periwinkle as it crosses the middle of the screen, while its note turns from white to periwinkle.
- **The Last Six Miles** (arrival): a road photo with a frosted three-step route card and a shuttle note. Motion: The heading rises, the road photo opens from a horizon slit and the route card and shuttle note glide in.
- **Left In The Guestbook** (notes): six guestbook notes as frosted cards drifting at three speeds over a night photo. Motion: The six guest cards rise into place at different speeds by column while the night photo settles from a zoom.
- **Before You Drive Out** (faq): a host photo and phone line at the left, six questions at the right (native ). Motion: The heading rises and the host photo opens from a horizon slit; the questions are native details elements.
- **Book The Quiet** (contact): a booking request form on a card beside phone, email and office; the ground turns from night to dawn rose. Motion: The ground blends from night to dawn rose as the section arrives and the big heading rises from behind its rule line.
- **Footer** (footer): a short line, link columns, contacts and a huge wordmark. Motion: The wordmark rises on scroll.
## Good for
- glamping site with cabins, domes, pods or tents
- remote cabin, treehouse or camping retreat with a few units
- boutique lodge, dark-sky or stargazing destination
- any business that sells a few special places and wants a calm, nocturnal, photo-led look
## Questions
**Is it a free camping website template I can reuse for a campsite?** Yes, as a base. The file is MIT and free for client work. Swap the four ridges for your sites and the four stays for tents, pitches or pods; the demo names are invented. As a campsite website template it has no map or pitch picker.
**Can it work as vacation rental web design for a few cabins?** Yes, for a handful of units. Four stay types with nightly prices, a supper add-on, hosts and a request form cover a small owner. It has no availability calendar, payment or channel manager, so a larger portfolio needs a booking system that the buttons link to.
**Does the stay finder or the booking form book anything?** No. Check dates copies the chosen ridge, stay and nights into the booking form and scrolls to it. The form checks name and email, shows a thank-you line and sends nothing. Connect Formspree or Netlify Forms, or point the buttons at your own booking page.
**What glamping website design prompt works in Claude Code, Cursor or Codex, and what must stay?** Put both files in a folder, have the agent read AGENTS.md, then paste the short prompt. Lovable, v0 and Bolt take the full design prompt; Replit [imports the public repository](https://8b.com/templates/for-replit/). Keep the section ids, data-8b-section, data-8b-motion and data-8b-part attributes, listed classes, the header comment and 8B meta tag. Keep the Design: 8B footer link unless the owner removes it.
**What happens on a phone, with reduced motion or without JavaScript?** On a phone the left card and side rail are hidden and stay cards overlap their photos. With reduced motion, entrance animations, [layered scroll motion](https://8b.com/templates/parallax/) and smooth scrolling are off and the ridges stack as plain windows; hover fills and the hiding bar still run. Without JavaScript the menu cannot open; the eight footer links remain and questions still open.
**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/): describe the site in a sentence and its engine designs a new site, not 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 through the 8B connector.
## Before publishing
Replace: social preview image, favicon, phone number, contact form (sends nothing yet) and email address, plus the invented demo facts (prices, dates, addresses).
- Check dates button in the stay finder of the first screen lead to does not search: a script copies the chosen ridge, stay and nights into the booking form and scrolls to #contact now; point them to your booking engine or availability page (pass the three choices as parameters), or keep it as a shortcut to the request form.
- Book a stay buttons in the header and the menu lead to #contact now; point them to your booking page URL if you take bookings elsewhere, or keep it on the request form.
- Ask for dates buttons under each of the four stays lead to #contact now; point them to a booking link for that stay, or keep them on the request form.
- Add supper to a stay button in the supper section lead to #contact now; point them to your supper add-on or extras page, or keep it on the request form.
- Book a seat button under the route in the getting-there section lead to #contact now; point them to your shuttle booking page, or keep it on the request form.
- Send request button of the booking form lead to a script checks name and email and shows a thank-you line; nothing is sent (the form has action="#") now; point them to a form service (Formspree, Netlify Forms) or your booking system, or remove the form and keep the phone and email.
- Phone links in the menu, the questions section, the contact section and the footer; email links in the contact section and the footer lead to tel: links and mailto: links now; point them to your own phone and email.
- On phones the white "Find Your Own Ridge" card is hidden under 720 px, the section rail only appears from 1024 px, and on phones shorter than 700 px the first-screen paragraph is hidden too.
- The ridges frame is pinned and the opening is a sticky screen of at least 560 px, so short or landscape screens show tightly packed windows.
- gsap, ScrollTrigger, SplitText and Lenis load from jsDelivr at the end of the body; if the CDN fails, the page still reads in full but stays still. The three 46 px round thumbnails in the first screen carry a srcset of 1020 and 1290 px images, and three stay photos repeat their src attribute: trim both when you swap photos.
- The opening stage is sticky for one screen even with reduced motion, so the night screen slides over the first photo; the heading then stays over the photo without the cut-out.
## 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).