# CyclePro - Cycling Website

A modern, responsive multi-page website for a cycling business built with pure HTML, CSS, and JavaScript.

## Features

- **5 Complete Pages**: Home, About, Bikes, Services, and Contact
- **Responsive Design**: Mobile-first approach with breakpoints for all devices
- **Modern UI/UX**: Clean design with smooth animations and transitions
- **Interactive Elements**: 
  - Mobile navigation with hamburger menu
  - Bike filtering system
  - Modal for bike details
  - Animated counters
  - Form validation
  - FAQ accordion
  - Newsletter subscription
- **No Frameworks**: Pure HTML5, CSS3, and Vanilla JavaScript (ES6+)

## File Structure

```
cycling-website/
├── index.html          # Home page
├── about.html          # About us page
├── bikes.html          # Bikes/products page with filtering
├── services.html       # Services page with pricing
├── contact.html        # Contact page with form validation
├── css/
│   ├── style.css       # Main stylesheet
│   ├── components.css  # Navigation, footer, cards
│   ├── animations.css  # CSS animations
│   └── responsive.css  # Media queries
├── js/
│   ├── main.js         # Main functionality
│   └── navigation.js   # Mobile navigation
└── images/             # Image assets
```

## Pages Overview

### Home (index.html)
- Hero section with call-to-action
- Featured bikes carousel
- Why Choose Us features
- Customer testimonials
- Newsletter signup

### About (about.html)
- Company story and mission
- Animated statistics counters
- Team member profiles
- Core values

### Bikes (bikes.html)
- Filterable bike catalog
- 6 bike products with details
- Modal for detailed information
- Financing options

### Services (services.html)
- 6 service offerings
- Pricing table
- How it works process
- Booking CTA

### Contact (contact.html)
- Contact information
- Contact form with validation
- Embedded Google Map
- FAQ accordion

## Technologies Used

- **HTML5**: Semantic markup
- **CSS3**: 
  - CSS Grid & Flexbox
  - CSS Variables
  - Animations & Transitions
  - Media Queries
- **JavaScript (ES6+)**:
  - DOM Manipulation
  - Event Handling
  - Intersection Observer API
  - Form Validation
- **External Resources**:
  - Google Fonts (Montserrat, Open Sans)
  - Font Awesome Icons
  - Unsplash Images

## Color Palette

- Primary: #FF6B35 (Orange)
- Secondary: #004E89 (Deep Blue)
- Accent: #00A896 (Teal)
- Dark BG: #1A1A2E
- Light BG: #F7F7F7

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers

## Usage

1. Open `index.html` in a web browser to view the home page
2. Navigate through the site using the header navigation
3. All pages are linked and functional

## Features Implemented

✅ Responsive navigation with mobile hamburger menu
✅ Smooth scroll animations
✅ Bike filtering by category
✅ Modal system for product details
✅ Animated number counters
✅ Form validation with error handling
✅ FAQ accordion
✅ Newsletter subscription
✅ Social media integration
✅ Google Maps embed
✅ Cross-browser compatibility

## Performance

- Optimized CSS/JS
- Lazy loading ready
- Minimal external dependencies
- Fast loading times

## Future Enhancements

- Backend integration for form submissions
- E-commerce functionality
- User authentication
- Blog section
- Events calendar
- Online booking system

## License

Free to use for personal and commercial projects.

---

Built with ❤️ for cyclists everywhere!