# Free bike rental website template

> Free HTML bike rental website template for e-bike and bike hire shops with several stands and guided rides. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Bike rental website template: one free HTML file for an e-bike or bike hire business with several pick-up stands, guided rides and prices by the hour, day and week. Near black and pale grey with one acid-lime accent, tight sans type and double rules that draw across the page. AGENTS.md is included for Claude Code, Cursor or Codex.

- Page: https://8b.com/templates/kickstand/
- Live demo: https://8b.com/templates/kickstand/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/kickstand/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/bike-rental-website-template
- Download ZIP: https://8b.com/templates/kickstand/bike-rental-website-template.zip
- Template name in the repository: Kickstand
- At a glance: One 91 KB index.html with its CSS and JavaScript inside, 13 sections, 13 Unsplash photos credited in CREDITS.md, Stack Sans Headline and Stack Sans Text from Google Fonts, GSAP 3.13.0 (ScrollTrigger); 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/bike-rental-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/bike-rental-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/bike-rental-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/bike-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 <my hire business: name, town, bikes and prices, stands with addresses and hours, routes, hire terms, deposit, excess, phone, email, legal name>. Replace first the bike specs, the five stands, the four routes, the prices and the Saturday dates. If the number of stands changes, edit the letters A to E by hand too. Keep the section ids and the classes AGENTS.md lists. Ask me for missing facts and never invent prices, hours, addresses, 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/bike-rental-website-template my-site`.

### Bike rental website design prompt for any AI tool

Use this prompt to build a bike rental 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 one-page website for a bike and e-bike hire business with several pick-up stands, guided rides and prices by the hour, day and week. Plain HTML, CSS and JavaScript, one file. Sections in order: navigation bar, first screen with heading, four facts and a street photo, the fleet of four bikes with specs and prices, stands, routes, three booking steps, kit list, guided rides, price table with a monthly pass, reviews, FAQ, booking form, footer. Type: Stack Sans Headline in one weight with tight negative tracking for headings; Stack Sans Text for body, 12px uppercase labels, buttons and prices. Colours: #e1e3e2 pale grey page, #0d0f0f near black for text, rules and dark bands, #d4ff1e acid lime as the only accent (hover fills, progress lines, stand codes, the pass card), #555c5e for small labels, #27333a slate for tinted photos. Motion idea: a line that fills or a stage that holds while you scroll, like a ride along a route; switch it off under prefers-reduced-motion. Layout: double rules open each section, facts sit in ruled rows and tables, square corners, no shadows. No purple gradients, no rounded cards, no row of three icon cards, no centred hero with two buttons. Copy: short, concrete, with numbers. Ask me for bike specs, prices, stand addresses and hours, deposit and terms; never invent them or reviews; mark every placeholder. One primary action, Book, repeated in the bar, prices and the end of the page. Check 390px width, 48px tap targets, visible keyboard focus and no console errors, then list every placeholder.
```

## About

A hire shop needs its answers on one page: four bikes with specs and prices, five stands with hours, four routes with distance and climb, three booking steps, a kit list and a price table with a monthly pass. It is a bike rental website template free of charge, under MIT. With the bike wording swapped it also works as a scooter rental website template, or for kayak hire with several pick-up points.

Vibe coding goes fastest when the agent gets the facts only the business has: bike specs and prices, stand addresses and hours, route distances, deposit, excess and hire terms. The demo invents all of them, plus the Sheffield places, rider quotes and Saturday dates. Change the bike articles with the bike options and price rows, and the stand rows with the collect-from options; edit the letters A to E by hand. As a bike rental website template for Claude Code, Cursor or Codex it needs only those facts.

Among bike rental website templates this one suits a business that sells time, not products, and wants a hard, technical look with one bright accent. A shop that rents tents and boots by the night is closer to the [tent and boot hire](https://8b.com/templates/kitfell/) template. Anyone after a bike shop website template that sells bikes will miss a cart: there is no checkout, and booking is a form that sends nothing yet. Without an agent, 8B can design a site from a sentence.

## Design

- Palette: #e1e3e2 (page ground and navigation bar; text and square marks on the dark bands and in the menu overlay), #0d0f0f (text, filled buttons and rules; ground of the first screen, stands, rides, footer and menu overlay), #d4ff1e (the only accent: last heading line of the first screen, button hover fill, round discs, progress lines, stand codes, the reviews band and the monthly pass card), #ffffff (button labels, text on the hire and rides bands, photo captions), #555c5e (small labels, bike kinds, spec terms, route facts, kit text, table heads, form labels and FAQ answers), #27333a (ground of the hire band, the multiply tint over night and band photos, and the placeholder behind photos), #a9b1b3 (grey text and rules on dark: the four first-screen facts, stand descriptions, ride dates, hire track, footer heads and legal line)
- Fonts: Stack Sans Headline (the first-screen heading, section headings, bike, stand, route and step names, quotes and FAQ questions; one weight (400) with tight negative tracking), Stack Sans Text (body text, small uppercase labels, buttons and price figures; weights 400 and 500)

The first screen is a 12-column grid: the three-line heading, lead, four facts, a button and a link on the left, a tall street photo on the right. Nine sections then open with a double rule, a small square mark with a lime plus and a short note. Bikes, stands, kit and prices sit in ruled rows and two-column splits, and the routes become one wide row of panels. On phones the splits stack to one column.

This bike rental website design rations its lime: the first-screen last line, button fills on hover, progress lines, stand codes, the reviews band and the monthly pass card. Headings use one weight of one tight face, so emphasis comes from size and from the dark and light bands.

## Sections and motion

- **Navigation** (navigation): round starburst logo, eight links in two columns and a menu button that opens a full-screen overlay. Motion: Smooth scrolling runs page-wide; the bar slides out of view as you scroll down and returns as you scroll up.
- **Sheffield climbs seven hills. You just pedal.** (opening): dark first screen: a three-line h1 stepping in like stairs, a lead, four facts, a booking button and a street photo. Motion: On load the three heading lines step in like stairs, the street photo levels from a slanted upper edge, and the lead, facts and buttons rise in.
- **Four bikes, one push** (fleet): held stage that steps through four bikes: the next photo wipes in from the right while the name tabs and text change. Motion: Pinned for about two and a third screens of scrolling: each next bike's photo wipes in from the right, the text swaps, and a marker slides along a strip of bike names that the script builds.
- **Five stands, one line** (stands): dark band with a night photo and a line of letters A to E over it, then five stand rows. Motion: Each stand row rises into place as it enters; the line of letters over the night photo stays still.
- **Four rides from the stands** (routes): four ride panels that slide sideways past a held stage while a lime line fills and a disc rolls along it. Motion: Pinned for as many pixels as the row overflows: the four ride panels slide sideways while a lime line fills and a round marker rolls along it.
- **Three steps to a ride** (hire): dark band with three numbered booking steps joined by a filling lime line. Motion: A lime line fills across the three steps (down them on a phone) as they scroll into view, and each step comes up from dim with its number sliding in from the left.
- **In every basket** (kit): photo and a list of six things included with every hire. Motion: The photo and the six kit items rise in as they enter.
- **Saturday rides** (rides): dark band: a group-ride photo opens from a slit while the two words of the heading part, then a date list and a join button. Motion: The group photo opens from a central slit to full width while the two words of the heading part toward the edges.
- **Prices** (prices): price table of four bikes by hour, half day, day and week, and a monthly pass card. Motion: The price table and the monthly pass card rise in once.
- **Riders** (reviews): three rider quotes that ride in from alternate sides into one ruled column. Motion: The three quotes slide in from alternating sides as the list scrolls into view.
- **Questions** (faq): five questions and answers (native details). Motion: Each question rises in; opening one turns its plus sign 45 degrees into a cross.
- **Book a bike** (contact): address, phone, e-mail and hours beside a booking form, over a night photo with a scattered stand line. Motion: The night photo settles from slightly enlarged and shifted, and eight marks (a dash, a bar, a dot and the letters A to E) fly into line with a spin.
- **Footer** (footer): dark footer with brand, three link columns and two legal lines

## Good for

- bike or e-bike hire shop
- scooter, kayak, paddleboard or camper rental with several pick-up points
- guided tour, outdoor activity or mobility service that sells by the hour and the day
- any business that wants a hard, technical look with one bright accent and horizontal scrolling stages

## Questions

**Can I use this free template for client hire sites?** Yes. It is one index.html under the MIT licence, so a freelancer can build hire sites for clients at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, with no build step or CMS. Photos are Unsplash images and the fonts are Google Fonts; CREDITS.md lists them. Gemini users can work from it too, [in the CLI or AI Studio](https://8b.com/templates/for-google-ai-studio/).

**How do I hand it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines that open AGENTS.md, then tell the agent to read AGENTS.md first. Give it the files, not the page address, and paste the prompt above. [App builders work differently](https://8b.com/templates/vibe-coding/): without the file, use the bike rental website design prompt below in Lovable, v0 or Bolt.

**Can I get a site like this without editing code?** Not from this file, which needs an AI coding agent or a developer. For no code, [8B's AI website builder](https://8b.com/) designs a new site from a sentence, in its own design rather than this one. Designing is free; publishing with hosting, HTML export and AI edits are on Pro at $9 a month billed yearly.

**Does the booking form send anything?** No. The form requires a name, an email and a date, then shows a thank-you line and disables the button without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or point the Book buttons at your own booking page, and edit the promise to confirm within the hour.

**Which parts break if I change them?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists for each animation. Bike articles and route panels can be added or removed. Keep the header comment at the start of the file and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

**What happens on a phone, with reduced motion or without JavaScript?** On a phone the header links give way to the menu button and the held bike stage hides the spec lists. With reduced motion, entrance motion, [the pinned bike wipes](https://8b.com/templates/animated/) and smooth scrolling are off, and bikes and routes sit in plain grids. Without JavaScript the menu cannot open; the nine footer links remain on phones.

## Before publishing

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

- Book a bike button in the first screen, and Join a ride and Ask about a pass buttons lead to #contact, the booking form now; point them to your booking page URL (a booking tool or rental system) if you take bookings there, or keep them on the form.
- Instagram and Strava club links in the footer lead to the root of each network (instagram.com, strava.com) now; point them to your own profile and club URLs.
- Newsletter link in the footer lead to #contact, the booking form (the page has no newsletter form) now; point them to your newsletter sign-up URL, or remove the link.
- See the four bikes link in the first screen and the menu links lead to anchors (#fleet, #stands, #routes, #hire, #rides, #prices, #contact) now; point them to keep them as anchors.
- The header hides when you scroll down and its hover transitions keep running with reduced motion; the scroll scenes, the entrances, the opening keyframes and smooth scrolling stop.
- The fleet stage holds the page for about 2.3 screens of scrolling (234svh with four bikes) and the routes stage for the row's whole overflow, so the page feels long on a short phone screen.
- GSAP, ScrollTrigger and Lenis load from a CDN at the end of the body and the scenes need all three.
- The footer link "Newsletter" points at the booking form, since the page has no newsletter form.

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