Free electric scooter 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: hush.md, data: hush.json

Electric scooter website template: first screen on a phone

About this electric scooter website template

Electric scooter website template: one free HTML file for a moped or scooter maker, with a model picker, four full-screen paint fields, a charging explainer, buy or monthly plans, home servicing and a test-ride form. Pale grey and near-black panels with notched corners carry a red accent. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 108 KB index.html with its CSS and JavaScript inside, 13 sections, 29 Unsplash photos credited in CREDITS.md, Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Electric scooter websites tend to answer the same questions in one scroll: which models, how far they go, what colours, how charging works, whether to buy or pay monthly, and where to try one. This page puts them in that order and ends on a test-ride form. It also suits an e-bike or e-motorbike maker, a vehicle showroom, or any product with a few variants and a demo booking.

If you vibe code the site, this electric scooter website template for Claude Code goes well when you hand the agent the facts only the maker has: model names, ranges, speed, prices, paint names, plan terms, warranty, service price, showroom address and hours. The demo invents all of them and the six rider reviews. Replace those first, then the 29 photos. Keep the ids and the classes AGENTS.md lists. The licence and age rules in the city section are British demo content, so the owner supplies local ones.

Pick this base when a maker sells three models and two ways to pay on one scroll. A dealer with many vehicles needs more pages, and a shop that takes payment needs a cart; this file has neither, and no booking system. For a moped seller laid out differently, see the dealer-style moped template. The weak spot is pinning: models, paint and service hold the screen for two, three and one and a half screens. Without code, 8B can design a site from a sentence.

Good for:

Electric moped or scooter brandE-bike, e-motorbike or micromobility makerVehicle showroom with models, colours and finance plansAny physical product with a few variants, a subscription option and a test or demo booking

Turn the electric scooter 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/electric-scooter-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/electric-scooter-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/electric-scooter-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/electric-scooter-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my electric vehicle brand: models with range, seats and prices, paint names, battery and charging facts, plan terms, warranty, service price, showroom address, hours and phone, how to book a test ride>. Replace first the brand, models, paints, plans and reviews. Keep the section ids, the classes AGENTS.md lists and three models in the picker, and set each --len to its word's character count. Ask me for missing facts, never invent ranges, prices, finance terms, warranties, reviews or contacts.

In a terminal

npx degit 8bsite/electric-scooter-website-template my-site

Electric scooter website design prompt for any AI tool

Paste this electric scooter website design prompt into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a maker's 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.

Build a one-page website for an electric scooter maker with three models and two ways to pay. Static HTML, CSS and a little GSAP; no framework.
Sections in order: navigation, opening with three fact cards, a pinned model picker for three models, battery and charging, four full-screen paint fields, a details mosaic, city rules, buy or monthly plans, home servicing, rider reviews, questions, test-ride form, footer.
Type: Host Grotesk only, regular weight with tight tracking for headings and body, medium for buttons.
Colours: #e7e8ea pale grey page, #121315 near-black for text and dark panels, #d23624 red accent for the logo mark, the charging figure and hover fills, #cdd0d4 for hairlines and form borders, #4d5158 for secondary text, #ffffff for cards. Paint fields: #23746c, #22477f, #e2ac2a.
Motion: one idea, the model picker pins and the active card slides out of the photo frame's notch as the photo wipes to the next model. Respect prefers-reduced-motion.
Avoid: purple gradients, three icon cards, a centred hero with two buttons. Use panels with notched corners cut by clip-path so cards seem to dock into photos.
Copy: short and concrete. Ask me for model names, range, speed, prices, plan terms, warranty, address, hours and phone; never invent them or any reviews. Mark every placeholder.
One action: Book a test ride, repeated in the nav, the opening and the plans, all leading to the 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.

Electric scooter website design and motion

Palette

#e7e8ea page background, form field fill and the nav bar once scrolled#121315 text, the opening's black field, round and pill buttons, the monthly plan card, the menu overlay and the footer#cdd0d4 hairlines in steps and plan lists, form field borders, the FAQ rules, and the greyed model cards and service step numbers before they light up#ffffff cards and surfaces, the Own it plan card, light buttons, text on dark panels and captions on photos#d23624 the accent: the logo mark, button hover fill, the charging figure, list dots, the footer wordmark's full stop and the Postbox red paint field#4d5158 secondary text, labels, specs and descriptions on light grounds#a2a7ae secondary text on dark grounds: the menu footer, the footer columns, the plan card and the middle fact card in the opening#23746c the Lido green paint field#22477f the Harbour blue paint field#e2ac2a the Mustard paint field, whose text switches to the near-black

Fonts

Host Grotesk: the only typeface, loaded at weights 400 to 600: regular, tightly tracked headings and body text, medium-weight buttons, card titles and labels, and a semibold wordmark

A pale grey ground carries white cards and near-black panels with rounded corners. The opening's black field, the model photo frame, the charging photo and the contact photo each have a notch that a card, note or form sits in. Text blocks follow a 12-column grid. Paint is four full-screen colour fields, reviews a staggered three-column wall, and ownership two large cards, one white and one black. The footer wordmark and each paint name are sized from their character count.

Depth comes mostly from cutting rather than shadow: clip-path shapes let cards seem to dock into the corners of photos. Red appears on the dark buttons' hover fill, the charging figure and list dots. This electric scooter website design sets headings in regular weight with tight tracking.

Every value of this electric scooter 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 electric scooter website page

Navigation
Fixed top bar: menu button, four section links, wordmark, Test ride, phone and Order buttons; hides on scroll down; full-screen menu overlay
The top bar slides up out of view on scroll down and returns on scroll up, and the menu overlay opens over the page.
Nothing to hear but the tyres.
Short opening on a black panel with a notch cut from the top: the heading "Nothing to hear but the tyres.", three fact cards, an intro and two buttons
On load, the black field's notches shrink into place while the heading, the intro and then the three fact cards rise in one after another.
Three ways to go quiet
Model picker: three cards (name, one line, range, seats or box, price) beside a photo frame that wipes from model to model
Pinned for two screens of scrolling: the active model card slides out of the photo frame's notch and greys, the notch steps down to the next card and the photo wipes downward.
Charge it at your desk, not at a pump.
Charging explainer: photo with a notch and a "3 hours" note, heading, paragraph and three steps (Lift, Plug, Ride)
The photo's corner notch widens once on arrival and the heading reveals line by line.
Four paints, mixed in Hackney
Four paint colours as full-screen fields, each with a photo, a huge name, a colour description and an Order button, sliding sideways as you scroll
Pinned for three screens of scrolling, on phones too: the four colour fields slide sideways as a track while each photo and giant name drifts a little faster in the same direction.
Made for hands, not only for looks
Mosaic of a text tile and five close-up photos with captions
The five close-up photos start pushed out and tilted, then close in around the text tile as you scroll.
Parks where a car can't. Leaves before the bus does.
Two rows of street photos sliding in opposite directions under a two-line heading, and a paragraph on licence and parking
Two rows of street photos slide past each other in opposite directions while the two heading lines slide in from opposite sides.
Own it outright, or ride it by the month.
Two plans side by side: Own it (£3,190, four points) and Ride it monthly (£79 a month, four points)
The heading reveals line by line and each plan card slides in from its own side with a small overshoot.
We come to you. Your Hush never sees a garage.
Home servicing: heading, a workshop photo and three steps (Book a slot, We ride over, Done on the kerb)
Pinned for about one and a half screens: the workshop photo opens one third at a time as the second and third steps slide in and their number discs turn dark.
What riders hear instead
Six rider quotes with a portrait, a first name, the model and the district
On wide screens six rider cards start as one fanned stack and slide out to their staggered places as the wall scrolls in.
Before you ride
Six questions and answers in native <details> elements with a phone link
The heading reveals line by line; the six questions open and close without JavaScript.
Ride one for an hour, free.
Test-ride booking: showroom address, hours, phone and email, a showroom photo in a notched panel and a booking form
The photo panel's notch widens around the form and the photo settles from a close view to full frame.
Footer
Footer: four columns (Explore, Own one, Visit, Talk), a huge wordmark and the legal lines with the Design: 8B credit
The four link columns slide up into place once as the footer arrives.

Before you publish the electric scooter website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Test ride button in the top bar, Book a test ride on the first screen, Order in Lido, Harbour, Mustard and Postbox in the paint section, Order yours and Start riding monthly in the ownership section, Test ride in the menu, Test ride and Book a ride in the footer lead to #contact (the test-ride form) now; point them to your booking or order page, or keep #contact once the form is connected.
Order button in the top bar lead to #ownership (the buy or subscribe plans) now; point them to your shop or checkout page.
How the battery works button on the first screen lead to #battery now; point them to keep, or a page about the battery.
Phone icon in the top bar, phone links in the menu, the questions, the contact section and the footer lead to tel:+442000000000 now; point them to your showroom phone number.
The test-ride form only checks name and email and shows a message; it sends nothing until you connect a form service or remove it.
The model, paint and service sections pin the screen for two, three and about 1.6 screens of scrolling, phones included; on short screens this can feel long.
The notched panels use the CSS shape() function in clip-path, which older browsers do not support: the black field behind the opening then shows as a plain rectangle.

Questions about this electric scooter website template

Is it free to use for an electric scooter brand or a showroom?

Yes. It is one index.html under the MIT license, free for your own brand or a client's. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr and run the pinned model scenes; there is no build step, the photos are Unsplash images and the typeface, Host Grotesk, is under the Open Font License. CREDITS.md lists them.

Is there an electric scooter website design prompt for an AI agent?

Yes, further up this page: a full prompt that works without this file. With the file, download index.html and AGENTS.md into one folder, open it in Claude Code, Codex or Cursor, using its Plan mode and paste the short prompt, filled in with your facts. AGENTS.md names what to keep, what to replace and which facts to ask you for.

What must I keep when I change the models, paints and photos?

Keep the section ids and the selectors AGENTS.md lists. The model picker is built for exactly three models, and each model photo appears twice, in its card and in the frame, so change both. The details mosaic is a grid of six tiles. Set each --len to the character count of its word.

Does the test-ride form send anything?

No. It checks that a name and a valid email are present, then shows a thank-you line and clears the fields. Connect Formspree or Netlify Forms using the steps in AGENTS.md, or delete the form and keep a phone link. Also edit the thank-you line, which promises an email within a working day.

What happens on a phone, with reduced motion or with scripts off?

On a phone the section links, phone and Order buttons hide and the menu button lists every section; most layouts become one column. With reduced motion on, smooth scrolling, pinning and scroll animations stop, the paint fields stack and the model frame shows only the first model's photo. The bar still hides on scroll. Without JavaScript the menu cannot open.

Can I get a site like this without editing code?

Not with this file; it needs an AI coding agent or a developer. 8B's AI website builder designs a new site from a sentence you write, in its own design rather than this template. Designing and restyling are free; publishing with hosting is on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a electric scooter website? More free templates