Cranq - Bicycle Repair & Customization HTML Template
1 of 10
Loading screenshot

A bicycle repair HTML template for bike repair shops, service workshops and custom-build studios that sell tune-ups, repairs and dream builds. It is built with HTML5, Bootstrap 5 and plain JavaScript and is styled like a modern workshop: warm paper, ink green-black and one acid-lime accent, with mixed-case grotesk headings, lime marker highlights and dashed "spoke" dividers. Underneath sits a clean, well-organised codebase: Bootstrap utility classes for layout, a single stylesheet driven by CSS design tokens, locally hosted fonts, markup-driven form validation and responsive layouts across every screen size.

The template includes 16 ready-made pages built around how a workshop actually sells: services with a service detail page, custom builds from consult to first ride, a filterable build gallery with a lightbox, pricing with service packages and a parts-and-labour list, an appointment booking page, the team, testimonials, answers to common questions, a blog, contact and the utility pages. The home page walks a rider from the six services to finished builds and the four-step check-in, ending on a booking call to action.

Key Features

  • HTML5 + Bootstrap 5: clean, semantic markup with Bootstrap utility classes
  • 16 Ready-Made Pages: services, service detail, custom builds, build gallery, pricing, booking and more
  • W3C Valid HTML: every page checked with the Nu HTML Checker
  • CSS Design Tokens: colors, spacing, fonts and radii set once in :root
  • Single Stylesheet: one main.css with a table of contents
  • Local Fonts: Space Grotesk and Inter, no CDN requests
  • Works Offline: opens straight from the file system, no build tools or server
  • Three Reusable Forms: appointment booking, contact and a notify form, each with worded inline errors and a thank-you message
  • Filterable Build Gallery with Lightbox: road, mountain, gravel and commuter builds open full size, with arrows and keyboard control
  • Service Packages and Price List: three tune-up packages and itemised repair prices
  • Custom Build Process: five steps from ride consult to first ride and follow-up
  • Coming Soon Countdown: a live clock with a notify form
  • Share Links and Photo Lightbox: the blog post has share links, and the blog and service photos open full size
  • Accessible Navigation: keyboard-friendly dropdowns and a mobile panel that repeats the desktop menu item for item
  • Responsive Design: checked from 360px phones to wide desktops
  • No jQuery: plain, unminified JavaScript
  • Documentation Included: installation, structure, customization, forms and business details, in light and dark

Ideal For

  • Bike repair shops and service workshops
  • Custom bike builders and frame studios
  • Bike fitting studios
  • Wheel builders and suspension specialists
  • E-bike service centres
  • Mobile bike mechanics

Pages Included

Home About Services
Service Detail Custom Builds Build Gallery
Pricing Book Appointment Team
Testimonials FAQ Blog
Blog Single Contact Coming Soon
404 Page

Credits

  • Framework: Bootstrap 5 (https://getbootstrap.com)
  • Icons: no icon library; arrows, marks and social icons are inline SVG
  • Fonts: Space Grotesk and Inter, OFL licensed, served locally
  • Images: placeholder images only. Photos are not included in the download.

Images Notice

The photography shown in the live preview and screenshots is licensed stock used as preview content only and is not included in the download. The package ships placeholder images in place of every photograph. Each placeholder carries the same filename as the image it replaces, so you can drop your own images in with no code changes. Replace the placeholders with your own photographs or licensed images before publishing.

Requirements and Limitations

  • A static HTML template, not a WordPress product. Basic knowledge of HTML and CSS is enough to customize it.
  • The forms validate in the browser but do not send email or hold an appointment. Connect them to your own form handler before going live.
  • The demo workshop details (address, phone, email, hours, services and prices) are sample content to replace with your own.