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.
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.
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) |
---|---|
- Live Site URL: Website Link - Click Me
- Solution URL: FrontEndMentor - Click Me
- HTML5, CSS3
- Mobile-First Approach
- SASS/SCSS
Recap over some of the major learnings while working through this project:
- Review of Semantic HTML & CSS, CSS Flex Layout
- Writing DRY code by combining similar styles
- More advance SCSS techniques
- Github - @Iron-Mark
- Github - @Mark-Siazon
- Frontend Mentor - @Iron-Mark
- (The Assets used in this project is originally from FrontendMentor)