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

Order Summary Component

Buchi 160

@B-uchi

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,440

@correlucas

Posted

Hello Buchi, congratulations for your solution!

I'm with your live site open and I saw that you did a pretty good work in this challege. You've missed only few small details, I'll leave you some tips.

1.Use max-width instead of width to create a flexible component, the value for this card is approximately max-width: 360px;.

2.Add hover effects to the <a> cancel and the button using the property :hover applying changes to these elements while hovering.

3.You don't need to set the height for the card and also the other divs, the height of this elements will com from the padding and margins you set for the img and the h1/p.

This is all, congrats for this accurate solution. Happy coding!

For example:

a:hover { color: #afaec1; }

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