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

Electric moped website template: first screen on a phone

About this electric moped website template

Electric moped website template: one free HTML file for a maker or dealer with three models, a buy or monthly choice, kerbside servicing and a test ride form. Pale grey panels, white pill cards and one red accent carry four pinned scroll sections. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

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

A small brand that sells electric two-wheelers needs one page that shows the models, the range and a way to book a ride. This one gives all three their own pinned section right after the first screen. It works as an electric scooter website template for a maker with three variants, and as a scooter rental website template if the buy plan becomes day hire and the monthly plan a subscription.

Replace the three models first: names, badges, descriptions, four specs each, prices and monthly prices, then the photos. Next come the two plans, the five rides on the map and the service steps. The models section is built for three models and the map pairs five stops with five day dots. Ask the owner for range, weight, warranty and licence rules. Vibe coding with Claude Code or Cursor suits it because every fact is plain text.

Pick this when you sell one product family in a few models and want scroll scenes that explain the battery, the range and the service. For a single gadget or app, a one-product launch page fits better. A shop with a long catalogue needs more pages than one. The weak spot is length: four pinned sections each hold the screen for about two screens of scrolling, and they are not tuned for short landscape phones.

Good for:

Electric moped or scooter makerE-bike, e-motorbike or scooter dealer and rental shopAny product with three models, a subscription option and home servicingSmall hardware brand with a pinned product switcher and clean grey panels

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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my brand: name, models with specs, range and prices, buy and monthly plan terms, warranty, servicing, licence rules, shop address, how people book a test ride>. Replace first the three models, the plans, the week of rides on the map and the reviews. Keep the section ids, the classes AGENTS.md lists, three models and five stops, and set each len value to its line's character count. Ask me for missing facts and never invent prices, specs, reviews or contacts.

In a terminal

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

Electric moped website design and motion

Palette

#e9eaec page ground, the nav bar and the phone menu overlay#d4d6d8 grey panels and photo placeholders, the Own it plan, model badges, river and street lines on the map#ffffff pill cards, the Ride monthly plan, question rows, the street map ground, the second-style buttons#121316 text, the main buttons, the battery section ground, the route line, map labels#555960 secondary text: leads, descriptions, captions, field labels#cc2c24 the only accent: button icon discs, charge segments, route rider, review stars, list markers, the wordmark full stop#a2a6ad paragraph text and the slot label on the dark battery section#24262b battery cell, handle and slot, and the time rules on the dark section#b9bdc3 hairlines between specs, plan items and footer, and form field borders

Fonts

Host Grotesk: the only typeface: tight medium-weight headings and model names, semibold logo and thumbnail names, regular body text, loaded from Google Fonts as one variable font

Rounded light grey panels sit on a pale ground, with white pill cards and photo corners cut by a notch. Section heads split into a big heading and a short lead. Models, plan panels and service steps each repeat as a set. The battery, the street map with its river, lanes and route, the charge bar and the logo mark are drawn in CSS and SVG, not images. A huge wordmark closes the footer.

The red disc inside each main button floods it on hover, and the second-style buttons fill black instead. Only the battery section has a dark ground. This electric scooter website design spends red on buttons, charge segments, the route rider and its stops, the stars and the wordmark's full stop.

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

Navigation
Fixed top bar: four section links, the Arco logo, a Call us button and a Book a ride button; hides on scroll down; phone menu overlay
Hear the city, not the engine.
First screen: a two-line headline, a test ride button with a price line, three fact pills, and a red moped photo behind them
On load the headline, button, fact pills and photo slide or settle in; on phones the photo also drifts sideways in a loop.
Three Arcos. One charger.
Three models on a pinned switcher: each photo grows from a stack of thumbnails at the right edge, with name, badge, text, four specs and a price tab (demo: Uno, Nero, Argento)
Pinned for about two screens: each next photo grows from the thumbnail stack to full size while the previous one steps back and darkens, and the text swaps.
Lift it out. Charge it anywhere.
Dark section: a removable battery lifts out and fills ten segments while three evening times tick off
As the battery passes through the screen it rises, ten segments turn red one by one, three rules draw and the last heading line turns red.
Built in Bristol from fewer parts.
Split section: heading, paragraph and two columns beside a workshop photo with a notch caption
The heading rises, the two columns slide in from the left and the photo opens from a round notch at one corner.
Three things you touch every day.
Three close-ups on a pinned stage that trade width: the focused strip opens wide, the others close to slivers (demo: lamp, wheel, grips)
Pinned: the three close-ups trade width as you scroll (height on phones), so the focused strip opens wide and only its caption shows.
A week on one charge.
Pinned map: a street map where a red rider drives a drawn route through five stops while a charge bar empties (demo: a week of errands in Bristol)
Pinned: the route draws itself on the map behind a red rider, each stop and day dot lights as it passes and the charge bar shrinks.
Buy it, or ride it monthly.
Two plans side by side on a split panel with an "or" disc: own it or ride monthly
The heading rises and each plan's list slides in from the left.
Service comes to your kerb.
Four service steps on one horizontal track: two text cards with chips and two photo cards (demo: kerbside servicing)
Pinned: the four-step track slides sideways while the photos inside the cards shift a little faster than the cards that hold them.
Before you ride.
Heading and a photo with a phone caption beside five questions as native details elements (demo: licence, winter range, flats, rain, theft)
The heading rises and the photo opens from a round notch; the five questions are native details elements.
Riders rate it 4.8 out of 5.
Six review cards with stars, a quote and a rider, dealt out from a pile in the middle of the grid
The six cards start as one tilted pile mid-grid and are dealt out to their places, each a little after the one before.
Ride one this week.
Test ride form over a photo, with three pills for the shop address, phone and email
The photo opens from a round notch and the three contact pills slide in from the left.
Arco Electric
Footer: brand line, three link columns, a large Arco wordmark and a base line with the company line and the Design: 8B credit
The letters of the big wordmark spread from the middle to their places as the footer comes up.

Before you publish the electric moped website site

Replace social preview image, favicon, phone number, contact form (sends nothing yet) and email address and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a ride button in the nav, Book a test ride in the phone menu, in the first screen, in the Own it plan and in the footer, Start monthly in the Ride monthly plan lead to #contact now; point them to your online test ride booking page, or keep #contact once the form is connected.
Ride an Uno, Ride a Nero and Ride an Argento buttons in the models section lead to #contact (the form's Model select is not preselected) now; point them to a booking page per model, or keep #contact and preselect the model in the form.
Call us button in the nav, the phone link in the phone menu, the Still unsure? caption in the questions, the Call pill in the contact section and the footer phone link lead to tel: link to the placeholder number now; point them to your real phone number in tel: form (+44...) and the visible form.
Write pill in the contact section and the email in the footer lead to mailto: link to the placeholder address now; point them to your real sales or booking email.
Contact form (Book my ride) lead to action="#" with nothing sent; the script only checks name, phone and email and shows the thank-you line now; point them to a form service endpoint (Formspree, Netlify Forms) or your booking system.
The nav links on desktop leave out Plans and Questions; they are reachable in the phone overlay and in the footer.
Four pinned scenes (models, details, routes, service) hold the screen for about two screens of scrolling each; they are sized for ordinary screens and are not tuned for short landscape phones.
The same moped photo is used for the first screen, the thumbnail stack and the Uno row, so changing the first model means changing three images.
Five scripts load from a CDN without defer (GSAP, ScrollTrigger, SplitText, MotionPathPlugin and Lenis) at the end of the page, so they must be reachable for the animations.

Questions about this electric moped website template

Is this a free electric scooter website template, and can I use it for a client?

Yes. It is a single index.html under the MIT license, so you can ship it for a client at no cost. GSAP, ScrollTrigger, SplitText, MotionPathPlugin and Lenis load from jsDelivr, and there is no build step. The photos are Unsplash images and the font is Host Grotesk under the Open Font License; CREDITS.md lists both.

Does the test ride form send bookings?

No. The script checks name, phone and a valid email, shows the thank-you line and disables the button, but sends nothing. Connect Formspree or Netlify Forms with the steps in AGENTS.md. Also edit the thank-you, which promises a text within the hour, and note that the Ride an Uno buttons do not preselect the Model field.

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

Put index.html and AGENTS.md in an empty project folder with the curl lines at the start of AGENTS.md, and tell the agent to read AGENTS.md before it edits index.html. Give it the files, not the page address, which comes back as a summary. Then paste the prompt from this page, filled in with your brand's facts.

Which parts of the file break if I change them?

Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each script. Each style --len must equal its line's character count. 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.

The demo is British. Can a dealer in another country use it?

Yes, after a text pass. The demo is a Bristol brand: prices in pounds, a CBT certificate, a car licence rule, a UK phone format and a company line registered in England. Licence and insurance rules differ by country, so the owner supplies them; the agent must not guess them.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the site in a sentence and it designs a new one, 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 electric moped website? More free templates