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

Product Preview

@Msarthaksharma

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


Please suggest ways using which I can enhance my code.

Community feedback

@Pranshu-Sahu

Posted

🎉Hello @Msarthaksharma, congratulations on your solution!

✨ Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

1- Center the container inside the body , body{ display:flex; justify-content:center; alignt-items:center; min-height:100vh; } Remove the positioning you have given to .container

2- add max-width:35rem to container this would make your container fluid, instead of giving any fixed width.

3- Remove border from button, add hover effect to improve .btn { border:none; } .btn:hover{ translate:1px 1px; opacity:0.6; }

4- You have responsive design, in order to make to make it responsive :- .container{ display:flex; justify-content:center; align-items:center; @media only screen and (max-width: 600px) { .container{ flex-direction:col; }

Make image and card text content two flex items.

Hey sarthak, working on projects which looks quite simpler may be quite frustrating 🙇‍♀️ and confusing🤦‍♂️ in initial stages. 🎇 Have faith in yourself, I'm sure after that after working on couple of such project, your confidence would be high.

You would be surely succeed 🏆 and would achieve your dreams.

Happy coding 👨‍💻

Feel free to leave comment if you need any further help.

I hope this would be helpful.

Marked as helpful

0

@Msarthaksharma

Posted

@Pranshu-Sahu hi Thank you so much for your feedback, I would love to implement 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