Skip to content

README.md

Latest commit

 

History

History
144 lines (126 loc) · 6.27 KB

README.md

File metadata and controls

144 lines (126 loc) · 6.27 KB

FitLife Academy

About the Project: FitLife Academy is a fitness and nutrition learning platform built with modular JavaScript and Tailwind CSS. It showcases expert-led courses, wellness programs, and lifestyle content — designed to demonstrate clean component-based architecture without a framework.

Key Highlights: Component-driven JavaScript structure, responsive layout with Tailwind CSS, interactive mobile navigation, and a polished multi-section UI built entirely without a frontend framework.

Project Details

What's Inside
  • Header — Fixed navigation with mobile slide-out menu and scroll behavior.
  • Hero — Full-screen banner with headline, CTA button, and social links.
  • Services — Three program cards for Women's, Core, and Men's fitness.
  • About — Instructor credentials section with image and highlight stats.
  • Courses — Six-card course grid showing price, author, duration, and lessons.
  • Blog — Three nutrition and wellness article cards with author and engagement info.
  • App Download — Promotional section with Play Store and App Store buttons.
  • Footer — Newsletter form, course links, help links, hours, and address.
  • Back to Top — Smooth-scroll button that appears after scrolling down 200px.

Key Features
  • Modular JavaScript — Each section is a separate JS module, cleanly organized.
  • Component-Based Architecture — All HTML is rendered dynamically from JSON-like data objects.
  • Responsive Design — Fully mobile-friendly layout using Tailwind CSS utility classes.
  • Mobile Navigation — Slide-out menu with overlay, open/close toggle, and link auto-close.
  • Sticky Header — Adds background and shadow on scroll for improved readability.
  • Back to Top Button — Fades in on scroll and smoothly returns the user to the top.
  • Custom Typography — Uses Playfair Display and Montserrat fonts via Google Fonts.

Technologies Used
  • HTML5 — Semantic structure using root div elements for each component.
  • Tailwind CSS (CDN) — Utility-first styling with custom font configuration.
  • JavaScript (ES Modules) — Modular scripts with import/export and DOMContentLoaded.
  • Google Fonts — Playfair Display and Montserrat for headings and body text.
  • Ionicons — Icon library used for UI icons and social links.

Project Structure

 
fitlife-academy/
│
├── index.html                 # Main HTML with root elements for all components
│
├── assets/
│   ├── js/
│   │   ├── app.js             # Entry file that imports and initializes all modules
│   │   ├── header.js          # Header navigation and mobile slide-out menu
│   │   ├── hero.js            # Hero banner with CTA button and social links
│   │   ├── service.js         # Service cards for fitness program categories
│   │   ├── about.js           # About section with instructor info and highlights
│   │   ├── course.js          # Course grid with pricing, author, and duration
│   │   ├── blog.js            # Blog article cards with author and engagement data
│   │   ├── application.js     # Mobile app download section with store buttons
│   │   ├── footer.js          # Footer with newsletter form, links, and hours
│   │   └── backTop.js         # Back to top button with scroll show/hide logic
│   │
│   └── images/                # Hero banner, course images, icons, and shapes
│
└── README.md                  # Project documentation

Quick Start
  1. Clone the repository: 
    git clone https://github.com/nawazdevx/fitlife-academy.git
    2.   <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update site content and navigation links in <code>header.js</code></li>
      <li>Change the headline, description, and background image in <code>hero.js</code></li>
      <li>Add, remove, or edit course cards in <code>course.js</code></li>
      <li>Update blog posts and article details in <code>blog.js</code></li>
      <li>Edit footer links, hours, and newsletter text in <code>footer.js</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.


Project Preview

Live project ➜ Live Demo

Desktop Preview