Frontend Mentor challenges help you improve your coding skills by building realistic projects
This is an entry-level NEWBIE-Free challenge that uses only HTML & CSS
- build out this order summary card component and get it looking as close to the design as possible.
- See hover states for interactive elements
- mobile-version
- desktop-version
- Solution URL: Frontend Mentor Solution Page
- Live Site URL: GitHub Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- with Visual Studio Code Editor
I learned an uncommon CSS property while building this project
a {
text-underline-offset: **px;
}
what this property does is, give us the accessibility to control the distance between the anchor tag's default underline & the tag's baseline. we can set the distance according to our needs.
I never knew this property exists in CSS until I follow this project & I'm hoping to use this property in my future builds.
- developer.mozilla.org more about the 'text-underline-offset' CSS property
- Frontend Mentor - @M-lakshan
- Dev.to - @mlakshan