Static Blog preview card using HTML and CSS

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!