Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

System tells me my code is wrong cause my .read-more has no padding or border-radius when it has them. Also it says my .post-img doesn’t fill the width of the card and that my title and excerpt have no different colors from the default ones.

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 class="post-img" src="https://imgs.search.brave.com/xXCR_nAtSINyIhidSqNYq1UgVr0onLsbHap9xHvx3Fg/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMucGV4ZWxzLmNv/bS9waG90b3MvMjk0/MDY3NDAvcGV4ZWxz/LXBob3RvLTI5NDA2/NzQwL2ZyZWUtcGhv/dG8tb2YtZHluYW1p/Yy1mb3JtdWxhLTEt/cmFjaW5nLWNhci1v/bi13ZXQtdHJhY2su/anBlZz9hdXRvPWNv/bXByZXNzJmNzPXRp/bnlzcmdiJmRwcj0x/Jnc9NTAw" alt="A formula 1 Car">
        <div class="post-content">
            <h2 class="post-title">Formula 1 Experience</h2>
            <p class="post-excerpt">Santander brings to you the ultimate F1 experience with VIP access to all the team garages and unique activities with the drivers.</p>
            <a class="read-more" href="https://www.instagram.com/formulasantander/">Read More</a>

            </div>
        </div>

</body>
</html>

/* file: styles.css */
.blog-post-card{
  background-color:white;
  border:2px solid red;
  border-radius:4px;
  width: auto;
  text-align: center;

  
}
.post-img{
  width:410px;
  border-bottom:10px solid yellow;
}
.post-content{
  padding:10px;
}
.post-title{
color:red;
margin:15px;
}
.post-excerpt{
  color: solid black;
  margin:15px;
}
.read-more{
  background-color:black;
  color:yellow;
  margin:15px;
  padding:8px
  border-radius:4px;
  display:inline-block;
}
.read-more:hover{
  background-color:red;
}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

are you sure you have correct syntax here?

3

That’s what I dont understand. Because before that I also have a border-radius and it’s written in the same way.

4

if you don’t understand what’s wrong with a line, look at the line above it, it may be recognised wrong because the line above has issues

5

I made it. But now it says that my .post-img isn’t filling the width of the card

6

what correction did you made?

7

The padding didn’t had the semicolon

8

ok great

now for the width, you have written 410px, is that the whole width of the card?

9

I modified it. Now .blog-post-card has a width of 407px and .post-img has a width of 100% but it’s still wrong. No semicolons missing btw

10

uhmmm, please share your current css

11

.blog-post-card{

background-color:white;

border:2px solid red;

border-radius:4px;

width:407px;

text-align: center;

}

.post-img{

width:100%;

border-bottom:10px solid yellow;

}

12

and what error are you getting?

13

.post-img isn’t filling the width of .blog-post-card

14

is that the exact error message you are getting?

anyway that is not what happens when I test your code

15

Your .post-img element should fill the card’s width.

16

image

please share all your code

17

.blog-post-card{

background-color:white;

border:2px solid red;

border-radius:4px;

width:100%;

text-align: center;

}

.post-img{

width:100%;

border-bottom:10px solid yellow;

}

.post-content{

padding:10px;

}

.post-title{

color:red;

margin:15px;

}

.post-excerpt{

color:red;

margin:15px;

}

.read-more{

background-color:black;

color:yellow;

margin:15px;

padding:8px;

border:2px;

border-radius:4px;

display:inline-block;

}

.read-more:hover{

background-color:red;

}

18

did you make any changes to the html?

19

I don’t think so. Everything I’ve edited has been the css styles

20

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.