Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

Will not pass step 14.
14. Your .read-more element should have a hover effect

in my CSS i have text-decoration: none; , color: brown; , border: 3px solid red; . I think that’s about every effect I can give it?

I need help. Already tried in a incognito window.

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 style= "background-color: gray;">
        <main>
            <div class="blog-post-card">
                <img src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="Person typing on computer" width="50%" class="post-img">
                <div class="post-content">
                    <h2 class="post-title"> Learn Web Development in 2026</h2>
                    <p class="post-excerpt"> With freeCodeCamp's amazing program you can learn to code at your own pace - with lessons made by experts.</p>
                    <a href="example.com" target="_blank" class="read-more">Read More</a>
                </div>
            </div>
            
        </main>
    </body>
</html>

/* file: styles.css */
.blog-post-card {
  border: 2px solid black;
  border-radius: 2px;
  background-color: white; 
  width: 600px;
  text-align: center;
}
.post-content {
  padding: 10px;
}
.read-more {
  background-color: wheat;
  margin: 10px;
  display: inline-block;
  border: 2px;
  border-radius: 2px;
  padding: 3px;
}
.read-more:hover {
   color: brown;
   text-decoration: none;
   border: 3px solid red;
}
.post-img {
  width: 600px;
  border-bottom: 2px solid;
}
.post-title{
  margin: 1px;
  color: slategray;
}
.post-excerpt{
  margin:1px;
  color: slategray;
}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

The user story mentions:

The .read-more element should be styled like a button and have:
- A hover effect that changes its background color.

Whereas currently your CSS is only changing the text color, the text decoration and the border.

1 Like