Skip to content
Submitted about 2 years ago

product preview card component using html and css

Zeena•175
@kushyzee
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

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Congrats @kushyzee on completing this challenge!

    In your <body> element, you'll want to change your height to min-height for better responsiveness.

    Next, since this a card, for better semantic HTML you want to change you <main> element to <article> element. You'll also want to change all your <section> elements to <div> instead, since the <section> element is used to define a section of a webpage.

    For your images to change between mobile and desktop is better to use the <picture> element, it use less code and its far more effective.

    I attached a link for more detail about it:

    <picture>
   <source media="(min-width: )" srcset="Desktop image goes here">
    <img src="Mobile image goes here" alt="">
</picture>

    https://www.w3schools.com/html/html_images_picture.asp

    0
    Zeena•175
    @kushyzeePosted about 2 years ago

    @vcarames wow, thank you so much for feedback. I totally forgot about the <picture> element

    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