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.
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}
I think you only provided your css code?
We will need your html code posted as well.
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.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
1 Like
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!
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)
1 Like
You are welcome to close this topic, it appears I can longer close it, as it is mute without the html.
