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 Solution
  • Links
• My process
  • Built with
  • What I learned
• Author

---

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot Solution

Desktop	Mobile

---

Links

• Live project on GitHub

• Solution on Order Summary by Guile Pereira

My process

In this project I tried to improve my coding process based on the perceptions and feedbacks I had in previous projects, so my focus was to refine my accuracy in achieving the proposed design.

Built with

• Semantic HTML5 markup;
• CSS custom properties;
• Flexbox;
• Accessibility;
• Methodology BEM (Block Element Modifier);
• Atomic Design.

What I learned

In this project, I started to improve my perception of relative measures, which I intend to improve in my next project, by applying the proportion of 62.5% to the font size. As for the BEM methodology, I could understand the use of "mixes" which solved some conflicts I had in previous projects.

Author

• LinkedIn - Guile Pereira
• GitHub - Guile Pereira
• Frontend Mentor - @guilepereira