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
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• See the page layout on mobile (375px) and Desktop (1440px);
• See hover states for interactive elements.

Screenshot

Links

• Solution URL: [https://github.com/Marcoswodbarros/order-summary-component.git]
• Live Site URL: [https://marcoswodbarros.github.io/order-summary-component/]

My process

Built with

• Semantic HTML5 markup;
• CSS custom properties;
• Flexbox;
• Mobile-first workflow;
• SaSS.

What I learned

Working on this project, I was able to start practicing SaSS. A couple days ago, I was studying about SaSS and I decided to make this project to improve my skills.

Continued development

For the next one, I will keep working with SaSS, but on a more challenging project, using JS and maybe react.

Author

• GitHub - Marcos Barros
• Linkedin - Marcoswodbarros
• Frontend Mentor - @Marcoswodbarros