@RanitManik
Posted
Congratculations on completing this challenge. Here are couple of suggestions for improvement:
- Shadow Effect on Hover
The shadow should grow when hover over the blog card. observe at the active state design closely. To make the shadow grow when hovering over the blog card, you can use the :hover
pseudo-class in CSS. Here's an example:
.blog-card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.blog-card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
This will create a smooth transition effect where the shadow grows when you hover over the card.
- Explicitly Mention Font-Size Property
would strongly recommend you to explicitly mention the font-size property. It's important to set a base font-size
to ensure consistency across different screen sizes. Here’s how you can do it:
body {
font-size: 16px; /* Adjust this value as needed */
line-height: 1.6;
font-family: 'YourFontFamily', sans-serif;
}
h1 {
font-size: 2em; /* Example for heading */
}
p {
font-size: 1em; /* Example for paragraph */
}
Adjust the font-size
property according to your design needs to ensure readability on larger screens.
- Centering the Container
Don't use position properties to center a item like that. Instead use the conventional and more effective one. Using CSS Grid for centering elements is a modern and efficient approach. Here's how you can update your CSS:
body {
min-height: 100vh;
display: grid;
place-items: center;
}
.container {
/* Your container styles */
}
This method ensures that the container is centered both vertically and horizontally within the viewport.
- I hope you find these suggestions helpful for improving your site's design and functionality. Feel free to reach out if you have any questions or need further assistance!
Marked as helpful
@eatwanderexplore
Posted
@RanitManik Thank you for your feedback. I've implemented many of the changes you suggested and it definitely helped.