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

tailwindcss, mobile-first, darkmode

Azka 480

@Azkanorouzi

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


any recommendation? also checkout dark mode, light mode as well

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

The solution is very creative and beautiful, I only have a small piece of advice regarding the two columns.

To create the two columns in Tailwind and Flexbox, you can use w-6/12 on the picture and figcaption tags. Currently, you have h-6/12 w-full but h-6/12 does not exist, and w-full causes one column to be smaller than the other.

A simpler way is to use grid layout to create two equal-width columns, use grid grid-cols-2 in the figure tag.

Happy coding!

Marked as helpful

1

Azka 480

@Azkanorouzi

Posted

@MelvinAguilar yeah you're right, I'll fix that asap, thank you so much for your advice, I appreciate 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