Submitted over 1 year ago

Responsive product preview card using HTML and CSS

zMitchC• 30

@zMitchC

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello guyz! This is my solution for this challenge.

I had some difficulties about accessibility, but at the end I think that I have done a great job. If anyone have something like pages that explain this aspect I will be very happy to visit them!

I have some doubts about my work that I want to ask:

In the button section > I tried to center the cart image but I don't see it really centered. I used this

.add-to-cart-button { display: inline-block; justify-content: center; align-items: center }

@media queries > This is not a specific question about what I did, but I want to ask you an opinion if it's better to code @media queries in different stylesheets or stay in the same css file.
Font weight - I didn't understand ho to make the title and the price bold like the preview.

Feel free to give me feedback and advices to improve my work and learn more!

Thank y'all! :)

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some recommendations regarding your doubts that I believe will be of great interest to you.

SUGGESTION 💡:

"Font weight - I didn't understand ho to make the title and the price bold like the preview. ?"

That's simply because your are only importing regular font weight for both of the fonts. We can solve the issue by adding fonts with specified weights during importing.

Just add this import tags into <head>

<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=Fraunces:wght@700&family=Montserrat:wght@400;500&display=swap" rel="stylesheet">

Now remove these old import statements from <head>

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Fraunces' rel='stylesheet'>

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

zMitchC• 30

@zMitchC

Posted over 1 year ago

Thank you @0xAbdulKhalid!

Please log in to post a comment

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