Tell us what’s happening:
In the Full Stack Developer Certificate, doin
g the last lab of the basics CSS I do everything It says, everything pass but the hover, It says we have to put a haver effect, but It doesn´t work, it displays good, but the system didn’t recognize it
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="stylesheet" href="styles.css">
</head>
<body>
<div class="blog-post-card">
<img src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="A young person coding" class="post-img">
<div class="post-content">
<h2 class="post-title">It's Santiago, and I'm a Software Developer</h2>
<p class="post-excerpt">I'm a Colombian young guy that has been pattioned about coding since I have memory, I love resolving problems and dealing with bugs, I am never gonna be tired of learn, I love challeges and be my best</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</body>
</html>
/* file: styles.css */
body{
font-family: Arial, Helvetica, sans-serif;
background-color: beige;
}
.blog-post-card{
margin: 10% 30%;
background-color: white;
padding: 30px 50px;
border-radius: 50px;
text-align: center;
display: inline-block;
width: 50%;
}
.post-img{
width: 100%;
border: 3px solid black;
border-radius: 30px;
}
.post-title{
margin: 10px 0;
color: black;
}
.post-content{
padding: 10px;
}
.post-excerpt{
color: black;
margin: default;
text-align: left;
}
.read-more{
background-color: rgb(214, 214, 209);
text-decoration: none;
color: rgb(83, 83, 83);
font-weight: bold;
margin: 10px;
padding: 10px;
border-radius: 10px;
display: inline-block;
}
.read-more:hover{
color: #000;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Design a Blog Post Card - Design a Blog Post Card
