Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Your session has expired please log in again.
Your session has expired please log in again.
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 Card

@Gilad-Weinberger

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 comment is good. Thanks.

Community feedback

Mahdi Ali 180

@mahdicodes1

Posted

Hi there! Congratulations on successfully completing the challenge!

Here are some recommendations regarding your code that I hope you find helpful.

  • You can use the grid system to center the .container tag in the body. Delete the position tag in the .container class, and add the below codes to the body tag.
display: grid;
height: 100vh;
place-items: center;

You can use this method in .first-price class too.

  • Try to use media queries to make the page responsive.

  • Using a color code or other ways like RGB is a good habit. Instead of using a color name: change white to "#FFF".

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