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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

### The challenge
    To build out this order summary card component and get it looking as close to the design as possible.

Screenshot

image

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

Where to find everything

Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design.

The designs are in JPG static format. Using JPGs will mean that you'll need to use your best judgment for styles such as font-size, padding and margin.

You will find all the required assets in the /images folder. The assets are already optimized.

There is also a style-guide.md file containing the information you'll need, such as color palette and fonts.

What I learned

Writing these out a great way to reinforce your own knowledge. Very helpful to become master in our skills .