Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

I have changed the width from auto to 150px to 300px to 50% to 100%, randomly to see what might work, but it won’t accept what I enter for the img width.

Also, I’m wondering why “block” wouldn’t work for display under .read-more, but “inline-block” did.

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">
</head>
<div class="blog-post-card"</div>
<img src="https://www.storyblocks.com/video/stock/close-up-of-female-hands-typing-on-the-laptop-keyboard-hx3xhrvfeizdim9us" class="post-img" alt="person typing"</img>
<div class="post-content"</div>
<h2 class="post-title">Person typing</h2>
<p class="post-excerpt">asdfasdfasdfdsfaweaeiee safasfdsf eererew</p>
<a href="https://www.storyblocks.com/video/stock/close-up-of-female-hands-typing-on-the-laptop-keyboard-hx3xhrvfeizdim9us" class="read-more">Read More</a>
<body>

</body>
</html>

/* file: styles.css */
.blog-post-card {
  border: 2px solid red;
  border-radius: 25px;
  width: auto;
  background-color: white;
  text-align: center;
  padding: 50px;
}
.post-content {
  padding: 30px;
}
.read-more {
  background-color: blue;
  margin: 50px;
  display: inline-block;
  border-radius: 25px;
  padding: 30px;
}
.read-more:hover {
  background-color: yellow;
  font-size:18px;
}
.post-img {
  width: 150px;
  border-bottom: 2px dashed;
}
.post-title {
  margin: 20px;
  color: yellow;
}
.post-excerpt {
  margin: 20px;
  color: purple;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:142.0) Gecko/20100101 Firefox/142.0

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

Hi @bkarlan

Check the syntax of the elements.

Use the file mentioned in user story 2.

Happy coding

3

I’m sorry, but what is “user story 2”?

In regards to post-img, I’ve looked at the syntax for post-img but I’m afraid I have no idea how to “fill the card’s width”. I’ve tried everything I can think of and have googled this and looked extensively on w3.

4

Hi @bkarlan

  1. Within the .blog-post-card element, you should have an image element with a valid alt attribute and text, and a class of post-img. You can use https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg for the src attribute of the image.

Happy coding

5

there is a list of user stories, and the list is numbered, look at the one with the number 2 in front

7

I see it now, down at the bottom. Make it 100%. I must have looked at that post 10 times prior to you mentioning it but never saw that. I just saw that he had solved it.