@atomic-variable
Posted
Hi Mikhil,
Congratulations on completing your first challenge. I've some suggestions that might interest you,
- Though you have set the exact width and height as per design, it did not reflect on the website. Because by default in the CSS box model, the width and height you assign to an element is applied only to the element's content box, padding and border will take additional space. Setting box-sizing to border-box would fix this issue for you. For detailed information, refer here.
- It is always advisable to add width & height to the images. Apart from matching the design, it allows the element to take up space before it loads and avoid layout shifts.
- I noticed a few unused styles in the head tag, it's better to remove them to avoid unnecessary load.
- The font import is missing from the head tag. You might need to add something like this in your code
<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">
I hope my suggestions help you, Happy coding!
Thanks