Design a Blog Post Card

HTML-CSS
1

Test 13. Your .read-more element should have a hover effect has failed to pass.

Blog Post Card
photo icon 
<div class="post-content">
    <h2 class="post-title">Learning Fullstack Development</h2>
    <p class="post-excerpt">Learn how to develop a website for both frontend and backend</p>
    <a class="read-more" href="https://x.com/DiabGdkalem" target="_blank">Read More</a>
</div>
</div>

.blog-post-card {
background-color: white;
border: 5px solid brown;
border-radius: 50px;
text-align: center;
padding: 120px;
width: 500px;
}
.post-content {
padding: 85px;
}
.post-img {
width: 500px;
border-bottom: 3px double indigo;
}
.post-title, .post-excerpt {
margin: 20px;
color: maroon;
}
.read-more {
color: black;
background-color: beige;
margin: 35px;
display: inline-block;
border: 3px solid blue;
border-radius: 10px;
padding: 15px;
}
.read-more:hover {
color: green;
}

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Thanks JeremyLT, I found the solution. I had not set the background color to change when the element was hovered over.

4

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

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

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 (').