Tell us what’s happening:
Hey, the system seems to be broken. I clearly have the lines of code needed to complete the tests, but it won’t let me. Any ideas on how to fix?
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;
}
.read-more {
background-color: teal;
display: block;
margin: 2px;
border-radius: 2px;
padding: 2px;
color: white;
}
.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