Design a Blog Post Card - error border-radius: 25px;

1

Hello, good morning. I’ve tried to create the solution for this task, but it’s not working. Your .blog-post-card element should have a border-radius property with a value (should not be 0 or a negative value). I’ve tried everything and the problem persists. Can anyone help me? Thank you.

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

HTML


<!DOCTYPE *html*>

<html *lang*="en">

<head>

    <meta *charset*="UTF-8">

    <meta *name*="viewport" *content*="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link *rel*="stylesheet" *href*="style.css">

</head>

<body>

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

        <img *class*="post-img" *src*="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" *alt*="Manos escribiendo en el teclado de una laptop, enfocadas en la pantalla de una computadora portátil.">

        <div *class*="post-content">

        <h2 *class*="post-title">How to Create a Blog Post Card with CSS</h2>

            <p *class*=" post-excerpt">Learn how to design an attractive blog post card using HTML and CSS.</p>

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

        </div>

    </div>

</body>

</html>

CSS

body {

    background-color: #cdb4db;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

    font-family: "Raleway", sans-serif;

}



.blog-post-card {

    background-color: white;

    border-radius: 25px;

    width: 400px;

    min-width: 100px;

    text-align: center;

    overflow: hidden;

    box-shadow: 0 8px 12px **rgba**(0, 0, 0, 0.1);

    margin: 20px

}
2

Welcome back @sebastiancarballo!

I’ve edited your post, so your code is easier to read and test. In the future, please follow this guide to format your code:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

Happy coding!

3

Would you please post a link to this challenge?

In the future, if you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge.

image
image668×186 6.59 KB

The Help button will create a new topic with all the code you have written and also include a link to the challenge. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

4

Thank you very much, I will keep your advice in mind for the future

5

Design a Blog Post CardDesign a Blog Post Card

6

Thank you.

Check your stylesheet link. Is that the correct file?

7

You know, you’ve made me realize, you’re absolutely right, I had a mistake in the CSS link, I was missing an ‘s’. I spent a lot of time thinking it was my code or the browser. Thanks.

<link rel="stylesheet" href="style.css"> → <link rel="stylesheet" href="styles.css">