Order Summary Card

Table of contents

• Overview
  • Live Preview
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development
  • Acknowledgements

Overview

Live preview

👉 Click Here

Screenshot

My process

Built with

• Semantic HTML5 Markup
• CSS
• Flexbox
• Sass

What I learned

• How to think about the overall layout of a card
• Use flexbox in a real world project
• How to find, generate and use SVG in HTML
• Flexbox alignment methods including justify-content, align-items, align-self, flex-direction, and flex property
• How to use scaleY and multiple transition properties with different settings, to create an active effect
• How to use margin: auto with flexbox

Continued development

• Add dark mode feature

Acknowledgements

Challenge by Frontend Mentor Coded by me