Hey, nice project. Well done.
I suggest that you be more general with your CSS, so it becomes more scalable. Imagine this component as part of a larger site, where other CSS styles are affecting it. You should set the stage on the body or a higher-level parent to fully leverage the cascading nature of CSS.
Also, Images don't behave well as flex elements. When dealing with this situation, you should wrap them in a div. This will make it easier to center them and set the width of the image.
One feature that you didn't include in your project was the hover state. Note that this component is intended to lead the user to another blog page, so the <h1>
should have an <a>
tag. This will change the cursor to a pointer and allow you to redirect the user to the other page. Styling the hover state is as simple as:
h1 a:hover {
color: var(--yellow);
}
I hope you find value in theses tip.