Order summary card solution

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

A simple order summary card UI design developed keeping in mind the mobile first design approach.

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Live Site URL: order-summary-component

My process

Built with

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

What I learned

This is the first time that I have developed a UI template following the mobile first design approach.
Also developed responsive design using pure css with the help of media queries.

Continued development

Some responsive issue for some devices. Still working on making this design responsive for all the devices.

Useful resources

• CSS properties - Best place for explanation of all CSS properties available along with examples.

Author

• Frontend Mentor - @vaishak10
• Twitter - @noob_devv

Acknowledgments

This project is built as a part of front mentor challenge.