Frontend Mentor - Order summary card

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

The challenge

Users should be able to:

  • See hover states for interactive elements

Screenshot

Desktop preview

bossboygod github io_Order-Summary-Card_

Mobile Preview bossboygod github io_Order-Summary-Card_ (2)

Links

Built with

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

What I learned

  • Border top right and left Radius .dancinggirl img{ width: 460px; height: 200px; border-top-left-radius: 20px; border-top-right-radius: 20px; }

Continued development

  • Double Backgrounds
  • Padding
  • border radius
  • Box Shadow

Useful resources

-www.googlefonts.com -www.w3schools.com

Author

Acknowledgments

Thanks to me