Frontend Mentor - Interactive pricing component solution
This is a solution to the Interactive pricing component challenge on Frontend Mentor.
Table of contents
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
Screenshot
Links
- Solution URL: https://www.frontendmentor.io/solutions/interactive-pricing-component-solution-d1TbFV8z2
- Live Site URL: https://gabrielfmpinheiro.github.io/Interactive-pricing-component/
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
- https://www.youtube.com/watch?v=BQSNBa3gZJU - This video helped me to create a amazing toggle
- Ehttps://www.youtube.com/watch?v=BrpiNUf2XCk - This video helped me to create a slider using CSS only
- https://html-css-js.com/css/generator/box-shadow/ - This helped me to create box-shadows
Author
- Linkedin- Gabriel Pinheiro
- Frontend Mentor - @GabrielFMPinheiro
- Codewars - @GabrielFMPinheiro
