Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

Test Case #4: Already have h2 with class “post-title” but still fails
Test Case #13: Already have a:hover but it still fails

What should I do?

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>
    <main>
    <h1 class="title">Free Online course</h1>

    <div class="blog-post-card">

<img src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="test image" class="post-img">

    <h2 class="post-title">Fullstack Course</h2>

<div class="post-content">
This course will help you to become a fullstack developer.
<p class="post-excerpt">HTML, CSS, Javascript, Python, Django</p>
<a href="#" class="read-more">Read More</a>
</div></div>
    </main>
</body>

</html>


/* file: styles.css */
.blog-post-card{
  margin-left:auto;
  margin-right:auto;
  width: fit-content;
  border: solid 3px;
  display:flex;flex-direction:column;
  align-items:center;
  border-radius: 2%;
  text-align:center;
  background-color:white;
}

.post-img{
  height:50%;
  width:100%;
  border-radius:50%;
  border: solid 3px;
  border-color:red;
}

.title{
  text-align:center;
  margin-top:20px;
}
.post-content{
  width: fit-content;
  margin-right:auto;
  margin-left:auto;
  padding:2px 2px 2px 2px;

}
.post-title{
  width: fit-content;
  margin-right:auto;
  margin-left:auto;
  color:blue;
}
body{
  background-color:grey;
}
a:hover.read-more{
  color:red;
  width:100%px
}
a:link.read-more{
  color:rgb(80, 93, 235);
}
.read-more{
  color:green;
  background-color:yellow;
  margin-top:10px;
  margin-bottom:10px;
  margin-left: 10px;
  margin-right:10px;
  display: inline-block;
  padding:10px 10px 10px 10px;
  border-radius:20%
}
.post-excerpt{
  color:orange;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.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

please check again user story 3

3

I’m sorry I don’t understand. User Story3?

4

yes, read user story number 3, the number 3 from the ordered list under the header " User Stories:"

5

Oh! I see it now. I’ll try. Thank you so much!

6

How about No.13?

a:hover.read-more{

  color:red;

  width:100%px;

  background-color:rgb(99, 84, 84);

}

a:link.read-more{

  color:rgb(80, 93, 235);

  background-color:yellow;

}

.read-more{

  color:green;

  margin-top:10px;

  margin-bottom:10px;

  margin-left: 10px;

  margin-right:10px;

  display: inline-block;

  padding:10px 10px 10px 10px;

  border-radius:20%

}
7

the tests want you to use only the class there, not also a