Glyde is a ready-to-launch website kit for hardware and product-based brands — think e-bikes, wearables, gadgets, anything with a pre-order button and a launch date. It ships as a complete site, not a single page: a hero-driven homepage, company pages, a blog, and a countdown-timer landing page for the days before you’re live.
A free, homepage-only edition is available if you want to test the design before picking up the full package.
At a glance
- 9 pages, fully linked and cross-referenced
- 100% HTML, CSS, and vanilla JS — no build tools, no npm install
- Built on Bootstrap 5.3, styled with a custom
oklch()-based color system - Mobile-first and fully responsive
- A dedicated style guide page documenting every color, type style, and component
Highlights
The homepage is where most of the interaction lives:
- A hero section with live product stats and a reservation CTA
- A five-tab feature explorer that swaps copy, specs, and imagery on click — no page reload
- A three-color product picker with a live-updating image and price
- A photo gallery, testimonial carousel, and FAQ accordion
- A closing CTA banner with email capture and a toast confirmation
Pages
| Page | Purpose |
|---|---|
| About | Brand story, values, milestones |
| Careers | Open-roles listing |
| Contact | Contact form + support/sales details |
| Warranty | Warranty terms and policy |
| Blog + blog post | Article listing and a single-post template |
| Coming soon | A standalone pre-launch page with a live countdown and signup form |
| Style guide | Every design token and component, laid out for quick reference |
Free version included
Not ready to commit? The free version is the homepage alone — a self-contained copy with its own assets folder, so you can drop it into a project or just see the design in action. The full edition adds every page above, joined by a single “Pages” navigation menu, plus the style guide for faster customization.
Under the hood
Colors, spacing, and type all trace back to a small set of CSS custom properties at the top of style.css — change a handful of variables and the whole site, buttons and dark sections included, follows along. Content for the feature tabs and color picker lives in plain JS data arrays, so editing copy doesn’t mean hunting through markup.
Fonts: Poppins for headings, Inter for body text, both via Google Fonts. Icons via Bootstrap Icons. Everything loads from CDN.
