Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Perfume card with some animation and css grid

Manish Patelβ€’ 730

@savvystrider

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This project looked deceptively easy but getting everything aligned and in place was a challenge.

Community feedback

Sasan Salehzadehβ€’ 470

@sasanqc

Posted

Hi, Congrats for your submission. First of all , your solution should be similar to the challenge, as much as is possible. fonts and colors are different. next, the challenge wants us to set different images for different screen sizes. you cat do that with picture tag

<picture>
  <source srcset="images/image-product-mobile.jpg" media="(max-width: 375px)" />
  <img class="image" src="images/image-product-desktop.jpg" alt="" />
</picture>

Marked as helpful

1
Francisco Carrilloβ€’ 5,540

@frank-itachi

Posted

Hello there πŸ‘‹. You did a good job!

I have some suggestions about your code that might interest you.

HTML πŸ“„:

  • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here

I hope you find it useful! 😁😁 Above all, the solution you submitted is greatπŸ‘Œ!

Happy <coding /> 😎!

Marked as helpful

1

Manish Patelβ€’ 730

@savvystrider

Posted

@frank-itachi Thank you! I’m glad there’s a simpler way to do it

0

Please log in to post a comment

Log in with GitHub
Discord logo

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