Submitted about 1 month ago

Responsive card component- HTML-CSS

CoderAlchemy24•240

@CoderAlchemy24

A solution to the Blog preview card challenge

Preview Code

Code

Please log in to post a comment

Community feedback

Viktor Rumenov•60
@TamarawGuy
Posted about 1 month ago
That's some good work done there, however I think there can be a few improvements done:
1. Card not centered veritically You can use flexbox to center the content of the body both horizontally and vertically:
```
* {
-  margin: 0 auto;
   box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
}
```
1. Padding in Card too big What I can see is that the padding in the card is a bit too large compared to the design, try using a smaller padding
2. Google Font family not used On the live preview I can see that you did not use the required font family from google fonts. Here are the links you need to add in the <head> tag above the <title> tag:
```
<link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
      rel="stylesheet"
    />
```
In order to use the font family you need to add the following lines in your css file:
```
<some-class> {
  font-family: "Figtree", sans-serif;
}
```
1. Cursor is not pointer when hovering over the title of the card What you can do for better UX is to make your cursor a pointer when hovering over your <h1> tag:
```
h1:hover{
   color: var(--color-yellow, #F4D04E);
+  cursor: pointer;
}
```
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord