Tell us what’s happening:
for the Design a Blog Post Card, I have completed all of the steps and passed all the tests except for some reason, the hover effect for the .read-more element is showing up on the console, but not passing the test.
I have the following for that in my code:
.read-more :hover {
color: black;
}
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">
<title>Blog Post Card</title>
<link rel="stylesheets", href="styles.css" >
</head>
<body>
<div class = "blog-post-card">
<img class = "post-img", src = "https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg", alt = "document" />
<div class = "post-content">
<h2 class = "post-title">My Blog</h2>
<p class = "post-excerpt">This is the blog post card</p>
<a class ="read-more">Read More</a>
</div>
</div>
</body>
</html>
/* file: styles.css */
.blog-post-card {
background: white;
width: 300px;
text-align: center;
border: 2px solid black;
border-radius: 10px;
}
.post-img {
width: 100%;
border-bottom: 4px solid black;
}
.post-content {
padding: 5px;
}
.post-title, .post-excerpt {
color:green;
margin: 5px;
}
.read-more {
color: red;
background-color: yellow;
margin: 7px;
display: inline-block;
border-radius: 5px;
padding: 7px;
a:hover::read-more{
background-color: black;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Norton/142.0.0.0
Challenge Information:
Design a Blog Post Card - Design a Blog Post Card
