Submitted 3 months ago

Blog Preview Card using html and CSS

Raashid Arquil• 40

@Rvvshid04

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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?

Community feedback

Darkstar• 1,000

@DarkstarXDD

Posted 3 months ago

By default <body>, divs or sections won't take the full height of the screen. They will only take the height that is needed by the content inside them. You can give the .container section a min-height: 100vh which will force it to take the full height of the screen. Now your component will be centered vertically on the screen.
The attribution should go inside a <footer> landmark element. Not a <div>.

Marked as helpful

Daniel 🛸• 44,230

@danielmrz-dev

Posted 3 months ago

Hey there! 🙋🏽‍♂️

Congrats on completing the challenge! ✅

Your project looks fantastic!

Here's how you center an element vertically and horizontally:

📌 Apply this CSS to the body (skip position or margins to make it work correctly):

body {
    min-height: 100vh;
    display: flex; 
    justify-content: center;
    align-items: center;
}

Hope this helps!

Keep up the great work!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord