Bicycle

Landing page for AOD, a vintage bicycle shop, with scroll animations, a post slider and a newsletter form. Built in June 2021 as a learning project.

Live demo: androfficial.github.io/html-bicycle

Features

• Every section animates into view with AOS, each with its own fade or zoom effect.
• Three brand blocks pair large photos with descriptions. On screens 992 px and wider, hovering a photo tile reveals the brand logo over it.
• A Swiper slider of tweet-style posts loops, adapts its height to each post and has clickable dots.
• The shop grid shows eight photo tiles above a "Discover the shop" button whose border keeps cycling through colours (CSS keyframes).
• The newsletter form refuses an empty email field: the field turns red until something is typed, and a browser alert reports the result.
• At 610 px and below a burger button opens the menu and locks page scroll.

Tech stack

• Framework: none, plain HTML and JavaScript
• UI: Swiper 6
• Styling: SCSS compiled to CSS (the SCSS sources are not in the repository)
• Animation: AOS, CSS keyframes
• Tooling: built with Gulp 4, which produced the plain and minified bundles in css/ and js/
• Hosting: GitHub Pages

Getting started

The repository holds the compiled site, with no dependencies and no build step. The social icons come from an external SVG sprite that browsers do not load from file://, so serve the folder over HTTP, for example with npx serve . on Node.js 18 or later.

git clone https://github.com/androfficial/html-bicycle.git
cd html-bicycle
npx serve .

Then open the local address that serve prints.

Notes

• The newsletter form only checks that the field is not empty and sends nothing; the menu, shop and brand links point to #.