HTML and SCSS Order Summary Component Page

👋Hi Temitope!

👍 Good job on completing your first challenge!

Regarding to your question: I used background-image on the body element for the background-pattern. In my opinion, it's much easier to control the size and switch the background-pattern between the desktop and mobile version, by using @media query. Also, since it's just a decorative image, so it's the best choice to use background-image.

Feedback:

• Development code is not a production code. I recommend to delete all commented code, since they were a part of code development code.
• For any decorative images, you should leave the alt="" and add aria-hidden="true" to make sure all screen readers ignore those images.
• For the file path, I recommend to use / forwardslash instead of \ backslash. Backslash is commonly use to escape characters.
• Always wrap text in a meaningful element like paragraph, heading, and etc. It's important for accessibility.

<div class="plan">
   <span>Annual Plan</span>
   $59.99/year
</div>

• Use rem or sometimes em instead of px. Using px won't allow the user to control the size of your page based on their needs.
• For the media query unit, I recommend to use em. It's simply because, **the only unit that performed consistently across all four browsers is em. ** You can check this blog post about "PX, EM or REM Media Queries?" to learn more.
• On my mobile view portrait mode (360px * 640px), the content inside the card is overflowing. The reason for that is because, you set the height of the card using vh. I would recommend to remove the width and the height property and use max-width and max-height instead.

That's it! Hopefully this is helpful!