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

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: [https://github.com/GSD3v08/challenge1]
• Live Site URL: [https://GSD3v08.github.io/challenge1/]

My process

Built with

• VS Code
• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

For this challenge i started using flexbox , i was using float before but using flexbox to organize the elements inside a box was easier than using float. I tried to organize the properties by sections(positioning, box-model..) , I hope it is ok. this is my first challenge, but i think that i learned a little more how to use flexbox.

Continued development

Learn more about how to structure the content with html. Built more projects with Flexbox. Learn more about background property. to get used to working with git.

Author

• Frontend Mentor - @GSD3v08