Submitted 2 months ago

Basic Product Preview Card using simple HTML5 and CSS.

BozJR• 220

@BozJR

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

What are you most proud of, and what would you do differently next time?

I think this is my best one yet in terms of the responsiveness!

What challenges did you encounter, and how did you overcome them?

the challenges was just getting to grips with @media queries and figuring that out to make things as responsive as possible! some more practice in that department is deffo needed.

What specific areas of your project would you like help with?

@media queries @media queries @media queries @media queries @media queries

Community feedback

Stephen Ostler• 210

@steveostler

Posted 2 months ago

This looks good and the media queries are working fine. I have just completed this in a similar style. I think you should be able to invite the required fonts in three lines of code from Google Fonts

<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:ital,opsz,wght@0,9..144,700;1,9..144,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

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