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 Product Preview (Chanel)

Tyrone Robertsonโ€ข 230

@Roneeey

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


  1. The size of the image section decreases in width and the content section increases in width when viewing in Firefox. I have been unable to research why. Any ideas?
  2. I think it has to do with the way my .card was styled as the white background also shrinks without the text shrinking as well when making my chrome window smaller.
  3. Perfume bottle image not displaying on my Github pages site. Any ideas?

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello @Roneeey, Congratulations on completing this challenge!

Great code and great solution! Iโ€™ve few suggestions for you that you can consider adding to your code:

Your preview site its not displaying yet, first of all you need to configure the Github Page and update your solution inserting the new link.

My suggestion for your is to use vercel or netlify since Github Pages its kinda tricky to configure. But if you really want to use Github Pages you can try to follow this guide to use it and fix the settings for your page https://docs.github.com/en/pages/quickstart.

In case you choose netlify.com or vercel.com, in a matter of 5 minutes your preview site is online. All you need to do is to connect the Github account, import the repository and deploy it. Fixing that you've to update the solution with the new link and we'll be able to see your live site and help you.

โœŒ๏ธ I hope this helps you and happy coding!

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