Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

I keep getting the same error for the background-color: white; css line but can’t figure out what’s wrong. I’ve cleared it and retyped several times. Please help.

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>
<body>
    <div class="blog-post-card ">
<img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="blog post card">    

<div class="post-content ">
<h2 class="post-title">Blog Post Card</h2>
<p class="post-excerpt">My Blog Post summary</p>
    <a class="read-more" href="">Read More</a>
    </div>

</div>
</body>
</html>

/* file: styles.css */
.blog-post-card {
background-color: white;
border-radius: 20px;
width: 350px;
text-align: center;
}
.post-img {
width: 100%;
border-bottom: 5px solid #333; 
}
.post-content {
padding: 20px;
}
.post-title {
    color: #333;
    margin: 0 0 10px 0;
}
.post-excerpt {
    color: gray;
    margin: 0 20px;
}


.read-more {
    color: white;
    background-color: #333;
    text-decoration: none;
    margin-top: 10px;
    padding: 10px 15px;
    display: inline-block;    h
    border-radius: 5px;
}
.read-more:hover {
    background-color: #555;
}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

Allow me to elaborate on this. It seems strange that only the first declaration block within the .blog-post-card selector is in error while the other three declaration blocks contained no errors. This afternoon I deleted all for declaration blocks and re-entered all of them hoping that might make a difference. But, NO, only the background-color is showing as an error. This is the only issue that is keeping me from passing all test items. Please help me get past this point. And I will gladly take egg on my face if you can point out something I am doing wrong. I’m in my fourth day waiting on a reply. BTW - I have very low vision and rely on NVDA for navigation. Thanks.

2

Hi @FrankHogsed,

You have a stray “h” between the display and border-radius property settings.

Happy coding!

3

Tell us what’s happening:

Sorry if this appears like a second post but I couldn’t find my previous post so I could add to it. I’m still getting the same failure as before and was told I had an erroneous character that needed to be removed (which I did). But I still failed with the same error. I have completely retyped all css and everything passed except for the background-color: white; declaration for the .blog-post-card selector. I really hope you can find something I’m just overlooking. Thanks in advance.

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>
<body>
    <div class="blog-post-card">
<img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="blog post card">    

<div class="post-content ">
<h2 class="post-title">Blog Post Card</h2>
<p class="post-excerpt">My Blog Post summary</p>
    <a class="read-more" href="">Read More</a>
    </div>

</div>
</body>
</html>

/* file: styles.css */
.blog-post-card {
  background-color: white;
  border-radius: 20px;
  width: 350px;
  text-align: center;
overflow: clip;
}
.post-img {
width: 100%;
border-bottom: 5px solid #333;
}
.post-content {
  padding: 20px;
}
.post-title {
color: #333;
margin: 0 0 10px 0;
}
.post-excerpt {
color: #667;  
margin: 0 20px;
}
.read-more {
color: white;
background-color: #333;
text-decoration: none;
margin-top: 10px;
padding: 10px 15px;
display: inline-block;
border-radius: 5px;
}
.read-more:hover{
background-color: #555;  
}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

4

Hi @FrankHogsed,

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

Happy coding!

5

Tell us what’s happening:

I’m starting to ware out on this one! This is the third time I’ve created a new post because I am unable to locate my previous post and provide a reply. That being said, from my previous post I received this reply:
Hi @FrankHogsed,
Your solution works from my end. Please try one of the following steps to move forward… still could not get a pass even after clearing all browsing data and tried both firefox and chrome. Any other suggestion?

So,I followed the above steps to no avail.

Your code so far

<!-- file: index.html -->
E<!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>
<body>
    <div class="blog-post-card">
<img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="blog post card">    

<div class="post-content ">
<h2 class="post-title">Blog Post Card</h2>
<p class="post-excerpt">My Blog Post summary</p>
    <a class="read-more" href="">Read More</a>
    </div>

</div>
</body>
</html>

/* file: styles.css */
.blog-post-card{
  background-color: white;
  border-radius: 20px;
  width: 350px;
  text-align: center;
overflow: clip;
}
.post-img {
width: 100%;
border-bottom: 5px solid #333;
}
.post-content {
  padding: 20px;
}
.post-title {
color: #333;
margin: 0 0 10px 0;
}
.post-excerpt {
color: #667;  
margin: 0 20px;
}
.read-more {
color: white;
background-color: #333;
text-decoration: none;
margin-top: 10px;
padding: 10px 15px;
display: inline-block;
border-radius: 5px;
}
.read-more:hover{
background-color: #555;  
}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card
https://www.frhDeecodecamp.org/learn/responsive-web-design-v9/lab-blog-post-card/lab-blog-post-cardFYI - I just tried again using edge having gone through the steps to clear editors followed by ctrl/f5, pasted from vscode back into html and css. Got the same failure on test 9 about background color: white;. Is there any way on your end that you can just force a pass so I can move forward showing this as completed?

6

Sorry; we don’t do that.

Your code is still passing on my end, which is strange, because when I go through the user stories, it doesn’t look like User Story #4 was implemented and User Story #9 has a property that was not implemented as asked.

Also, you were not asked to add overflow: clip; to the .blog-post-card class.

And then there’s this stray ‘E’ in your HTML.

7

I have merged all of your duplicate topics.

Please do not create duplicate topics for the same challenge/project question(s). If you need more help, then respond back to the original topic you created with your follow up questions and/or your updated code and question.

The duplicate topics have been unlisted.

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Thank you.

8

So, this morning I tried once again to get this to pass. My steps using Chrome: Cleared all browsing data, logged back in to FCC, went to Continue Learning which took me to Design a Blog Post Card, activated Reset Code, pressed CTRL/F5, pasted my html and css, activated Check your code… failed again on test 9. So, having repeated this now several times I’m wondering if you will just allow me to email my login credentials and you copy/paste my code from what is available on the forum and see if this will pass for you? That’s about all I can come up with… and I’m still open to the possibility that you may be able to find where I have fat-fingered something.

9

we are unable to mark the step as completed for you, please navigate on the next step on your own if you are unable to complete this one

10

Ok, I’ll move forward but will be keeping this lesson in my vs code folder and may come back to it again later after I successfully get a pass on another challenge. Thanks.

11

Are you doing point 4?