Frontend Mentor - Four card feature section

This is a solution to the Four card feature section 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:

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.

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)

Links:

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

My process:

Built with:

• HTML5, CSS3
• Mobile-First Approach
• 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
• Writing DRY code by combining similar styles
• More advance SCSS techniques

---

Author:

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