Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Mobile

Desktop

Links

• Solution URL: https://github.com/JunoField/fm3-order-summary-component
• Live Site URL: https://junofield.github.io/fm3-order-summary-component/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Media query
• Mobile-first workflow
• SASS - CSS extension framework
• Parcel - Provides testing server, build tools, etc.

Continued development

I'm not convinced the colours are 100% correct - the ones provided in style-guide.md are not the ones in the previews, which makes things a little awkward. Any feedback on this is welcome.

Author

• GitHub - JunoField
• Frontend Mentor - @JunoField