"Desing a Blog Post Card" hover effect not working

HTML-CSS
1

Hi! So I finished writing my code for the lab project for the Full Stack certification, but when I run it, it says it doesn’t pass the “13. Your .read-more element should have a hover effect.” However, in the preview, the hover effect does work. What´s wrong with my code?

body {
    background-color: #cdb4db;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: "Raleway", sans-serif;
}

.blog-post-card {
    background-color: white;
    border-radius: 25px;
    width: 400px;
    min-width: 100px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
    margin: 20px
}

.post-img {
    width: 100%;
    max-height: 200px;
    border-bottom: 2px solid brown;
    margin-bottom: 10px;
}

.post-content {
    padding: 20px;
}

.post-title {
    color: #212529;
    margin: 10px;
    font-size: 30px;
}

.post-excerpt {
    color: #343a40;
    padding: 5px;
    font-size: 17px;
}

.read-more {
    color: #212529;
    background-color: #ffafcc;
    margin: 10px;
    padding: 10px;
    display: inline-block;
    border-radius: 15px;
    border: 1px solid #212529;
    text-decoration: none;
}

.read-more:hover {
    background-color: #ffc8dd;
    color: white;
}
1 Like
2

Welcome back to the forum @valedagradi

Please also post your html.

Happy coding

1 Like
3

Here’s the HTML, sorry!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Blog Post Card</title>
</head>
<body>
    <div class="blog-post-card">
        <img src="https://cloudfront-us-east-1.images.arcpublishing.com/infobae/GNIOXQDNHVAW7ILA3RIB3SAUMU.jpg" alt="Chocotorta" class="post-img">
        <div class="post-content">
            <h2 class="post-title">Chocotorta recipe</h2>
            <p class="post-excerpt">Learn how to make this delicious traditional Argentinean cake and impress all your guests.</p>
            <a href="" class="read-more" target="_blank">Read More</a>
        </div>
    </div>
</body>
</html>
4

Welcome back to the forum @valedagradi

The font link element is interfering with the tests.

Happy coding

1 Like