Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

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

What I learned

I learnt CSS flex, using variables in CSS, improved my coding skills by building realistic project. Moreover, I learnt the diligence to follow the design (at least to a reasonable extent).

See sample code snippets from my solution below:

:root {
  /* Primary colors */
  --pale-blue: hsl(225, 100%, 94%);
  --bright-blue: hsl(245, 75%, 52%);
  /* Neutral colors */
  --very-pale-blue: hsl(225, 100%, 98%);
  --desaturated-blue: hsl(224, 23%, 55%);
  --dark-blue: hsl(223, 47%, 23%);
}

Continued development

It is my desire to further learn media queries. I have deliberately avoided it in this project.

Author

• Website - Chibuike Uzoechina
• Frontend Mentor - @Chike1990
• Twitter - @ChibuikeUzoech

Acknowledgments

Special thanks to my mentor, Dellyson (a frontend engineer) who guided me through this project, provided me resources to learn front end technologies, introduced me to Frontend Mentor, and lot more.