Solution to a Frontend Mentor challenge: Creating a similar webpage as the design preview provided

  • By Anosha Ahmed
  • Last update: Jan 13, 2022
  • Comments: 0

Frontend Mentor - Single price grid component solution

This is a solution to the Single price grid component challenge on Frontend Mentor.

Table of contents


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


The desktop design VS My desktop solution

The mobile design VS My mobile solution


My process

Built with

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

What I learned

I struggle with box-shadow usually but today I think I finally understood its values a little.

Continued development

I think I am good at flexbox now, so in the future I want to start using CSS Grid.