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/dieudonneallognon/order-summary-component
- Live Site URL: https://dieudonneallognon.github.io/order-summary-component/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
With this demo project I learned :
- How to use css flexbox and grid properties when positioning elements.
- How to take advantage of pseudo attributes like ::before
/* index.css */
body::before {
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
z-index: -2;
background-image: url("images/pattern-background-desktop.svg");
}
- Flexbox Froggy - A learning game. It helped me to understand how to use the css flexbox properties.
- Kevin-Powell - Are you using the right CSS units? - This tutorial helped me to understand css units.
- Kevin-Powell - CSS em and rem explained - This is a very good tutorial about css units rem and em. It helped me to create responsive views easier.
- Github - dieudonneallognon
- Frontend Mentor - @dieudonneallognon