Frontend Mentor - QR code component solution

This is a 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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Hi! This is my attempt at the Profile card component challenge.

Like with my recent approaches, I used SASS for my styling structure. This challenge was fairly straightforward, styling the background and styling the profile card itself.

Screenshot

Desktop

Mobile

Links

• Solution URL: Here!
• Live Site URL: Here!

My process

1. I went for a mobile-first approach, first styling the background before moving onto the card.
2. After styling the card, I then fine-tuned the font sizing and spacing of components within the card itself.
3. I then fine-tuned the positioning of the background circles before running through the code again.

Built with

• Semantic HTML5 markup
• SASS
• Flexbox
• Grid

What I learned

I learned about how to work with multiple background images and positioning them in different parts of the webpage. It was a bit of a struggle to get the positioning right.

Author

• Github - sheronimo
• Frontend Mentor - @sheronimo