Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

  1. The .blog-post-card element should have a border-radius property with a value not be 0 at value which it does.
  2. The .blog-post-card element should have a white background, which it does
  3. The target .blog-post-card and set its width property I have added it to the css style sheet
  4. The target .blog-post-card and set its text-align property that is added to the css style sheet
  5. The target .post-content and set its padding property also in the css style sheet
  6. The .read-more element should have a hover effect is added in the css style sheet
  7. The target .read-more and set its background is also added in the css style sheet

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>
</head>
<body>
<div class="blog-post-card">
    <img 
      class="post-img" 
      src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" 
      alt="A student is operating their computer">
    <div class="post-content">
      <h2 class="post-title">Blockchain & AI Development</h2>
      <p class="post-excerpt">
        Blockchain secures the data. AI makes sense of it. Together they're reshaping trust, speed, and intelligence in tech.
      </p>
      <a class="read-more" href="#">Read More</a>
    </div>
  </div>
</body>
</html>


body {
  background-color: #f4f4f4; 
}


.blog-post-card {
  background-color: white;   
  border-radius: 8px;        
  width: 300px;              
  text-align: center;        
}


.post-content {
  padding: 20px;             
}


.post-img {
  width: 100%;               
  border-bottom: 4px solid #ccc;  
}


.post-title,
.post-excerpt {
  margin: 15px;              
  color: #333;               
}


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


.read-more:hover {
  background-color: darkmagenta; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

Did you link your stylesheet in your HTML file?