You've had some great feedback already, but everyone has missed the most important critical problem in this solution. Where is the link to the blog??? This is a functional component with a hover style that indicates it should be interactive. It should act as a signposting component (i.e. a link) to the blog. Without this, the component does nothing at all, like it is broken.
Other tips
- think about the context of where this component would be used. It is extremely unlikely it would act as a page heading so should not have a h1. Use a lower importance heading level.
- look up how and when to write alt text on images. There are a few good posts about this in the resources channel on the frontend mentor discord server.
- try to never have text in divs or spans alone, which are meaningless elements. Use a meaningful element every time, even paragraph has meaning.
- it's better for performance to link fonts in the html head instead of css imports.
- the body should have min-height not height. This is broken on my mobile especially in landscape view because you have limited the height of the body like this.
- work mobile first. I don't think this challenge needs a media query at all actually and wouldn't need it once you remove all the unnecessary heights and widths. But when you do need media queries you shouldn't be setting them like this. Read this post about how to use and define media queries correctly: https://fedmentor.dev/posts/responsive-meaning/
- Get into the habit of including a full modern css reset at the start of the styles in every project. Look up Andy Bell's modern css reset and use that.
Marked as helpful