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

• Frontend Mentor - Single price grid component solution

  • Table of contents

  • Overview

    • The challenge
    • Screenshot
    • Links

  • My process

    • Built with
    • What I learned
    • Useful resources

  • Author

  • Acknowledgments

  • Useful resources

• Author
• Acknowledgments

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

Links

• Solution URL: Github
• Live Site URL: Netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

With making this project, I learnt to make layout of web pages using CSS Flexbox. Also learnt how to make same page for mobile view.

Useful resources

• CSS Flexbox - This helped me for learning CSS Flexbox. I really liked this article. and will recoomend everyone who wants to learn CSS Flexbox.
• FreeCodecamp - This is an amazing website which helped me learning responsive web design. You may check it once.

Author

• Linkedin - Saurav Kumar Sonu
• Frontend Mentor - ItsmeSauravSonu
• Twitter - @saurav_s07

Acknowledgments

I would like to thank Front-End Mentor team for giving me this opportunity.