/order-summary-component-main

Primary LanguageCSS

Order summary card solution

The challenge

Your challenge is to build out this order summary card component and get it looking as close to the design as possible

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Users should be able to:

  • See hover states for interactive elements

Screenshot

My solution:

Links

My process

Big -> Medium -> Small

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid

What I learned

Learned the importance of planning before starting to code. Start with a low fidelity prototype.

CSS variables

Continued development

Learn about mobile first development

Author