Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

Hey, sorry to be a bother again, but i’m really confused as to what I am doing wrong here.
13. Your .read-more element should have a hover effect.
21. Your .post-img element should have a border-bottom value.
These keep coming up as wrong. I am certain that I have the elements and attributes needed.
Thanks

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 href="styles.css" rel="stylesheet" />
</head>
<body>
    <div class="blog-post-card">
        <img src="https://www.craftableworlds.com/wp-content/uploads/2020/10/AuroraTechScan.jpg" alt="Large Spaceship from Subnautica" class="post-img" >The Aurora</img>
        <div class="post-content">
            <h2 class="post-title">The Aurora, and why it was doomed.</h2>
            <p class="post-excerpt">The Aurora, one of Alterra's most capable ships, crashed on Planet 4546B, Outer Ariadne Arm. This was claimed to be impossible, as the Aurora was, to quote the words of the CEO of Alterra Corp: "Virtually invincible".</p>
            <a href="https://subnautica.fandom.com/wiki/Aurora" class="read-more">Read More</a>
        </div>
    </div>
</body>
</html>

/* file: styles.css */
.blog-post-card {
  background-color: white;
  border-radius: 10px;
  width: 400px;
  text-align: left;
}

.post-img {
  width: 400px;
  border-bottom: 4px;
}

.post-content {
  padding: 2px;
}

.post-title, .post-excerpt {
  color: teal;
}

a:hover {
  color: blue;
  text-decoration: none;
}

.read-more {
  background-color: teal;
  display: inline-block;
  margin: 2px;
  border-radius: 10px;
  color: white;
  padding: 10px;
  text-decoration: none;
}

.read-more:hover {
  color: blue;
}

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

ignore this, sorry fixed it.

my apologies

1 Like