Frontend Mentor - Four card feature section solution

This is a solution to the Four card feature section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Your challenge is to build out this feature section and get it looking as close to the design as possible.

Your users should:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Screen_Mobile_375

Screen_Mobile_425

Screen_Tablet_768

Screen_Laptop_1024

Links

• Solution URL: Github Repo
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• css property transform which transforms the div by 50% on y-axis transform: translateY(50%);
• box-shadow codepen resources

Author

• Frontend Mentor - @archana-nagaraj
• Github - @archana-nagaraj
• Email - archana.nagaraj

Had fun building! 🚀