BLog-Preview

The solution really differs from the original design, the component is not centered, there is no shadow or border.

You can use grid to center the component both vertically and horizontally this way

body {
    display: grid;
    min-height: 100vh; 
}

.card {
    place-self: center;
}

It's not really recommended to use heading tags just for different text sizes since screen readers can get confused.

Hello, Mohamed! It's great that you're also on the Frontend Mentor journey. I liked your solution, and I'd like to give you some tips, if that's okay with you?

• It would be helpful if you could review Semantic HTML, as it helps developers, browsers, and assistive technologies to function better. For example, replacing <div> with <main> or <footer>, and also checking the importance of the order of <h1> to <h6>.
• The color of the "Learning" label is the same as the background!
• There are other details like borders and box-shadow, and the border-radius could be larger, but I don't want to be too picky with you. You have your own learning journey ahead!