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
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Here

My process

Built with

• HTML5
• CSS
• Flexbox

What I learned

Main thing I have learned working on this project was adding custom fonts to projects. Biggest obstacle was to make this project look smoothly on my old Iphone 7 Plus. Spent few hours working on @media's with different width's, playing in Google Chrome Dev Tools. Had a first practise with HSL color palete.

Continued development

Biggest issue from this project at the moment is mobile responsivness, and fonts.

Useful resources

• Box shadow - This helped me with shadows :)
• Flex - This is an amazing article which helped me make a layout with Flex box.

Author

• GitHub - @Scarab911
• Frontend Mentor - @Scarab911
• LinkedIn - @Paulius-Bieliauskas

Acknowledgments

Thanks to my frontend mentor Rimantas Belovas for help with Fonts.