Frontend Mentor - Order Summary Card Solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Table of contents

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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/basic-card-component-using-sass-preprocessor-and-bem-naming-convention-029xmfY6X
• Live Site URL: https://kens-visuals.github.io/order-summary-component/

My process

Built with

• Semantic HTML5 markup
• SCSS variables
• CSS Flexbox

Continued development

For the next project with more complex layout, I want to experiment with mobile first approach.

Useful resources

• CSS Box-Shadow Generator - This helped me for generating box-shadows without going back and forth between the editor and the browser
• CSS-TRICKS - No matter if you are a junior or senior developer, CSS-TRICKS is always a good idea.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals