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

Sarah H. 55

@Arearda

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Satyam Jha 400

@satyammjha

Posted

Nice attempt @Arearda, I have a few suggestions for you to further improve your code:-

  1. Your colors are too saturated for colors please see the style guide of the projects
  2. Use the <br> tag after Gabrielle and Eau, it will break the line of the sentence.
  3. Increasing the letter spacing of PERFUME by using letter-spacing: 2px.
  4. Move the button bit lower so that it will cover the more empty space.
  5. use cursor: pointer for the button.
  6. Change the background color of the button on hover by using button:hover{background-color: hsl(158, 35%, 29%);}
  7. Old price is not aligned correctly it's below the final price. Please make it horizontally middle of the new price.

Hope these points will help you. Happy Coding 🤗✌🏻.

0
faizan 2,420

@afaiz-space

Posted

Hey @Arearda,

  • Replace height:100vh with min-height:100vh in the body element.
  • also add media query in the project.
  • change the button and price color.
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