This project implements a simple E-Commerce Tabs Layout using HTML, CSS, and JavaScript. It allows users to browse products in different categories (Men, Women, Kids) and displays product details in a clean and responsive layout.
Website Link: https://endearing-pika-af6c4e.netlify.app
To get started with the project, simply clone the repository and open the index.html file in a web browser.
git clone <repository-url>
cd <project-directory>The project consists of the following main files:
- index.html: The main HTML file containing the structure of the web page.
- style.css: The main CSS file with styles for the layout and components.
- script.js: The main JavaScript file containing logic for fetching and rendering products.
- README.md: Documentation file for the project.
The web page displays a header section with a selection title and category buttons (Men, Women, Kids). Users can click on these buttons to view products in the respective categories.
The product details are displayed in a responsive grid layout with images, titles, vendors, prices, and discount information. Users can add products to the cart by clicking the "Add to Cart" button.
Feel free to customize the project to meet your specific requirements. You can adjust the layout, styles, and content based on your design preferences.
- Modify the CSS styles in the
style.cssfile to change the appearance of the components.
- Update the product data in the
multiProduct.jsonfile or use your own API to fetch product information.
Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please create an issue or submit a pull request.
This project is licensed under the MIT License. Feel free to use, modify, and distribute the code for your projects.