profile-card-component with flex box

Hello @GrayTechFun!

Your project looks great!

I had quite a hard time placing that background correctly 😅 But I had help from people in the community and that's how I did it:

background-color: var(--Dark-cyan);
background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
background-repeat: no-repeat, no-repeat;
background-position: right 52vw bottom 35vh, left 48vw top 52vh;

I hope it helps!

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Firstly, remove the defined width from the <article> tag (e.g.: width: 1440px;) since it should take up 100% of the screen width and adapt to any device.

  Next, use the following code to position the elements:

   background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  

  This positions the two elements separated by a comma, and using vw and vh ensures they resize appropriately regardless of the device.

• Additionally, I recommend swapping the <main> and <article> tags. The <main> tag should represent the main content of the document and should not be nested inside an <article> tag.

I hope you find it useful! 😄

Happy coding!