NutriWeb

NutriWeb is a responsive frontend web application designed to promote and manage a food subscription service that provides healthy, personalized meals delivered straight to your door. This project utilizes modern web technologies like CSS Grids, Flexbox, and JavaScript for a seamless user experience across all devices.

Table of Contents

1. Navbar and Header Section
2. Main Hero-Section
3. Featured in Section
4. How It Works Section
5. Meals Section
6. Testimonial and Gallery Section
7. Pricing and Feature Section
8. Call to Action Section (Form)
9. Footer Section

Overview

NutriWeb aims to simplify healthy eating with:

• Personalized meal plans tailored to individual tastes and nutritional needs.
• Easy navigation to learn, explore, and subscribe to our services.
• It have features like :
  • Responsive Design: Clean and responsive design for a great user experience.
  • Sticky Navigation: JavaScript adds a CSS class to the navigation bar when the user scrolls past a certain point, ensuring it stays fixed at the top.
  • Mobile Navigation: JavaScript adds event listeners to the hamburger menu icon for toggling the menu visibility. Smooth animations are implemented for opening and closing.

Features

• Dynamic Navigation: JavaScript-powered navigation menu for mobile devices.
• Responsive Design: Fully optimized for desktop, tablet, and mobile viewing.
• Interactive UI: Clear call-to-actions (CTAs) and engaging content layout.
• Sections with Mini-Sections: Structured information for better content flow.

Technologies Used

• HTML5: For semantic and structured markup.
• CSS3: For styling with Grids and Flexbox.
• JavaScript: For dynamic functionalities (e.g., mobile navigation).

Project Sections

1. Header:
   • Contains the logo and main navigation links.
   • Includes the mobile menu icon for smaller screens.
2. Hero Section:
   • Features a prominent headline and call-to-action.
   • Designed to grab the user's attention immediately.
3. About Section:
   • Provides details about the website or the purpose of the project.
4. Features Section:
   • Highlights key features or services with visually appealing layouts.
5. Gallery Section:
   • Displays images or visuals relevant to the project.
6. Testimonials Section:
   • Showcases client or user feedback with a clean and readable layout.
7. Pricing Section:
   • Displays pricing plans (if applicable) with clear and concise information.
8. Contact Section:
   • Includes a form or contact details for user inquiries.
9. Footer:
   • Contains additional links, social media icons, and copyright information.

How to Use

1. Explore the How It Works section to understand the service.
2. Browse through the Meals section to view available options.
3. Check customer reviews in the Testimonials section.
4. Compare pricing options in the Pricing section.
5. Sign up for a free trial via the Try for Free form.

Setup

1. Clone this repository to your local machine:

   git clone https://github.com/ratandeep1017/NutriWeb-Frontend-Project.git

2. Open the index.html file in any web browser.
3. Ensure a stable internet connection for full functionality.

Copyright © 2024 NutriWeb, Inc. All rights reserved.