Product preview card component using CSS Flex

Hey Abdulrahman Zaki,

Your solution is looking fantastic! It is impressive to do this without the figma file

I was just looking at the styles.css file and noticed the technique being used to apply the classes with regards to specificity. I am not familiar with this technique, is there something in particular you'd like to achieve with this?

For example

section .container .info-box .product-category{
    text-transform: uppercase;
    font-family: var(--s-font);
    margin-bottom: 24px;
    letter-spacing: 4px;
    color: var(--iv-color);
}

This has a specificity of (0,3,1) This is calculated by the section element tag (0,0,1) And three class names (0,3,0)

I think I would instead write

.product-category{
    text-transform: uppercase;
    font-family: var(--s-font);
    margin-bottom: 24px;
    letter-spacing: 4px;
    color: var(--iv-color);
}

This has a single class name so the specificity is (0,1,0)

Taking a look at the documentation for specificity, it is my understanding its best to keep specificity as low as possible when applying property values to classes.

In a small project I'm not sure it makes too much difference but as I understand, when working on larger codebases, specificity might impact the maintainability of the project.

Let me know what you think,

Thanks for reading & great job on completing this challenge

Great work mate, Our solution can differ from the given prototype but the base design should be similar to it. One thing I would like to add that in your GitHub repo you didn't have any Readme file, maybe you missed it.