Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

need help in finding a bug in this code of mine. please hrlp me find my bug.

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>
<div class="blog-post-card">
<img alt="The impact" class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg">
    <h2 class="post-title">Technology The impact.</h2>
</div>
<div class="post-content">
<p class="post-excerpt">Technology profoundly impacts various aspects of life, offering increased connectivity, access to information, and improved efficiency, while also presenting challenges like privacy concerns and potential for addiction. It has revolutionized communication, making it easier to connect with others across the globe. Moreover, technology has transformed work, education, healthcare, and entertainment, making our lives more convenient and accessible.</p>
    <a class="read-more">Read More</a>
</div>
</body>
</html>

/* file: styles.css */
.blog-post-card {
  background: white;
  border-radius: 5px;
  width: 50px;
  text-align: center;
}
.post-img {
  width: 100px;
  border-bottom: 5px solid green;
}
.post-content {
  padding: 50px;
}
.post-title  {
  color: red;
  margin: 50px;
}
.post-excerpt {
  color: green;
  margin: auto;
}
.read-more {
  color: blue;
  background: red;
  margin: 50px;
  padding: 50px;
  border: none;
  border-radius: 50%;
  display: inline-block;
}
.read-more:hover {
  color: brown;
}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

Hi there, :waving_hand:

I’ve carefully analyzed your code and found a few issues that you might want to fix:

  1. Your <div> with the class blog-post-card should wrap the entire body content.
  2. The <h2> tag should be placed after the second <div> and before the <p> tag.
  3. In your CSS file, the .post-excerpt and .post-title classes should not use margin: auto; instead, they should have specific margin values.
  4. The :hover state of your .read-more button should use the background property instead of color.
  5. The .post-img should span 100% width, but it seems restricted to 100px. Try identifying where that limitation is set.

Hope this helps! Let me know if you need a revised version of the code.

1 Like