Icon Sets Pricing Card

This project is a solution to the Icon Sets Pricing Card challenge from Frontend Pro. The challenge required creating an interactive pricing card for an icon subscription service, featuring three plans: Basic, Standard, and Premium.

Table of Contents

• Overview
  • Challenge Description
  • Screenshots
  • Links
• Features
• Technologies Used
• Setup and Installation
• Contribution
• Usage
• What I Learned
• Acknowledgements

---

Overview

Challenge Description

The task was to design and implement a responsive pricing card with the following functionalities:

• A tabbed interface for switching between plans (Basic, Standard, Premium).
• Dynamic updates of plan details and prices when tabs are clicked.
• A responsive and visually appealing layout.
• A "Add to Cart" button with a confirmation message.

Screenshots

Links

• Solution : Solution
• Live : Live Site

---

Features

• Tabbed Navigation: Users can toggle between the Basic, Standard, and Premium plans.
• Dynamic Content Update: Plan details, pricing, and features update dynamically based on the selected tab.
• Responsive Design: Fully responsive and adapts seamlessly to different screen sizes.
• Confirmation Toast: A smooth toast notification appears after clicking "Add to Cart."

---

Technologies Used

• HTML5: For the structure and semantic layout.
• SASS/CSS3: For styling and responsiveness.
  • Utilized variables, mixins, and media queries for better maintainability.
• JavaScript (ES6): For dynamic interactivity and event handling.
• Font Awesome: For icons used in the design.

---

Setup and Installation

1. Clone the repository:

   git clone https://gitlab.com/Yashi-Singh-9/icon-sets-pricing-card

2. Navigate to the project directory:

   cd icon-sets-pricing-card

3. Open index.html in your browser to view the project.

Alternatively, use a live server to launch the project for better development experience:

npm install -g live-server
live-server

---

Contribution

For contribution please refer to CONTRIBUTING File.

---

Usage

1. Open the project in any browser.
2. Click on the Basic, Standard, or Premium tabs to view their respective plans.
3. Click on the Add to Cart button to simulate adding a plan to the cart.
4. Observe the toast confirmation message displayed at the bottom of the screen.

---

What I Learned

During this project, I enhanced my skills in the following areas:

• Dynamic Tab Switching: Implementing event listeners to update content dynamically based on user interactions.

• SASS Best Practices: Using variables, mixins, and nested styling to keep CSS clean, scalable, and maintainable.

• Responsive Web Design: Leveraging media queries to create a responsive layout that works across various devices.

• JavaScript DOM Manipulation: Dynamically updating DOM elements and their properties to improve user experience.

---

Acknowledgements

Special thanks to Frontend Pro for providing this challenge and an opportunity to sharpen my frontend skills.

If you’d like to try the challenge yourself, visit the Icon Sets Pricing Card Challenge page.

---

Feel free to suggest any improvements or provide feedback!