Profile Card Component

Hello Mohammed Abed!

You did a good job on this challenge. your project has some html issues:

1- Document should have one main landmark, you could have pasted all the main content inside a main tag to make the code more semantic [click here to know more about](https://dequeuniversity.com/rules/axe/4.3 /landmark-one-main?application=axeAPI)

2- Page should contain a level-one heading click here to read about it

3- you can use a media query to activate a padding so that the content doesn't hit the edge

  .container {
    padding: 1rem;
  }
}```

But the rest was really good.
**Congratulations  🥳 **

👾Hello Mohammed, congratulations for your solution!

Instead of using position: relative to align the profile photo you can use margin-top: -50px; to change its alignment and put it between the two layers, using position relative you'll have less control over the profile when the container starts to scale down.

There's also a issue that the image isn't scaling with the container, this is due some fixed width/ height.

Congrats!