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

@Dracula211

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Open to your valuable feedbacks

Cheers :)

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Dracula,

Overall it's a good solution, all the elements are there - well done!

I would just be careful setting fixed heights and widths. It doesn't really play well with responsive design. The content should set the height and width controlled dynamically with max-width. This is a pretty helpful RWD course.

You could also clear down you accessibility/html report if you add an alt-text, a <h1> and some semantic html. Heading structure and semantics are really important fundamental concepts.

All the best!

0

@banhmisg9509

Posted

I think it'll look better if you add a transition property when hovering the button, the "change" and "cancel" labels. The padding of the card isn't same as the design, It should be bigger. The space between the music icon and the price tag (annual plan) also is quite far. I hope this comment can help you.

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