This project is a responsive promotional website for an electric bike brand. It highlights key features, allows users to compare different models, and provides detailed specs and contact information. The site is designed to deliver a modern and clean user experience for potential customers interested in urban mobility solutions.
Experience the live website: MyBike Demo
Core
- HTML - Markup
- Sass (v1.83.4) - Styling
- JavaScript - Scripting
Development
- ESLint (v8.57.0) - Code Quality
- Prettier (v3.3.2) - Code Formatting
- Responsive Design: Adaptive layouts for mobile, tablet, and desktop using SCSS mixins with media queries.
- Semantic HTML5 Structure: Proper use of semantic tags like
<header>,<main>,<section>,<article>,<nav>, and<footer>. - Custom Navigation Menu: Slide-in mobile menu activated via URL hash with smooth open/close animations.
- Scroll Lock on Menu: JavaScript toggles a
.scroll-lockclass to prevent background scrolling when the menu is open. - SCSS Mixins for Reusability: Includes responsive padding, hover effects, and grid layout utilities for easy styling.
- Google Fonts Integration: Uses the Poppins font for clean, modern typography.
- Accessibility Considerations: Use of alt text on images and semantic markup for better accessibility.
- Clone the repository:
git clone https://github.com/hetskoweb/MyBike.git
cd MyBike- Install dependencies:
npm install
# or
yarn install- Run the project locally:
npm start
# or
yarn start