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.
This challenge is very similar to the last one I did in Front End Mentor, but with a few more challenges, i.e. how to adjust the background image on the screen, the square appearance of the shadow on the card using box shadown, needing to use the filter: drop-shadow() and the title stroke, which I managed to implement only using -webkit-text-stroke.
This time I had the design model available in Figma, and as I had no experience with the tool, it took a little longer than it really looked, but the result was satisfactory, I was able to follow the model almost 100%.
I'm getting used to flexbox positioning, I'm still starting my studies with the CSS Grid, I'll use it in the next challenges.
I need to improve the responsiveness and the media queries I use, but I haven't delved too deeply into the subject yet.
- Frontend Mentor - @VitorMagnago