My challenge for this project was to build out this blog preview card component and get it looking as close to the design as possible in only 30 minutes.
I was able to complete the component in vanilla HTML and CSS in just 29 minutes. Success!
I took another 10 minutes to create this readme and deploy the site to Netlify.
Hi @joekotvas,
Congratulations!
I like your solution and the challenge that you made for yourself. Keep it going!
Hi @VanshikaSabharwal,
Good job, I like your solution!
If you are wondering what you can improve in your solution:
you could add padding on paragraps, it will look much better.
The second thing is to center the card in the middle of the page adding min-height:100vh on the body and use for example display:flex and center it with justify-content: center and align-items : center or use display:grid and center it with place-items:center.
I hope that it will will help.
Happy New Year! 🥳
Hi @mohit-sonii,
Nice work! I thought that I would offer you some advice.
If you want to center your card, use display: flex along with justify-content: center and align-items: center on the body tag, and make sure it's at least 100vh. For example, set min-height: 100vh.
You can use a CSS selector with the hover pseudo-class like this: h2:hover. It makes the heading change color when you hover over it:
h2 {
font-weight: 700;
}
h2:hover {
color: [your-color-here];
}
And some advice for optimization: You don't need to import all weights of fonts; you can choose the 2 that you use most.
I hope this helps you.
Is there a better/optimal way to create the hover effect when hovering over the image?
Hi @Justine-5,
Nice solution and good job!
In response to your question, it's considered good practice to specify which properties you want to include in the transition. By default, the transition affects all properties.
You can use something like this:
transition: 150ms ease-in-out opacity;
I hope this has been helpful.
Happy New Year!
