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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

• 1
• 2

Links

• Solution URL: My open src
• Live Site URL: Live solution

My process

Built with

• Normal HTML5 markup
• CSS custom properties
• Flexbox
• Media queries
• React - JS library

What I learned

I learnt that you could add a linear-gradient to a background with a url image. Also i learnt how to add custom variables to a linear gradient. The down side about this is that if added an rgba or hsl variables, you can't add opacity to it on the same line.

• example:

.proud-of-this-css {
  background: url("image"), linear-gradient(var(--Very-pale-blue), var(--Pale-blue));
}

Continued development

• image resizing
• element positioning
• linear-gradient
• box-showing

Useful resources

• Example resource 1 - This helped me with the basics of box-shadowing.
• Example resource 2 - This gave me an insight on how to solve the variable issue in linear-gradient.

Author

• Website - Basma Tebe
• Frontend Mentor - @btebe