Profile card using Flexbox

Hi, Stacey! 👋

Positioning those circles is indeed a tricky thing to do. But, it is possible to do it. So, I recommend making those circles as background images of the body element instead. Then, you can use viewport units or even clamp() function to position them dynamically according to the user's screen size. I recommend taking a look at the ApplePieGiraffe's solution for this challenge as an inspiration.

For the bg-pattern-card.svg, I made it as an img element. It's because if I set it as a background image, I have to do a lot more work like specifying the height of it, setting the background repetition, etc. Also, since it is a decorative image, I left the alt="" empty so that screenreader users won't have to listen to the decorative elements.

I hope this answer your questions!

Hi Stacey, how are you?

You did a good job again, I found the way you positioned the background images very interesting. I remember that I had a hard time positioning the two circles, I spent a few minutes on goolge looking for some useful article hahahahah

I have two tips that I think you will like:

1- Document should have one main landmark, you could have put all the content inside the main tag click here

2- Page should contain a level-one heading. click here

The rest is all very good! hope it helps 👍