Skip to content
Submitted over 1 year ago

Product Preview Card Solution

Luiz Maynarte•60
@LuisComZ
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I don't know how I can take the white bar in the left off, so I accept any suggestion to how a can make it. I also wanna learn other way to centralize all the container without using the properties of position and transform. Anyone know other methods or can recommend me a site who teaches about this?

Community feedback

  • Kehinde•660
    @jonathan401Posted over 1 year ago

    Congratulations on completing this challenge 🎊🎊. Well a few suggestions:

    1. Let the div with class container be a main element instead.
    2. There should only be a h1 element per page. So you make the other h1 a h2 instead.
    3. It's important that you don't write content in all caps in the html. You should change PERFUME to Perfume and then use the CSS text-transform: uppercase; in the CSS to make it all caps.
    4. To remove that space from the image, you should add a picture element that can be used to render different images for different screen sizes. You could check out my solution here and if you're still not clear, you could reach out. Hope the little suggestions helped.

    Once again, congratulations on completing this challenge 🎊🎊.

    0

Please log in to post a comment

Log in with GitHub

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