# Free electric moped website template > Free HTML electric moped website template for makers and dealers with three models, plans and a test ride form. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. 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. - Page: https://8b.com/templates/arco/ - Live demo: https://8b.com/templates/arco/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/arco/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/electric-moped-website-template - Download ZIP: https://8b.com/templates/arco/electric-moped-website-template.zip - Template name in the repository: Arco - At a glance: 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. ## 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/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 ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . 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. ``` 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/electric-moped-website-template my-site`. ## About 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](https://8b.com/templates/hushkey/) 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. ## Design - 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. ## Sections and motion - **Navigation** (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.** (opening): first screen: a two-line headline, a test ride button with a price line, three fact pills, and a red moped photo behind them. Motion: 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.** (models): 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). Motion: 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.** (battery): dark section: a removable battery lifts out and fills ten segments while three evening times tick off. Motion: 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.** (workshop): split section: heading, paragraph and two columns beside a workshop photo with a notch caption. Motion: 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.** (details): three close-ups on a pinned stage that trade width: the focused strip opens wide, the others close to slivers (demo: lamp, wheel, grips). Motion: 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.** (routes): 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). Motion: 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.** (plans): two plans side by side on a split panel with an "or" disc: own it or ride monthly. Motion: The heading rises and each plan's list slides in from the left. - **Service comes to your kerb.** (service): four service steps on one horizontal track: two text cards with chips and two photo cards (demo: kerbside servicing). Motion: 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.** (faq): heading and a photo with a phone caption beside five questions as native details elements (demo: licence, winter range, flats, rain, theft). Motion: 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.** (reviews): six review cards with stars, a quote and a rider, dealt out from a pile in the middle of the grid. Motion: 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.** (contact): test ride form over a photo, with three pills for the shop address, phone and email. Motion: The photo opens from a round notch and the three contact pills slide in from the left. - **Arco Electric** (footer): footer: brand line, three link columns, a large Arco wordmark and a base line with the company line and the Design: 8B credit. Motion: The letters of the big wordmark spread from the middle to their places as the footer comes up. ## Good for - electric moped or scooter maker - e-bike, e-motorbike or scooter dealer and rental shop - any product with three models, a subscription option and home servicing - small hardware brand with a pinned product switcher and clean grey panels ## Questions **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](https://8b.com/). 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. ## Before publishing Replace: social preview image, favicon, phone number, contact form (sends nothing yet) and email address, plus the invented demo facts (prices, dates, addresses). - 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. ## 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).