Skip to content

this is front end mentor junior challenge pricing component with toggle built with [ html & css & js ]

Notifications You must be signed in to change notification settings

0xabdul/Pricing-component-with-toggle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Front End Mentor Challenge


Abdul Profile     Abdul Profile

Challenge Difficulty-junior

Abdul Profile     Abdul Profile    



Frontend Mentor - Pricing component with toggle

Description:

  • The Interactive Pricing Component with Toggle is a web application designed to provide users with a dynamic and user-friendly interface for comparing pricing plans. This project integrates HTML, CSS, and JavaScript to create an engaging user experience.

Key Features:

  • Toggle Functionality: A toggle switch allows users to switch between monthly and yearly pricing options effortlessly. This feature provides flexibility for users to choose the billing cycle that suits them best.

  • Interactive Design: The user interface is designed to be intuitive and visually appealing. Interactive elements such as hover effects and smooth transitions enhance the user experience.

  • Responsive Layout: The pricing component is responsive and adapts seamlessly to various screen sizes and devices. Whether accessed on desktop, tablet, or mobile devices, users can enjoy a consistent experience.

  • Accessible Design: Accessibility considerations are integrated into the design of the pricing component to ensure that it is usable by all users, including those with disabilities. Semantic HTML elements and ARIA attributes are used to enhance screen reader compatibility and keyboard navigation.


Technologies Used: ⚔️

  • HTML: The structure of the pricing component is built using HTML, with semantic markup to enhance accessibility and SEO.

  • CSS: Cascading Style Sheets (CSS) are used to style the pricing component, including layout, typography, colors, and other visual elements. CSS transitions and animations may be implemented to enhance interactivity and user experience.

  • JavaScript: JavaScript is used to implement the toggle functionality and dynamic pricing display. Event listeners are added to handle user interactions, and DOM manipulation is used to update the pricing information based on the user's selection.

Preview Img : 📷

desktop preview :

desktop-design-annually



live site (url) 🖼️


Author

Acknowledgments

About

this is front end mentor junior challenge pricing component with toggle built with [ html & css & js ]

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published