Design a blog post card

HTML-CSS
1

hi i have just compleated the design a blog post card lad.

would someone please be adle to have a look over my code i had some trouble getting the “read more” part to change color when hovering, i got it to work but it seems a bit inelegant.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="styles.css" rel="stylesheet">
      <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="post-img">
         <div class="post-content">
            <h2 class="post-title">ma blog</h2>
            <p class="post-excerpt"> i blog aboot ma bog</p>
            <a class="read-more"
               href="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg"_blank>Read More</a>
         </div>
      </div>
   </body>
</html>

.blog-post-card {
	width: 360px;
	border: 4px solid navy;
	border-radius: 10px;
	text-align: center;
	background-color: white
}

/not right/.post-img {
	max-width: 100%;
	border-bottom: 10px solid green;
	/*not right */
}

.post-content {
	padding: 10px;
}

.post-title {
	color: navy;
	margin: 15px;
}

.post-excerpt {
	color: navy;
	margin: 15px;
}

.read-more {
	display: inline-block;
	color: rgb(93, 93, 177);
	margin: 15px;
	padding: 8px;
	background: black;
	border-radius: 15px;
}

.read-more:hover {
	background-color: pink;
}
2

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

3

Thanks for that i was not sure how to format it properly

4

what do you mean with inelegant? what kind of help are you looking for?

5

In the last part of my css too make the hover work sucsesfuly i have had to close off the brackets for “.read-more” and open new ones for “.read-more:hover”

it there a way to make the hover work inside the first part

6

Yes, you can use CSS nesting, which I think is now native to all browsers.

You use the & selector inside a ruleset to define a nested ruleset (e.g. &:hover).

1 Like
7

Thanks i will give that a try next time