Frontend Mentor - Order Summary Card Component Solution

This is a solution to the Order Summary Card Component Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/order-summary-card-component-using-scss-coTG38YTE
• Live Site URL: https://fundakartal.github.io/order-summary-component/

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• CSS Flexbox

What I learned

By resetting the root (HTML) font size to 62.5%; I calculated all of my REM units with that magical 1rem = 10px formula.

html {
  font-size: 62.5%;
}

Useful resources

• font-size @ MDN Web Docs

Author

• Frontend Mentor - @fundakartal
• Twitter - @fundakartal