Free outdoor gear rental website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: kitfell.md, data: kitfell.json

Outdoor gear rental website template: first screen on a phone

About this outdoor gear rental website template

Outdoor gear rental website template: one free HTML file for a shop that hires out tents, packs and boots by the night. It has six priced shelves of kit, four ready packs with a nights switch, a fitting section and a route table, on pale blue. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 99 KB index.html with its CSS and JavaScript inside, 12 sections, 29 Unsplash photos credited in CREDITS.md, Golos Text and National Park from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

This equipment rental website template fits any shop that lends gear by the night and wants to show prices openly. A camping hire shop, an outfitter and a ski or kayak hirer can reuse the shelves, the packs and the hire steps. People who look for a camping template or a camping website design usually want trips, and here the route table and customer trips carry that part.

Vibe coding with Claude Code, Cursor or Codex starts with the facts only the shop has: shelf prices, pack contents, hire terms, delivery area and hours. The demo invents them all, with the Lake District routes, quotes and company number. Change each pack price in the visible text, its value attribute and its three data-price attributes, and keep the id on every kit card, because the shelf index is built from the card titles and ids.

It suits a shop with a fixed price list, bundles and a hands-on fitting. A venue that sells timed sessions, lessons and parties, such as a skating venue, needs a different base. The weak spot is booking: every Book kit button jumps to the visit card, and no calendar shows free dates. Without code, 8B can design a new site instead.

Good for:

Outdoor kit hire or camping gear rental shopBike, ski, kayak or other equipment rentalAdventure outfitter or guided trips companyAny shop that rents out items by the night with fitting, care and set bundles

Turn the outdoor gear rental website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/outdoor-gear-rental-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/outdoor-gear-rental-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/outdoor-gear-rental-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/outdoor-gear-rental-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my hire shop: name, town, shelves of kit with nightly prices, ready packs with prices for 2 nights, 3 nights and a week, hire terms, deposit and damage rules, delivery area, hours, phone, email, company number>. Replace first the shop name, the Lake District routes, prices and quotes. Keep the section ids, the classes AGENTS.md lists and the three data-price values on each pack. Ask me for missing facts and never invent prices, terms, routes, reviews or contacts.

In a terminal

npx degit 8bsite/outdoor-gear-rental-website-template my-site

Outdoor gear rental website design and motion

Palette

#ecf1f5 page ground and the opening screen#06132e text, the packs band, the footer and the full-screen menu#2b3bff the only accent: button fills on hover, kit prices, the shelf index marker, focus outlines#b4ddf8 background of the care section#ffffff kit cards and other surfaces, text on navy#4c5a70 descriptions under headings, table headings, detail labels and unselected shelf links#a7b4ca small text on navy: the packs intro and legend, field placeholders, the form message and the legal lines#ddebf6 round buttons, small badges, photo backing and link underlines

Fonts

National Park: headings and the h1 at regular weight, card titles and pack prices at medium, the logo and the footer wordmark at 800
Golos Text: body text, labels, kit prices and form fields at regular and medium weights, buttons at semibold 600

Rounded cards and pill buttons carry the page: white kit cards with wide photos, round arrow buttons, a table of four routes and a three by three grid of trip photos and quotes. Headings are large and light, set in lines that rise into view. The ground alternates pale blue, a navy packs band, a light blue care band and a navy footer, so each stage of a hire has its own screen.

The first screen sets the statement on pale blue beside one rounded mountain photo. The packs section turns navy, the care section light blue, and every pill button fills with electric blue from its small disc on hover. The footer ends in a huge wordmark that rises into view.

Every value of this outdoor gear rental website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the outdoor gear rental website page

Navigation
Top bar with wordmark, five links and a Book kit button; on small screens a menu button opens a full-screen overlay
The bar slides up out of view when you scroll down and returns on scrolling up; this keeps working with reduced motion.
We own the tent you would use twice a year, so you don’t have to.
A statement as the h1, a paragraph and a How hire works button on a pale ground beside a framed mountain photo
On load the photo frame opens from a pill shaped slit to its rounded shape while the heading, text and button lift in, and the photo then drifts sideways in a slow CSS loop.
Everything in the kit room, by the night.
Heading with a Reserve kit button beside six kit cards (tents, sleep, packs, cook, boots, shells) with an index of shelves
A sticky index of the six shelf names follows the card in the middle of the screen, and each card grows from tilted and dimmed to full size as it arrives.
Ready packs, so you only choose the weekend.
Ready packs with a nights switch: four cards with photo, five items, and a price that follows the choice of 2 nights, 3 nights or a week
The four pack cards travel from one tilted pile to their places as the grid rises, and the prices change when you pick 2 nights, 3 nights or a week.
How hire works
Four numbered hire steps: Book, Get fitted, Go, Bring it back muddy
The intro line fills word by word from grey to ink as you scroll, and each step title rises into view.
Fitted, not handed over.
A held photo frame that swaps between three photos while three fitting stories scroll past
Three photos stack in one sticky frame and each wipes up over the last as its fitting story reaches the middle of the screen.
Between every hire, the same six checks.
Six care checks as a horizontal track of panels, each with a tick, a sentence and a photo
The section pins and the six check panels slide sideways, each tick swelling from a pale dot as its panel arrives.
A route card with every hire.
A photo and a table of four walking routes with distance, ascent, time and grade
The photo opens from a pill shaped slit to its full rounded frame.
Where the kit went last month.
A 3 by 3 grid of six customer photos and three quotes that zooms out from the centre photo
On wide screens the section pins and the grid shrinks from the centre photo until all nine cells show.
Questions people ask at the counter
A heading with a photo beside six questions and answers in native <details> elements
Come and get fitted.
A village photo that widens to full width beside a card with shop address, hours, phone, email and buttons
Scrubbed with scroll, the village photo widens from a rounded window to full width while the details card stays still.
Footer
Route notes sign-up form, four links, a large wordmark and legal lines

Before you publish the outdoor gear rental website site

Replace social preview image, favicon, phone number, email address, map, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
"Book kit" button in the nav, "Reserve kit" button in the kit room, and the round arrow on each kit card and ready pack lead to #visit now; point them to your online booking or enquiry page, or keep #visit.
"How hire works" button in the opening lead to #how now; point them to keep as is.
"Book by email" button in the visit card lead to mailto: with a placeholder address and the subject "Kit booking" now; point them to your booking email, or a link to your booking system.
"Get directions" link in the visit card lead to Google Maps search for the town now; point them to a map link to your shop.
Phone link in the visit card lead to tel: with a placeholder number now; point them to your real number.
"Instagram" and "Strava club" links in the footer lead to the home pages of the networks now; point them to your own profile pages, or remove them.
"Hire terms" and "Privacy" links in the footer lead to #faq and #visit now; point them to your hire terms page and privacy policy.
Route notes sign-up form in the footer lead to action="#": nothing is sent, the script only shows a thank-you line now; point them to your newsletter form address or provider.
The sign-up form has action="#" and nothing is sent; connect a form or newsletter service before publishing.
The care track pins its section at every width and the trips zoom pins its section on screens wider than 760 px, so the page is long to scroll; the trips grid is a fixed 3 by 3.
The opening style block still holds rules for a removed first screen (op-word, op-screen--1, op-card) that no markup uses; they do nothing and can be deleted.

Questions about this outdoor gear rental website template

Is this a free outdoor gear rental website template I can use for a client?

Yes. It is one index.html under the MIT license, so you can ship it to a client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, photos are Unsplash images and both fonts are open licensed. CREDITS.md lists them.

Does the Book kit button take bookings?

No. Every Book kit and Reserve kit button, and the arrow on each card, jumps to the visit card, and the Book by email button opens a mail draft. There is no calendar or payment. Point the buttons at your own booking page, or keep them as enquiry links.

Does the route notes sign-up form send anything?

No. The form in the footer checks the email, shows a thank-you line and sends nothing. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete the form and its script before publishing.

How do I give it to Claude Code, Cursor or Codex?

Download index.html and AGENTS.md with the curl lines in AGENTS.md into an empty folder, then tell the agent to read AGENTS.md before editing. Hand over the files, not the page address. Paste the prompt above.

Which parts of the file must I keep?

Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists for each script. Keep each kit card's id, each pack's three data-price values and the wordmark's --len. 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.

Can I get a site like this without editing code?

Yes, in a different way. 8B's AI website builder designs a new site from a sentence, 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.

Not a outdoor gear rental website? More free templates