Welcome! 👋🏼

Frontend Mentor - Order Summary Card

Frontend Mentor challenges help you improve your coding skills by building realistic projects

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

This is an entry-level NEWBIE-Free challenge that uses only HTML & CSS

The challenge

• build out this order summary card component and get it looking as close to the design as possible.
• See hover states for interactive elements

Screenshot

• mobile-version

• desktop-version
  

Links

• Solution URL: Frontend Mentor Solution Page
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• with Visual Studio Code Editor

What I learned

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.

Continued development

I never knew this property exists in CSS until I follow this project & I'm hoping to use this property in my future builds.

Useful resources

• developer.mozilla.org more about the 'text-underline-offset' CSS property

Author

• Frontend Mentor - @M-lakshan
• Dev.to - @mlakshan