Skip to content
Submitted 3 months ago

Product preview Card Component

theritikyadav11•40
@theritikyadav11
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

The desingning of responsiveness make me proud. For the second time I go with mobile first approach.

What challenges did you encounter, and how did you overcome them?

I developed desktop view easily but when I am developing the mobile I am facing some problem and by the help of some documentation I resolve this challenges.

What specific areas of your project would you like help with?

Making the project responsiveness because making the exact design is easy but when it comes to responsiveness it is some challenging but now I understand the concept we need to follow mobile first approach.

Code

Please log in to post a comment

Log in

Community feedback

  • Joshtemi0•200
    @Joshtemi0

    Good job.

    But I was expecting to hover on the button and the cursor should change to pointer.

    And will advise to use external link for your CSS.

  • Shah Faisal•460
    @Shah-Faisal-cloud

    Great job.

    To enhance the interactivity, you could add a subtle background color change on hover to visually indicate that the button is clickable. Also, setting the cursor to pointer on hover would reinforce this feeling to users.

    Additionally, to keep the code organized and maintainable, it’s a good idea to separate the CSS from the HTML by creating an external CSS file. This approach keeps your HTML clean and makes future styling changes much easier.

    Here’s a quick example of what you could do:

    /* styles.css */
button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer; /* Makes cursor a pointer */
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049; /* Slightly different bg on hover */
}

    And then link this CSS file in your HTML:

    <link rel="stylesheet" href="styles.css" />

    Hope this will be helpful!

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