CSS Flex

Hello VasileCosmin, Congratulation on completing your first project. Your solution looks nice. I have some suggestions , To tackle the accessibility issues :

• Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.

• For any decorative images, each img tag should have empty ``alt="" (as you did )and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. And for this one <img src="./images/image-avatar.png" alt=""> the alt shouldn't be empty.

-The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden or role presentation with empty alt.

• You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

• You can replace the <div class="attribution">by a <footer > tag and it would be out the < main>.

• You shouldn't use <div class="divider"></div> . you can use border-top property for the class="card-footer".

I really hope this feedback helps , happy and keep coding

Hi, @VasileCosmin ~

Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like BEM structuring on your project.

Here are some of the tips I like to provide.

• On smaller devices, card goes over screen, and I think max-width: 100% can solve this issue.
• I suggest you to try transition on hoverable elements like heading and creator name.
• Font sizes and spacings aren't the same with design. As a front-end developer, it's important to meet pixel-perfect requirements.

https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

Cheers ~