Stats Preview Card HTML/CSS/Flexbox

Hi there.

There are many ways to achieve the colour, below is just one idea

You could change your .right-side div to have a background colour with the same purple. You could then use a combination of the mix-blend-mode: multiply property and opacity on your img to achieve your desired effect.

Good luck on future projects :)

Hey there,

You've done a commendable job, covering a wide range of necessary aspects. Keep up the great work! However, I have a few suggestions that could further enhance your work.

It appears that the left side padding hasn't been proportioned correctly. I suggest revisiting this issue to align it more closely with the original design. Additionally, the header doesn't seem to be utilizing the proper font weight and font family as specified in the style guide. Take a moment to review the style guide once again to identify any missed details.

Moving on to the code itself: it seems you've applied an excessive number of classes to a single element. To improve this, consider consolidating your CSS properties within the code. For instance, rather than creating a separate "justify-content-center" class, you could directly apply this property to the container element.

Moreover, it's worth noting that there's an individual divider named "main" available. Utilize this instead of creating a new section and naming it "main."

Regarding "@import 'resets.css';," it might not be necessary. You can simply link this file in the HTML as the first linked file to avoid redundant reassignment (remember the principle of DRY - Don't Repeat Yourself).

As previously mentioned, properties like "justify-content," etc., don't require individual classes. These are CSS properties that can be directly added to a div.

In some instances, you've created multiple individual classes targeting similar properties. For example, the padding and margin utility classes such as .p-5, .p-10, .m-5, .m-10, and others, could be merged into broader classes to streamline the code and reduce repetition.

By grouping related properties under fewer classes, you can adhere more closely to the "Don't Repeat Yourself" (DRY) principle. This approach simplifies your code and makes future updates more efficient.

Consider designing classes that encompass a range of values for specific properties, like .padding-small, .padding-medium, etc., instead of creating separate classes for each value. Similarly, defining a few classes that combine multiple properties, like .flex-center for align-items: center and justify-content: center, could improve readability and consistency throughout the project.

In addition to these suggestions, your dedication is evident, and with these improvements in mind, your work is sure to continue progressing. Your dedication is evident, and with these suggestions in mind, you're sure to continue progressing.Keep up the good work!

Best regards, Lirone Fitoussi.