Profile Card Solution

Hello Tymur, The first issue is with accessibility, the font size is too small for most users. Second one is that you could use the <main> tag for semantic purposes. Third one is with selectors, you don't have to use classes to select something like:

<div class="social-item">
  <p class="number">1.4K</p>
  <span class="text">Photos</span>
</div>

you can just use

<div class="social-item">
  <p>1.4K</p>
  <span>Photos</span>
</div>

p {
  /* whatever */
}
span {
  /*  whatever */
}

So it's not really useful. You could also turn the span into a p and use :first-child and :not(:first-child) pseudo-selectors. Fourth issue is with giving each div width: calc(100% / 3). While the easiest way is to just use 100% width on the parent container and justify-conent: space-between which will put the remaining space in between elements. You can also use the gap property if you want to keep a gap between elements when there is no free space. I've been into coding for a while now, and I can easily spot some common mistakes, don't let this discourage you, keep learning, and you will not make as many mistakes, I will also review your solutions in the future for more help. ~ Oto ❤️

Hi Tymur,

I really appreciate the design and use of pseudo-elements - nice work!

You could consider clearing up your accessibility report including a <h1> and a <main> tag.

Happy coding!

Hey, good solution, how do you do to make the 2 backgrounds circles to stay in the center, i couldnt do that.