Free bike 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: kickstand.md, data: kickstand.json

Bike rental website template: first screen on a phone

About this bike rental website template

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.

At a glance, October 2026. 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.

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

Good for:

Bike or e-bike hire shopScooter, kayak, paddleboard or camper rental with several pick-up pointsGuided tour, outdoor activity or mobility service that sells by the hour and the dayAny business that wants a hard, technical look with one bright accent and horizontal scrolling stages

Turn the bike 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/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

Prompt for the agent:

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.

In a terminal

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.

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.

Bike rental website design and motion

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.

Every value of this bike 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 bike rental website page

Navigation
Round starburst logo, eight links in two columns and a menu button that opens a full-screen overlay
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.
Dark first screen: a three-line h1 stepping in like stairs, a lead, four facts, a booking button and a street photo
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
Held stage that steps through four bikes: the next photo wipes in from the right while the name tabs and text change
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
Dark band with a night photo and a line of letters A to E over it, then five stand rows
Each stand row rises into place as it enters; the line of letters over the night photo stays still.
Four rides from the stands
Four ride panels that slide sideways past a held stage while a lime line fills and a disc rolls along it
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
Dark band with three numbered booking steps joined by a filling lime line
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
Photo and a list of six things included with every hire
The photo and the six kit items rise in as they enter.
Saturday 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
The group photo opens from a central slit to full width while the two words of the heading part toward the edges.
Prices
Price table of four bikes by hour, half day, day and week, and a monthly pass card
The price table and the monthly pass card rise in once.
Riders
Three rider quotes that ride in from alternate sides into one ruled column
The three quotes slide in from alternating sides as the list scrolls into view.
Questions
Five questions and answers (native details)
Each question rises in; opening one turns its plus sign 45 degrees into a cross.
Book a bike
Address, phone, e-mail and hours beside a booking form, over a night photo with a scattered stand line
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
Dark footer with brand, three link columns and two legal lines

Before you publish the bike rental website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this bike rental website template

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.

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: 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 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 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.

Not a bike rental website? More free templates