Hi @itsmesrishti
I have reviewed your code, and in my opinion, the way you implemented the banner image is very well done. Given that the image is slightly cropped at the sides, using url() with background-image and background-position is an appropriate approach.
I have the following suggestions for the CSS part:
- I noticed that in a couple of places you have defined font-size in the html tag. Avoid using pixel since it does not scale and is bad for accessibility. rem is preferable due to the ability to scale.
- In your variable file, avoid naming the variables like $purple-hover, $cyan-hover because what if the requirement decides to change the color theme from purple to red? That means the name "purple" is no longer valid and you will also have to change the name in various places. Choose a name which is more generic such as $primary-color, $secondary-color.
- Besides defining color as CSS variables, you can also define other properties such as typography, border-radius, shadows, spacing. You can refer to this CSS example
- Your project should have a CSS reset otherwise different browsers will apply their own default stylings. We want a consistent look and feel in all the browsers. Refer to this CSS reset article
Marked as helpful
1
