Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

What’s wrong with this CSS hover challenge?

I’ve tried various solutions and all have failed.

What am I missing here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post Card</title>
</head>
<body>
  <div class="blog-post-card">
    <img class="post-img" alt="?" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg">
    <div class="post-content">
    <h2 class="post-title">blog post</h2>
    <p class="post-excerpt">blog post</p>
    <a class="read-more" href="#">Read More</a>
  </div>
  </div>
  
</body>
</html>

/* file: styles.css */
.blog-post-card {
  width: 20vw;
  background-color: white;
  border-radius: 10px;
  text-align: center;
}

.post-content {
  padding: 20px;
}

.read-more:hover {
  color: #FFD700;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

review user story 9 please

3

Done that - made no difference. Got any other ideas?

5

user story 9 says " * A hover effect that changes its background color.", you were not changing the background color, but it’s great that you solved it yourself

I was going to point out the exact line of user story 9, but you managed on your own! that’s a great success

next time you ask for help you may want to try these steps on your own

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.

6

9. Your .blog-post-card element should have a white background. This has not been included in my code and has no affect on step 14.

7

User story 9, not test 9

user story 9 has the text The .read-more element should be styled like a button and have and then a bullet point list. Relevant bullet point was the last one

8

I prefer to work one step (or test) at a time. Otherwise, errors that appear at the very end can leave you unpicking large amounts of code. This incremental approach is more efficient and practical for me, as it helps highlight mistakes early and supports the learning process.

9

that’s a great approach, just be sure to not ignore the user stories, they are often more detailed. In this case the test does not specify what kind of hover effect you need to use, the user story does

10

No one is forcing you to use the forum

This pointed you to the exact information that you needed.