Order summary card

Welcome!

To do this challenge, you need a basic understanding of HTML5 and CSS3.

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

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Requirements

• Fork this repo
• Clone this repo

Submission

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin main
  

• Create Pull Request so your TAs can check up your work.

Instructions

All your work will happen inside starter_code so first enter starter_code and start coding. Your task is to build out the projecto to the designs inside /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 /starter_code/src/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.

Built with

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

Useful resources

• Flexbox - This helped me to lear flexbox concepts.
• CSS3 properties - A list with common CSS3 properties.