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.
- Solution URL: Order Summary Component (SASS + Mobile first + BEM) | Frontend Mentor
- Live Site URL: https://order-summary-component-melvinhdz.vercel.app/
Users should be able to:
- See hover states for interactive elements
- Semantic HTML5 markup
- Mobile-first approach
- Flex Layout
- BEM naming convention
- SASS - Sass modules
- Frontend Mentor - @melvinaguilar
When using sass
in order to build this solution
- Install
sass
if not yet installed:
npm install -g sass
- Run build command from command line:
sass assets/sass/main.scss assets/css/style.css
- If you want to edit the code and test, in the root folder of this repository, run this command from the command line:
sass --watch assets/sass/main.scss assets/css/style.css
.
├── assets
│ ├── css
│ │ ├── style.css
│ │ └── style.css.map
│ ├── images
│ │ ├── favicon-32x32.png
│ │ ├── icon-music.svg
│ │ ├── illustration-hero.svg
│ │ ├── pattern-background-desktop.svg
│ │ └── pattern-background-mobile.svg
│ └── sass
│ ├── abstracts
│ │ ├── _mixins.scss
│ │ └── _variables.scss
│ ├── base
│ │ ├── _page.scss
│ │ └── _reset.scss
│ ├── component
│ │ ├── _attribution.scss
│ │ ├── _buttons.scss
│ │ ├── _heading.scss
│ │ └── _screen-reader.scss
│ ├── layout
│ │ └── _order-card.scss
│ └── main.scss
├── design
│ ├── active-states.jpg
│ ├── desktop-design.jpg
│ ├── desktop-preview.jpg
│ ├── mobile-design.jpg
│ └── screenshot.png
├── index.html
└── README.md