# Free outdoor gear rental website template > Free HTML outdoor gear rental website template for kit hire and camping shops, with nightly prices. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. 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. - Page: https://8b.com/templates/kitfell/ - Live demo: https://8b.com/templates/kitfell/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/kitfell/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/outdoor-gear-rental-website-template - Download ZIP: https://8b.com/templates/kitfell/outdoor-gear-rental-website-template.zip - Template name in the repository: Kitfell - At a glance: 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. ## 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/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 ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . 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. ``` 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/outdoor-gear-rental-website-template my-site`. ## About 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](https://8b.com/templates/spinway/), 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. ## Design - 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. ## Sections and motion - **Navigation** (navigation): top bar with wordmark, five links and a Book kit button; on small screens a menu button opens a full-screen overlay. Motion: 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.** (opening): a statement as the h1, a paragraph and a How hire works button on a pale ground beside a framed mountain photo. Motion: 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.** (kit): heading with a Reserve kit button beside six kit cards (tents, sleep, packs, cook, boots, shells) with an index of shelves. Motion: 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.** (packs): 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. Motion: 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** (how): four numbered hire steps: Book, Get fitted, Go, Bring it back muddy. Motion: 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.** (fitting): a held photo frame that swaps between three photos while three fitting stories scroll past. Motion: 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.** (care): six care checks as a horizontal track of panels, each with a tick, a sentence and a photo. Motion: 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.** (routes): a photo and a table of four walking routes with distance, ascent, time and grade. Motion: The photo opens from a pill shaped slit to its full rounded frame. - **Where the kit went last month.** (trips): a 3 by 3 grid of six customer photos and three quotes that zooms out from the centre photo. Motion: 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** (faq): a heading with a photo beside six questions and answers in native
elements - **Come and get fitted.** (visit): a village photo that widens to full width beside a card with shop address, hours, phone, email and buttons. Motion: Scrubbed with scroll, the village photo widens from a rounded window to full width while the details card stays still. - **Footer** (footer): route notes sign-up form, four links, a large wordmark and legal lines ## Good for - outdoor kit hire or camping gear rental shop - bike, ski, kayak or other equipment rental - adventure outfitter or guided trips company - any shop that rents out items by the night with fitting, care and set bundles ## Questions **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](https://8b.com/) 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. ## Before publishing Replace: social preview image, favicon, phone number, email address, map, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - "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. ## 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 121+ (it uses color-mix(), :has(), cascade layers, small/dynamic viewport units).