Skip to content
Submitted over 1 year ago

Product Preview Component Card using HTML and SCSS

Nathan Lowe•450
@NathLowe
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 the second website of the challenge 1 day 1 website. I post a recap video of how I coded every single design with some detailed explanation, errors I encountered, and how I overcame them. Please consider connect with me on LinkedIn if you want to follow me in this journey. If there is anything wrong or not good enough, let me know. Thank you!

Community feedback

  • Anmol Singh Tuteja•190
    @anmolthedeveloperPosted over 1 year ago

    Hello, Congratulations on completing this challenge

    The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:

    <picture>
<source media="(max-width: 768px)" srcset="small-image.jpg">
<img src="fallback-image.jpg" alt="Example image">
</picture>

    Here's a detailed reference: here

    0
    Nathan Lowe•450
    @NathLowePosted over 1 year ago

    @anmolthedeveloper Oh Thank you so much bro. I didn't know.

    0
  • Nathan Lowe•450
    @NathLowePosted over 1 year ago

    I forgot to leave the link to the LinkedIn page 😅: https://www.linkedin.com/in/nathan-kouekam-lowe-6aba92230/

    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