Frontend Mentor - Profile card component solution

This is Max Ruuen's solution to the Profile card component 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
  • Continued development
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Desktop Layout:

Mobile Layout:

Links

• Solution URL: Frontend Mentor
• Live Site URL: Netlify

My process

Built with

• HTML / CSS
• SASS
• SVG
• CSS Grid

What I learned

This was a fun challenge to complete after taking a short break from my learning, and it taught me that I need to spend more time on background image usage within CSS.

The actual card component I was able to complete from start-to-finish in just over an hour, but the longest part was attempting to find a responsive solution for the background image positioning without using media queries.

Unfortunately I was not able to find an elegant solution without using px values and media queries on the individual images, so I will ensure that I spend some dedicated time on background positioning to sharpen my skills in this area.

Continued development

This should be revisited to implement a better method of background image positioning which is responsive without media queries.

Author

• Frontend Mentor - @ruuendigital
• Twitter - @maxruuen