Frontend Mentor - Interactive pricing component solution

Live Site

Table of contents

• Frontend Mentor - Interactive pricing component solution
  • Table of contents
  • Overview
    • The challenge
    • Page view and pricing totals
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned

Overview

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

Page view and pricing totals

Here are the different page view ranges and the corresponding monthly price totals:

• 10K pageviews / $8 per month //2
• 50K pageviews / $12 per month //4
• 100K pageviews / $16 per month //6
• 500k pageviews / $24 per month //8
• 1M pageviews / $36 per month //10

If the visitor switches the toggle to yearly billing, a 25% discount should be applied to all prices.

Screenshot

• Desktop
• Mobile

Links

• Live Site

My process

Built with

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

What I learned

Working with inputs of types range and checkbox can be challenging, because several lines of CSS are needed to style these inputs. However, the final result achieved by this changing these inputs is awesome! As a source of information, I used this post from CSS tricks. It's well explained, and for sure I will be reading it again when my next project demands such a styling.