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
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Live Demo

My process

Built with

• Semantic HTML5 markup
• Flexbox
• SASS - SCSS Languaje

What I learned

In this exerecise, I was focused in less use of HTML class atribute, and using in CSS automatic selectors like *:nth-child():.

Continued development

I am focusing in learning and improve useful tricks on CSS, to make better look pages, animations, and impressive visual effects.

Useful resources

• A complete FlexBox Guide - This site is awesome for improving CSS skils, this link will give an entire guide about flexbox.
• W3School - Nothin more to tell you about this page, there are all about HTML and CSS.

Author

• Website - Javier López
• Frontend Mentor - @jglopezre

Acknowledgments

Please, try to understand CSS behavior. The way you chose to complete the challenge always is correct, but always exist a better way to make it possible.