Design a Blog Post Card

In this lab, you'll practice how to style backgrounds and borders by creating a blog post card. **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have a `div` element with a class of `blog-post-card` to hold all of your card elements. 2. Within the `.blog-post-card` element, you should have an image element with a valid `alt` attribute and text, and a class of `post-img`. You can use `https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg` for the `src` attribute of the image. 3. You should have a `div` with a class of `post-content` within the `.blog-post-card` element with the following: - An `h2` element with a class of `post-title` and text for the title of your blog post. - A `p` element with a class of `post-excerpt` and text to summarize your blog post. - An `a` element with a class of `read-more` with the text `Read More`. 4. You should set the `body` element's background color to a value other than white. 5. You should apply the following styles to the `.blog-post-card` element: - A white background. - Rounded corners. - A width of your choice. - The text alignment of your choice. 6. The `.post-img` element should be styled so that the image fills the card's entire width and has a bottom border. 7. The `.post-content` element should be styled so that there is padding inside the card. 8. The `.post-title` and `.post-excerpt` elements should have a text color other than the default and margins on all sides. 9. The `.read-more` element should be styled like a button and have: - A text color other than the default. - A background color. - Margins on all sides. - Padding on all sides. - Rounded corners. - A `display` property set to `inline-block`. - A hover effect that changes its background color. **Note:** Be sure to link your stylesheet in your HTML and apply your CSS.