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

Overview

I have built this component using tailwindcss to replicate, to the nearest pixel, the images in the design folder for the order summary component challenge by Frontend Mentors.

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshots

Screenshot mobile

Screenshot desktop

proceed to payment active state

cancel order active state

change plan active state

Links

• Solution URL: github repo
• Live Site URL: live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• Tailwindcss - css utility framework

What I learned

1. I consolidated my knowledge on tweaking the tailwindcss' config file to fit the requirements of my project.

2. I learned some additional syntax for Markdown as a structural language, and how to apply it to present reports in better visual representations.

Useful resources

• google.com/searchbar/LOL - Mhen querying google with billions of request helped me a lot.

• https://imageresizer.com/ - this helped me with resizing my mobile screenshot to the proper display size for inclusion in the README.

Author

• Website - deedev.netlify.app
• Frontend Mentor - @Deeokafor
• Twitter - @dee_okafor