Design a Blog Post Card - Design a Blog Post Card

HTML-CSS
1

Tell us what’s happening:

My css code is not connecting to my html. can anyone tell me where I got it wrong? I have been staring at this screen for over an hour trying to see where I messed up

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 rel="stylesheet" href="style.css">
</head>

<body>
    <div class="blog-post-card">

        <img src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="typing" class="post-img">

        <div class="post-content">

            <h2 class="post-title">Coding, a begginers guide to HTML</h2>

            <p class="post-excerpt">In todays day and age coding is becoming more popular as a career oportunity. The first step in learning to code is HTML. This is the bones or overall structure of codeing in front end devleopment. There are many ways to go about learning to code using html. The more famous of these ways is by taking a coding bootcamp. click the link bellow to find a few of these and to learn more. </p>

            <a class="read-more">Read More</a>


        </div>

    </div>

</body>
</html>

/* file: styles.css */
.blog-post-card {
border: black;
border-radious: 15px;
background-color: white;
width: 300px;
text-align: center;
}
.post-img {
  width: 100%;
  height: auto;
  border-bottom: 10px;
}
.post-content {
  padding: 16px;
}
.post-title {
  color: green;
}
.post-excerpt {
  color: blue;
}
.read-more {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  margin: 10px;
}
.read-more: hover {
  color: purple;
}

Your browser information:

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

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

2

Please carefully check the name of the file you are linking to.

3

thank you for that I don’t know how I did not see that. now i just need to understand why it is failing me on hover and bottom border. ps the code has changed since i posted as i have been correcting small issues that i have found here and there

4

Great. Keep at it. If you need more help, please post your updated code here.

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

5

Thank you I did not know that. and I was able to figure out the issues. once again minor details that eluded me. much appreciated.