This is a solution for a challenge on Frontend Mentor.
Links: Live | Challenge | Solution
In this project, I focused on building a QR code component based on a Figma design. I used semantic HTML5 for the structure and SASS to manage the styles. To ensure the card was centered on the page, I implemented a clean layout using Flexbox.
- Semantic HTML5 markup
- SASS
- CSS custom properties: CSS Reset, box-shadow
- Flexbox
- Google Fonts
Through this project, I reviewed how to use SASS effectively, including importing fonts from external websites, managing code structure, and creating variables. Additionally, I revisited the use of the box-shadow property in CSS and practiced checking layouts by using Figma.
- Box-shadow snippets:
box-shadow: offset-x offset-y blur-radius spread-radius color;