NutriBite

NutriBite is a responsive front-end landing page for a fictional healthy food subscription service. Built from scratch to demonstrate modern web design principles, CSS layout techniques, and basic JavaScript DOM manipulation.

📖 Table of Contents

• Project Overview
• Features
• Technology Stack
• Usage & Installation
• Project Structure

🎯 Project Overview

The goal of this project was to create a beautiful, performant, and fully responsive one-page website. It showcases skills in writing clean, semantic HTML5, styling with vanilla CSS3 (utilizing Flexbox and CSS Grid), and adding interactivity with JavaScript.

Though the website's copy markets an "AI-driven" food service, the project itself focuses purely on frontend development (UI/UX) and contains no actual artificial intelligence or backend code.

✨ Features

• Fully Responsive Navigation: A sticky header with a mobile-friendly hamburger menu that smoothly appears on smaller screens.
• Modern Layouts: Extensive use of Flexbox and CSS Grid for aligning hero sections, feature blocks, meal cards, and testimonial galleries.
• Smooth Scrolling: Implemented via vanilla JavaScript, complete with a polyfill for cross-browser Safari support.
• PWA Features: Includes a manifest.webmanifest, app icons, and theme colors so the site can be installed on mobile home screens.
• Performance Optimized: Uses modern image formats, efficient CSS selectors, and robust Media Queries for breakpoints.

🛠️ Technology Stack

• HTML5: Semantic markup to improve accessibility and SEO.
• CSS3: CSS Custom Properties (Variables), Flexbox, Grid, custom animations, and media queries.
• JavaScript (Vanilla JS): DOM manipulation, IntersectionObserver for the sticky navigation, and smooth scroll routing.

🚀 Usage & Installation

Since this is a static front-end website, no complex build tools, package managers, or backend servers are required.

Simply open index.html in any modern web browser to view the live project.

Tip: If you use VS Code, you can use the "Live Server" extension to serve the files locally and see changes in real-time.

� Project Structure

• index.html — The main entry point and content of the landing page.
• css/ — Stylesheets:
  • general.css: Base resets, typography, color variables, and utility classes.
  • style.css: Main component and layout styling.
  • queries.css: Media queries for tablet and mobile responsiveness.
• js/script.js — JavaScript file handling the sticky nav, mobile menu toggle, and smooth scrolling.
• img/ — Image assets (logos, gallery photos, icons).
• manifest.webmanifest — Metadata file for Progressive Web App (PWA) capabilities.