Frontend Mentor - Order summary card solution

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.

Table of contents

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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: Github repo
• Live Site URL: Visit solution

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

It was for the most part a review. Just going through some topics I've already learned previously but have forgotten due to months without pracitce. Something I didn't know up until now, is that text-decoration is not a property affected by transition, so I had to use text-decoration-color instead.

    &__cta {
        @include text-button();

        color: $accent-color-1;   
        text-decoration: underline;     
        text-decoration-color: $accent-color-1;
        transition: all 200ms ease-in-out;
        transition-property: color, text-decoration-color;

        &:hover {
            color: rgba($color: $accent-color-1, $alpha: 0.7);
            text-decoration-color: transparent;
        }
    }

Useful resources

• text-decoration-color transition - This helped me solve the link underline transition problem.

Author

• Website - Juan Hamilton
• Frontend Mentor - @hamilton-i7