Orbit - Ecommerce Product Landing Page

Orbit is a complete single-product landing page built for DTC and e-commerce brands. Every section, animation, and interaction is hand-coded in clean HTML, CSS, and vanilla JavaScript — no build step, no framework, no dependencies to install. Unzip it and it just works.

Why this template

Most product landing page templates lean on stock photography or generic icon packs. Orbit uses hand-drawn SVG product illustrations, a warm charcoal/brass/rust color system, and elegant serif headlines paired with clean sans body text — a premium, editorial feel that doesn't look like a template. Drop in your own product, colors, and copy and it's ready to ship.

What's inside

A complete one-page layout — announcement bar, sticky header with cart icon, hero with an illustrated product stage, "as featured in" press strip, three alternating feature rows, a working color-variant buy block with live pricing and quantity selector, spec comparison table, customer reviews, a trust/guarantee band, FAQ accordion, closing CTA, and full footer with newsletter signup. Every section is clearly commented in the code, plus a full documentation.html file is included.

Who it's for

DTC product launches, Shopify-style single-product pages, crowdfunding campaign pages, gadget and accessory brands, and any store that needs one polished page to sell one great product.

Fonts used: Lora (headlines & quotes) and Poppins (body & UI) — both free via Google Fonts.

Features

• 100% responsive — tested from 320px mobile up to large desktop
• Working color-variant picker — click a swatch and the product illustration recolors instantly
• Live quantity selector and dynamic "Add to cart" pricing
• Cart badge + confirmation toast — ready to wire into your real checkout
• Vanilla JavaScript only — zero dependencies, zero frameworks
• Spec comparison table vs. typical competitor products
• FAQ accordion and mobile slide-out navigation
• CSS custom properties — re-theme colors/fonts by editing a few variables
• Semantic, accessible markup with visible keyboard focus states
• SVG illustrations throughout — no stock photography or icon library
• Clean, well-commented code, sectioned for easy editing
• Cross-browser tested — Chrome, Firefox, Safari, Edge
• Full documentation.html included

Requirements

No special software or build tools required. Works with any modern web browser. Basic knowledge of HTML and CSS is recommended if you plan to customize colors, text, product illustration, or layout. An internet connection is needed on first load for Google Fonts (Lora & Poppins) unless self-hosted. Add-to-cart is a front-end demo only — connect it to your own checkout/payment system to process real orders.

Instructions

1. Unzip the downloaded file.
2. Open index.html directly in any browser to preview the template, or upload the whole "orbit" folder to your web host.
3. To edit content, open index.html in a code editor — every section is marked with a clear HTML comment (e.g. ).
4. To change colors or fonts, edit the CSS variables at the top of css/style.css under :root.
5. To add or change color variants, update the swatch buttons in index.html and the matching colorNames map in js/script.js.
6. Full setup, customization, and troubleshooting details are in documentation/documentation.html.
7. For local development with live reload, run "npx serve ." or "python3 -m http.server 8000" from inside the folder.