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
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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
• See the dropdown menu bar when is clicked

Screenshots

Desktop Layout

Mobile Layout

Links

• Solution URL: https://www.frontendmentor.io/solutions/responsive-landing-page-snap-YC99Ae1Nnq
• Live Site URL: https://emanuelmarques45.github.io/landing-page-snap/

My process

Built with

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

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

This landing page development was good to practice my knowledge on HTML, CSS and JS

Useful resources

• MDN Web Docs - This is one of the best sources of web development information, like HTML tags, CSS properties and JS functionalities.

Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author

• Frontend Mentor - @emanuelm45