Design a Blog Post Card - Design a Blog Post Card

Curriculum Help
1

Tell us what’s happening:

Can’t figure out how to check off step 20. The image covers the whole width of the card and contains a value of 2px for the border-bottom value

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 href="styles.css">
</head>

<body>
    <div class="blog-post-card">
        <img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="computer screen">
    <div class="post-content">
        <h2 class="post-title">Post Title</h2>
        <p class="post-excerpt">post excerpt</p>
        <a class="read-more">Read More</a>
        </div>
    </div>


</body>

</html>

/* file: styles.css */
.blog-post-card {
  background-color: white;
  border-radius: 10px;
  width: auto;
  height: auto;
  outline: solid red;
  text-align: center;
 border-color: black;
 margin: auto;

}

.post-content {
  padding: 10px;
  outline: solid black
}

.post-img {
  height: auto;
  width: 100%;
  outline: solid black;
  border-bottom: 2px;
  display: block;
}

.read-more {
  color: red;
  background-color: blue;
  border-radius: 25px;
  margin: 25px;
  display: inline-block;
  padding: 5px; 

}
.read-more:hover {
  background-color: yellow;
}

.post-title, .post-excerpt {
  color: red;

}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card
https://www.freecodecamp.org/learn/full-stack-developer/lab-blog-post-card/lab-blog-post-card

2

Hey @trevor20011972

You have to specify the type too like dotted, solid and color too like red or blue or green etc.

For example border-bottom: 4px dotted red;

Hope this helps :sparkles: