Skip to content
Submitted over 1 year ago

Product previw card component HTML CSS Solution

AymanMountaj•40
@AymanMountaj
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Here is my solution to this challenge. I'm not 100% satisfied as it's not pixel perfect, but I still accept the result.

Thanks to this challenge I learned that:

  • Spending a few more minutes thinking about how to proceed can save you a few hours of work
  • Picture tag without a fallback image doesn't work
  • Tutorials give you the illusion that you've learned a lot, but until you put things into practice, you don't know what you don't know

For now I will try to launch myself on some other challenge, make some mistakes, learn from them and then I will try this challenge once again.

Community feedback

  • hitmorecode•6,680
    @hitmorecodePosted over 1 year ago

    Congratulations well done. Actually is not so bad, just a few small things you can fix.

    • You can add more space between current price and previous price.
    • Add transition to the button, to make the hover animation smoother
    • The image is not filling the left side in the height
    body{
background-color: #F2EAE2;
font-family: 'Montserrat', sans-serif;
color: var(--aurometal-saurus, #6C7289);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh; /* add this so that the card can be placed in the middle of the page */
}

.container{
display: flex;
flex-direction: column;
background-color: white;
border-radius: 10px;
/*     overflow: hidden; */ /* in this case you don't need this */
/*     margin: 1.75rem 1rem; */ /* you can remove this, flexbox on the body will do the job */
justify-content: center;
align-items: center;
max-width: 21.4375rem;
    
}
    0

Please log in to post a comment

Log in with GitHub

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