I keep getting this error message saying “Your .post-img element should have a border-bottom value.”
HTML code:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post Card</title>
<h2 class="post-title">Blog Post</h2>
<p class="post-excerpt">ipsum popsum ffffffff</p>
<a class="read-more" href="#">Read More</a>
</div>
CSS code:
body {
background-color: sky-blue;
}
.blog-post-card {
background-color: white;
border-radius: 9px;
width: 50px;
text-align: center;
}
.post-img {
width: 100%;
border-bottom: 20px black;
}
.post-content {
padding: 10px;
}
.post-title{
color: pink;
}
.post-excerpt{
color:purple;
}
.read-more {
color: red;
background-color: gray;
margin:12px 12px 12px 12px;
padding: 2px;
border-radius: 3px;
display: inline-block;
}
.read-more:hover{
background-color:yellow;
}