Frontend Mentor - Single price grid component

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

Frontend Mentor challenges help improve skills by building realistic projects.

Table of contents:

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview:

The challenge:

To do this challenge, you need a basic understanding of HTML and CSS. Users should be able to:

• View the optimal layout depending on their device's screen size
• Get it looking as close to the design as possible.
• See a hover state on desktop for the Sign Up call-to-action

Preview of initial design:

Screenshots:

Fullscreen View (Desktop)

Animated Preview

Note: This is a Mobile-First Approach & Wait for the GIF to load

All viewports were included (except for the 4k view), in case the observer wishes to see the minor changes.

Desktop View (1440px)	Laptop View (1024px)	Tablet View (768px)

Mobile L (430px)	Mobile M (375px)	Mobile S (320px)

Links:

• Live Site URL: Website Link - Click Me
• Solution URL: FrontEndMentor - Click Me

My process:

Built with:

• HTML5, CSS3
• Mobile-First Approach
  • Grid Layout + Flexbox
• SASS/SCSS

What I learned:

Recap over some of the major learnings while working through this project:

General things I've learned:

• Review of Semantic HTML & CSS, CSS Flex Layout
• Learned how to also use Grid Layout
• Writing DRY code by combining similar styles

---

Author:

• Github - @Iron-Mark
• Github - @Mark-Siazon
• Frontend Mentor - @Iron-Mark
  • (The Assets used in this project is originally from FrontendMentor)