Frontend Mentor - Interactive pricing component

  • By Gabriel Pinheiro
  • Last update: Feb 9, 2022
  • Comments: 0

Frontend Mentor - Interactive pricing component solution

This is a solution to the Interactive pricing component challenge on Frontend Mentor.

Table of contents


The challenge

Users should be able to:

  • View the optimal layout for the app depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Use the slider and toggle to see prices for different page view numbers



My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • JavaScript
  • Flexbox
  • Mobile-first workflow

What I learned

  • How to create a toggle and a slider element

Useful resources