Design a Blog Post Card - Design a Blog Post Card

[klapaucius]

Tell us what’s happening:

I am currently on the “Design a Blog Post Card” lesson on the CSS curriculum.

Wrote in html elements, let’s say a “div” with a class of “such-and-such”. I then targeted them accordingly on the styles.css tab, e.g.:

.such-and-such {width: 500px;border-radius: 5px}

Still, the lesson doesn’t seem to recognize that I’ve input the required attributes to their corresponding selectors (pertaining to the {respective} elements).

Wat do? I am stuck. I just wanna get to Javascript and Python.

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>
<!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="You got to know your chikkin">




<div class="post-content">
<h2 class="post-title">  I hate CSS </h2>
<p class="post-excerpt"> No comment </p>
<a class="read-more">Read More</a>
</div>




</div>
</body>
</html>




</body>
</html>

/* file: styles.css */
body {
  background-color: lime;
}
.blog-post-card {
background-color: white;
width: auto;
border: 2px solid white;
border-radius: 50px;
text-align: center;
}
.post-img {
background-size: cover;  
border-bottom: 20px;
}
.post-content{
padding: 25px;
}
.post-title{
  text-color: red;
  margin: 5px;
}
.post-excerpt{
  text-color: blue;
  margin: 5px;
}
.read-more{
  text-color: blue;
  hover: yellow;
  background-color: blue;
  margin: 20px;
  padding: 20px;
  border-radius: 2px;
  display: inline-block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:156.0) Gecko/20100101 Firefox/156.0

Challenge Information:

Design a Blog Post Card - Design a Blog Post Card

freeCodeCamp.org

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-blog-post-card/66eaddd04a9e533fba689001.md at main · freeCodeCamp/freeCodeCamp · GitHub

[a1legalfreelance]

@klapaucius

/* file: styles.css */
body {
  background-color: lime;
}
.blog-post-card {
background-color: white;
width: auto;
border: 2px solid white;
border-radius: 50px;
text-align: center;
}
.post-img {
background-size: cover;  
border-bottom: 20px;
}
.post-content{
padding: 25px;
}
.post-title{
  text-color: red;
  margin: 5px;
}
.post-excerpt{
  text-color: blue;
  margin: 5px;
}
.read-more{
  text-color: blue;
  hover: yellow;
  background-color: blue;
  margin: 20px;
  padding: 20px;
  border-radius: 2px;
  display: inline-block;
}

Can you please say which story number you say you are following wtih this specific query and which test number you are trying to get a tick for?

[dhess]

Welcome to the forum @klapaucius,

@klapaucius

<!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>

You have duplicated code in your html file.

Did you link your stylesheet?

@klapaucius

  text-color: blue;
  hover: yellow;

Are these valid CSS properties?

Happy coding

[klapaucius]

Thx for your attention!

I am trying to get a tick for item 10 on the test?

“Your .blog-post-card element should have a border-radius property with a value (should not be 0 or a negative value).”

I did write in the property on the styles.css file, with a value of 50px. Idk what I’m doing wrong

[klapaucius]

@klapaucius

e="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Post Card</title>
</head>

Yup, it’s duplicated alright.

Nuh, they aren’t. I messed the hover pseudoclass there. Thankee kindly!