Frontend Mentor - Single price grid component solution

This is CKodes's solution to the Single price grid component challenge on Frontend Mentor. This solution was completed without using the Bootstrap framework.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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 Sign Up call-to-action

Screenshot

Desktop Screenshot

Mobile Pg 1

Mobile Pg 2

Links

• Solution URL
• Live Site

My process

Built with

• HTML | CSS

Continued development

• Refactor code. I feel like there is too many CSS.

Useful resources

Google Extensions: ColorPick Eyedropper

• I did not have access to the Figma files for this solution and the colors on the free starter files seemed off so I used this tool to find the closest matching color to the design.

Author

• Frontend Mentor Profile @CKodes

Acknowledgments

Thank you to Dr. Angela Yu of The App Brewery for The Complete 2021 Web Development Bootcamp course and for introducing Frontend Mentor as a means to hone FE dev skills. This is my second Frontend Mentor challenge, and it was attempted after completing Lecture 84 - Media Query Breakpoints.