E-Commerce Website Documentation

Project Overview

This project is an e-commerce website that displays a grid of items for sale. The website has an engaging front page with animations using GSAP, followed by a product display grid that provides detailed shopping information when clicked. The project utilizes HTML, CSS, and JavaScript to create a dynamic and responsive user interface.

Project Structure

The project consists of the following files:

1. index.html: This file contains the main structure of the website's homepage. It includes the scrolling text animation and acts as the entry point of the e-commerce website.

2. product.html: This file is responsible for displaying the detailed information about each product. When a user clicks on an item in the grid on the homepage, they are directed to this page, which shows the product's description, price, and other relevant details.

3. style.css: The primary stylesheet for the homepage (index.html). This file contains the styling rules that define the look and feel of the homepage, including layout, fonts, colors, and responsive design elements.

4. productStyle.CSS: A separate stylesheet specifically for the product.html file. This file styles the product detail pages, ensuring a consistent and visually appealing layout that matches the overall theme of the website.

5. script.js: This JavaScript file contains the interactive elements and functionalities of the website. It handles animations, dynamic content loading, and other UI interactions, such as the side-scrolling text animation on the homepage using GSAP.

6. product.js:JavaScript specific to product.html. Handles functionality on the product detail page.

Key Features

• Scrolling Text Animation: Uses GSAP to create a scrolling text animation on the homepage, adding a dynamic and modern look to the website.
• Responsive Design: The website is designed to be responsive, providing a seamless experience on various screen sizes, including mobile and desktop devices.
• Product Grid: Displays a grid of products on the homepage, which users can click to view more detailed information on the product page.
• Detailed Product Page: Each product has its own page (product.html) that displays in-depth information, enhancing the shopping experience.
• JavaScript Interactions: The script.js file adds interactive functionalities, enhancing user experience through animations and dynamic content.

How to Use

1. Open the index.html file in a web browser to view the homepage of the e-commerce website.
2. Browse the scrolling text and explore the product grid.
3. Click on a product to navigate to the detailed product page (product.html), where more information about the selected product is displayed.
4. The website can be customized by editing the HTML, CSS, and JavaScript files to add more products, change animations, or alter the design.

Technologies Used

• HTML: For the structure of the web pages.
• CSS: For styling and layout (using style.css and productStyle.CSS).
• JavaScript: For interactivity and animations (using script.js).
• GSAP: A JavaScript library for animations, used to create the scrolling text effect.