Design a Blog Post Card

Curriculum Help
,
1

I tried making this but it is not displaying exactly how I would like. I did pass it. How do I make the image stay where it should in the white? How do I make a cute little card like the example? If I adjust the white to be bigger the image gets bigger.

image
image1224×948 147 KB

https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-blog-post-card/lab-blog-post-card

.blog-post-card {background-color: white;

border-radius: 5px;

background-size: 5px;

text-align: center;

width: 800px;}

.post-img {

border-bottom: 5px solid seagreen;

background-size: auto;

width: 100%;

margin: 50px;}

.post-content {padding: 20px;}

.post-title {

color: teal;

margin: 20px;

}

.post-excerpt {

color: teal;

margin: 20px;

}

.read-more {background-color: yellow;

color: OrangeRed;

margin: 20px;

padding: 20px;

border-radius: 10px;

display: inline-block;

width: 80px;

height: 20px;}

body {background-color: YellowGreen}

.read-more:hover {background-color: RebeccaPurple}
2

I think you only provided your css code?
We will need your html code posted as well.

3

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

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

4

I’m afraid I didn’t save the html, only the css, I think I will close this post after one question. How do I display the html as html? Backticks? I tried to paste it here before I deleted it and it turned into the finished product. Thanks for your help!

5

use the backtick method described in the earlier comment I made.
(so three backticks in the row above the code and three more in the row below the last line of code)

6

You are welcome to close this topic, it appears I can longer close it, as it is mute without the html.