Blog preview card

Great work on this challenge! Here are a few suggestions for improvement:

• Use semantic HTML. Use <main> instead of <div> for the container and use <article> for the card.

• If you have a <h2> on your page, you'll need a <h1> above it. If you don't want it showing, add a visually-hidden class.

• Don't write your font-size in px. You want to use rem so that your site adapts to the user's settings.

• To fix the active and hover effects you'll need to add:

h2:hover, h2:focus {
color: var(--yellow);
}

.container:hover, .container:focus {
box-shadow: 20px 20px;
}

:hover is a pseudo-class that gets applied when the user hovers over the element. :focus is a pseudo-class that gets applied when the user focuses on the element, for example when the user navigates the site by using the keyboard.

You have used the :active pseudo-class which represents an element (such as a button) that is being activated by the user.