Profile Card Component using BEM & SASS/SCSS

What are you most proud of, and what would you do differently next time?

I am most proud of being able to complete the challenge quicker than the last challenge. Maybe because this one had less content than the other? In any case, I am also proud of the fact that I'm becoming more accustomed to the BEM methodology. I can feel like it!

One of the tings I've done this time was created and used my own CSS reset. In tyhe beginning, I did not to see a thorough use case for having a CSS reset, but now after the reset browser updates, I see its necessary. Going forward, I will continue updating and using my own custom CSS resets, tailoring it to my style.

What challenges did you encounter, and how did you overcome them?

The biggest challenges for this project is the box-shadow on the card and setting up the two background images found behind the card.

For the box-shadow, it is difficult for me to tell what shadow color was used for the card. It looks like it uses the color black which is not present as a color in the style guide. The shadow also has a natural look to it with a big spread added to it. I tried to replicate this using the blue color found in the style guide. Though it lacks the spreads seen in the original it still looks nice.

As for the 2 background images, setting the position for these was a bit complicated. You would thing setting background-position: top left, bottom right; would be enough... But its not. In fact, if you use these corresponding position values, you would need to use negative numbers, background-position: top -xxxvw left -xxxvw, to get the images moving in the direction you want them to be. Regardless, I was able to solve this use a breakpoint value between the desktop version and the mobile version.

What specific areas of your project would you like help with?

Improving the shadow of the card and a better solution to placing the 2 background images that are present behind the card. Like values or method.