Responsive bloq preview card

Hi Abdullah! Congrats for completing the challenge!

Pro's:

• Use of CSS Variables: Defining color and size variables at the root level makes the code more maintainable and allows for easy updates.

• Responsive Design: The inclusion of media queries demonstrates a commitment to responsive design, ensuring the layout adapts to different screen sizes.

Cons: -To enhance responsiveness, and avoid hitting the edges on small screen sizes, I would consider adjusting the .card and .blog-image widths using relative units like "%" instead of fixed values:

Like this for example: .card { width: 90%; /* More flexible width / } .blog-image { width: 100%; / Image will adapt to card size */ }

• In the heading selector, the (width: 200;) value is missing a unit, which could cause issues.

-You could use an <address> tag for the creator’s information, as it’s associated with contact details or authorship in most cases.

Hey, nice job.

Card becomes off-center on big screens, because you applied max-width: 1440px; to the body and body itself isn't centered but the content inside is centered with flex, for this challenge you don't even need it but it is a nice application overall. I think to fix it you can apply it to the main or wrap the content under main and apply to it. Wrapping the content under header, main and footer with a same class div like wrapper and giving it a width:90%; or something is a common thing i believe. While writing this, it gave me a idea :D Giving that wrapper width:90%; and max-width:1440px would be better i think. That way above 1440px screen size, it will be 1440px and under it will be %90 of the viewwidth.

Avoid using hard coded values like width: 390px; , use max-width: 390px; instead. Also using em/rem units instead of pixels would be better for responsiveness.

You can leave alt text of the decorative images empty.

You don't need height: 550px; on the card aswell, since you used flex on the card, a gap:1rem would be enough i guess.

I like how you use the variable to simplify your code.