Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

On the preview i hover over the text and it shows me a diffrent color but in the test it says i need to apply a hover effect on the .read-more which i did in styles.css and it wont let me pass for some reason

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="styles.css">
    <title>Blog Post Card</title>
</head>
<body>

  <div class="blog-post-card">
    <img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="Person typing on a computer">
    <div class="post-content">
      <h2 class="post-title">Learn Web Development in 2024</h2>
      <p class="post-excerpt">Stay ahead of the curve with the latest trends in web development. Discover what's new and exciting in 2024</p>
    <a class="read-more" href="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg">Read More</a>
  </div>
</body>
</html>


/* file: styles.css */
.blog-post-card {
  border-radius:10px;
  background-color:white;
  width:300px;
  text-align:center;
}
.post-img {
  width:100%;
  display:block;
  border-bottom:2px solid;
}
.post-content {
  padding:10px;
}

.post-title,.post-excerpt {
  color:teal;
  margin:10px;
}
.read-more {
  text-decoration:none;
    transition: color 0.3s ease, transform 0.3s ease;
  color:crimson;
  background-color:beige;
  margin:10px;
  padding:10px 20px;
  border-radius: 999px;
  display:inline-block;
}
.read-more:hover {
  color:blue;
  text-decoration:none;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

A hover effect that changes its background color.

are you changing the background color?