Hey there, great job on your first challenge ! It looks amazing, almost pixel perfect. Here are some suggestions :
-
Although this is a very small card challenge, it might be a good idea practicing having descriptive class names ! For example, instead of using <div class="container">, you can try maybe using<div class="card">.
-
I see that you've explicitly set your card's height and width. Perhaps instead of doing that, you should consider using max-height and max-width instead, as these properties allow your card to be responsive, so they can shrink and grow according to the screen size !.
-
In your container div, there is actually no need to use display: flex and flex-direction: column. This is because both the h2 and p tag are block-level elements, meaning that they occupy the entire width of their container.
Extra suggestions :
Perhaps instead of defining margins for every element in your card, it might be easier to simply group them together by putting them in a div, for example, your h2 and p tag can go together in one div. After that, you can apply styling on this container, such as your margin-inline, and other margins. Also it might be a good idea to add padding to the card. This way you can define padding for all four corners of the card, and reduce the need to re-define margins repeatedly.
Consider using rem and em units instead, as this also helps with responsiveness. Here's a video by Kevin Powell that's worth checking out on this !
If you found this feedback helpful, feel free to leave me helpful remark and thumbs up ! Good luck on your next challenge !
