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.
Users should be able to:
- See hover states for interactive elements
- Solution URL: https://github.com/albina0104/order-summary-component
- Live Site URL: https://albina0104.github.io/order-summary-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- I learned the following CSS properties for background positioning:
background-repeat: no-repeat;
background-size: contain;
background-position: center left 15px;
- I learned how to add a pressed effect on button click in CSS:
.btn:active, .link:active {
transform: scale(0.95);
}
-
CSS Backgrounds - This W3Schools tutorial helped me to choose the right properties for background positioning.
- Frontend Mentor - @albina0104
- GitHub - albina0104