/gym-website

Fitness Champion is a dynamic, user-friendly website created to promote a gym's facilities, classes, trainers, and membership plans. This responsive website allows users to learn about the gym's offerings, explore the classes, meet the trainers, view membership options, and contact the gym directly.

Primary LanguageHTMLGNU General Public License v3.0GPL-3.0

Gym Website

Fitness Champion is a dynamic, user-friendly website created to promote a gym's facilities, classes, trainers, and membership plans. This responsive website allows users to learn about the gym's offerings, explore the classes, meet the trainers, view membership options, and contact the gym directly.

Table of Contents

  • Project Overview
  • Demo
  • Features
  • Installation
  • Usage
  • File Structure
  • Contributing
  • License

Project Overview

This project aims to provide a seamless experience for users looking to join a gym, stay informed about class schedules, and book personal training sessions. The website is built with HTML, CSS, and JavaScript and can be further expanded to include backend functionalities if required.

Demo

To view the website live, visit: FitnessChampion

Features

  • Responsive Design: The website is mobile-friendly and adapts to various screen sizes.
  • Modal Functionality: Membership plans and personal training sessions can be viewed in detail through modals.
  • Image Gallery: A gallery section showcases the gym facilities and community.
  • Interactive Class Schedule: A structured table displays available classes, schedules, and trainers.
  • Membership Plans: Information on Basic, Standard, and Premium plans is available with a "Join Now" call-to-action.
  • Personal Training Booking: Users can book sessions with trainers via a modal.
  • Contact Form: Visitors can reach out using a contact form.
  • Move to Top Button: A button that appears on scroll to quickly move back to the top of the page.

Installation

To run this project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/stephenombuya/gym-website
  1. Navigate to the project directory:
cd gym-website
  1. Open index.html in your browser:
open index.html

Usage

After opening index.html, you can interact with the different sections of the website:

  • Home: The hero section introduces users to the gym and includes a call-to-action to join.
  • About Us: Learn more about the gym’s mission, story, and team.
  • Classes: Explore various fitness classes, complete with a schedule and descriptions.
  • Membership: Check available membership plans and pricing.
  • Personal Training: Book sessions with qualified personal trainers.
  • Gallery: Browse images of the gym’s interior, classes, and community.
  • Contact Us: Submit inquiries directly through a contact form.

File Structure

gym-website/
├── index.html              # Main HTML file
├── styles.css              # Main CSS file
├── app.js                  # Main JavaScript file
├── assets/
│   ├── logo.png            # Gym logo
│   ├── gallery/            # Gallery images
│   ├── trainers/           # Images of trainers
│   └── classes/            # Class images

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/new-feature).
  3. Commit your changes (git commit -m "Add new feature").
  4. Push to the branch (git push origin feature/new-feature).
  5. Open a pull request.

License

This project is licensed under the GNU License. See the LICENSE file for more details.