Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

Test 13 doesn’t pass. I tried setting just the background-color property instead, it also doesn’t pass. It works.

<a class="read-more" href="http://portal.speexx.com" target=“_blank”>Read More</a>

.read-more:hover {
  background-color: beige;
  color: darkslategray;
}

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">
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
    <div class="blog-post-card">
        <img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="Hands typing on a laptop keyboard">
        <div class="post-content">
            <h2 class="post-title">Learn a new language online</h2>
            <p class="post-excerpt">This online language course offers interactive lessons, practice exercises, and real-life conversations to help learners build fluency at their own pace. Accessible anytime.</p>
            <a class="read-more" href="#" target="_blank">Read More</a>
        </div>
    </div>

</body>
</html>


/* file: styles.css */
body {
  background-color: lightgrey;
  font-family: Lato;
}

.blog-post-card {
  background-color: white;
  margin: 150px;
  border-radius: 10px;
  width: 400px;
  max-width: 500px;
  text-align: center;
}

.post-img {
  width: 100%;
  border-bottom: 5px solid black;
}

.post-content {
  padding: 10px;
}

.post-title, .post-excerpt {
  color: darkslategray;
  margin: 10px;
}

.read-more {
  border: 3px solid darkslategray;
  text-decoration: none;
  color: beige;
  background-color: lightslategray;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 6px;
  display: inline-block;
}

.read-more:hover {
  background-color: beige;
  color: darkslategray;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

1 Like
2

Looks like this external resource is causing the issue. It passes if you comment this line.

2 Likes
3

Thanks, this worked for me as well.

Why does this happen, is it a bug or something to do with the code?

4

Your code is fine.
That external resource confused the tests a bit.

1 Like