Frontend Mentor - Single price grid component solution

This is a solution to the Single price grid component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See a hover state on desktop for the # call-to-action

Screenshot

Links

• Live Site URL: GitHub pages

My process

Built with

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

Continued development

Still getting comfortable with media queries and perfecting it. Also some of the colors and fonts aren't perfect but their close enough.

Useful resources

• MDN Web Docs - this may as well be your home page
• CSS-Tricks - I love this website and you should use it. It really helped me out with understanding flexbox and media queries.

Author

• Frontend Mentor - @fabsnta
• LinkedIn - @santanafabricio

Acknowledgments

Thanks as always to google and css-tricks.com lol