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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- See hover states for interactive elements
- Solution URL: GitHub
- Live Site URL: GitHub Pages
As mentioned in the style-guide I first started with the HTML structure of the solution, then the CSS/SASS coding. For the SASS code I used a very simple structure which consists in 4 files: base, components, layouts and main.
- base: contains resets, variables, mixins and utility classes.
- components: resuable classes.
- layout: the CSS that handles the layout, the main structure.
- main: contain the imports for all the files.
Also I used normalize.css for handling all the resets and avoid typical problems with browsers compatibility.
- Semantic HTML5 markup
- SASS
- Flexbox
- Normalize.css
- Structuring your sass projects - This helped me choosing the right file structure project for SASS.
- MDN Mozilla - Always helpful when needing to understand how something works.
- Coolors - Great to see the entire pallet of colors and save it for later.
- Frontend Mentor - @FacuMasino
- LinkedIn - @facundomasino