Blog Preview Card using html and CSS

What challenges did you encounter, and how did you overcome them?

Challenge #1: Getting the black background for the preview card:

• I initially was going to use two cards, one the preview card and the other a black-color background card. I had to learn a bit more on 'position', its types and got some understanding on how it works. I was already having trouble positioning/arranging the cards just right...figured developing the active state for it adds more complexity. So I looked into the solutions of others and saw one use 'box shadow' instead of how I did it. It was a lot more straightforward compared to my approach. So I used 'box-shadow'.

Challenge #2: Developing the active state.

• The logic goes as follows (for me at least)- Hover over the h1 (child) tag and affect the preview-card (parent) tag.
• But I hadn't come that right off the bat. At first I had developed the hover effect separately, the outcome was an odd one. Hover over the h1 tag, get it to turn yellow. Hover over the preview-card, get it to increase box-shadow.
• Realized 'Hang on! I should hover over the h1 tag and get it to turn yellow and the preview card to activate its hover effect simultaneously'. Didn't want to resort to ChatGPT...did a bit of searching around, found out about has(), not(), etc. Finally, found an article on stackoverflow mentioning 'pointer-event' and then problem solved!

What specific areas of your project would you like help with?

I'd like help with figuring out how to make the preview card exactly centered. Its centered horizontally, but not vertically. Despite, justify-content and align-items...perhaps I put it in the wrong tag? should I put it in the body tag directly?