Task_marmeto

Responsive Product Card Grid

This project demonstrates a responsive grid of product cards using HTML, CSS, and JavaScript. The grid adjusts its layout based on the screen size to provide an optimal viewing experience on different devices.

Features

• Responsive Design: The grid layout adapts to different screen sizes, including mobile, tablet, and desktop.
• Product Cards: Each product card displays information such as title, image, price, and vendor.
• Badge: Product cards can display a badge indicating special features or promotions.
• Dynamic Data: Product information is fetched dynamically from an external API.

Technologies Used

• HTML: Structured the layout of the web page.
• CSS: Styled the elements and implemented responsive design using media queries.
• JavaScript: Dynamically fetched and displayed product data from an external API.
• Flexbox/Grid: Used to create the layout and positioning of elements.
• Media Queries: Adjusted the layout and styling for different screen sizes.

How to Use

1. Clone the repository to your local machine.
2. Open the index.html file in a web browser.
3. Explore the product grid on different devices or screen sizes.

Project Structure

Folder name/ │ ├── index.html # Main HTML file ├── style.css # CSS styles for the project └── script.js # JavaScript code for fetching and displaying product data ├── Readme

Credits

• Product data sourced from [API Name].

• Images sourced from [Image Provider].

• Fonts used: [Font Name] from Google Fonts.

  API's

Product data API : https://cdn.shopify.com/s/files/1/0564/3685/0790/files/multiProduct.json

Hosted Link :

https://662b714d8b83d49d77252791--inspiring-brioche-3aa7f7.netlify.app/

!! <> - netlify