https://github.com/fundakartal/order-summary-component
Frontend Mentor - Order Summary Card Component Solution
https://github.com/fundakartal/order-summary-component
code-challenge code-practice css front-end frontend frontend-mentor html scss
Last synced: 15 days ago
JSON representation
Frontend Mentor - Order Summary Card Component Solution
- Host: GitHub
- URL: https://github.com/fundakartal/order-summary-component
- Owner: fundakartal
- Created: 2021-10-14T12:48:11.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-18T15:26:14.000Z (over 4 years ago)
- Last Synced: 2025-02-25T19:43:56.366Z (over 1 year ago)
- Topics: code-challenge, code-practice, css, front-end, frontend, frontend-mentor, html, scss
- Language: SCSS
- Homepage: https://fundakartal.github.io/order-summary-component/
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Order Summary Card Component Solution
This is a solution to the [Order Summary Card Component Challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resources](#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](https://www.frontendmentor.io/solutions/order-summary-card-component-using-scss-coTG38YTE)
- Live Site URL: [https://fundakartal.github.io/order-summary-component/](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.
```css
html {
font-size: 62.5%;
}
```
### Useful resources
- [font-size @ MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
## Author
- Frontend Mentor - [@fundakartal](https://www.frontendmentor.io/profile/fundakartal)
- Twitter - [@fundakartal](https://twitter.com/fundakartaI)