Skip to content
Submitted about 1 year ago

product-preview-card-component-main

tghezfe•60
@tghezfe
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

This is my second challenge, having some knowledge but putting it into practice. I found it interesting that there can be two ways of working with the image:

  1. As a background image of the container.

  2. Changing it for a display: none; depending on the width of the screen (this was my case or path).

However, the difficult part in my opinion is the responsive part.

So I'm open for tips or feedback.

Community feedback

  • SutonToch•340
    @SutonTochPosted about 1 year ago

    Congrats on completing the challenge!

    I really like your Semantic HTML and transition on the button. When I started, I haven't paid any attention to both of those things. Also, your CSS-Variables look very nice.

    Regarding your responsiveness:

    • I don't think you need the (orientation: landscape) on your second media query: (min-width: 768). Otherwise, your website will always be mobile design, as long as the width is smaller than your height. To be fair, that's rarely going to happen, but it feels a little cleaner.
    • Maybe put an max-width: 500px; instead of max-width: 90%; on your .card. Or make it 60%/70% and give it an min-width: 375px;. Otherwise, the image will be much bigger than the text in mobile at higher widths. Just try it out and see what you like more :).

    If you're still unsure about responsive design, maybe 'Conquering Responsive Layouts' by Kevin Powell might be useful to you. It's free and taught me a lot! But you seem to be much further in your HTML/CSS-Journey than I was at the time, so you have to see for yourself.

    But there is not much else to add, you did a great job! I'm sure you're ready for more difficult challenges. If you still want to stay in the 'Newbie'-area, I can recommend the 'faq-accordion-card' or 'results-summary-component' to up the difficulty.

    Keep on going!

    1
    tghezfe•60
    @tghezfePosted about 1 year ago

    @SutonToch Great, I appreciate your feedback, I know it will help me a lot.

    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