CSS Flexbox

Hay ! AditNovadianto Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding 👍!

Good work tackling this challenge and completing it, here are a few pointers:

• you should wrap the ".container" class in a main tag and not div, this would also eliminate the accessibility issues
• The illustration-hero image should be added as a background and not in the html
• Try to use more meaningful name for your classes, example: "lower-main-one" could be named "pay-button" and "lower-main-two" could be named "cancel-button" . Check this link to read about BEM which will help you structure your class names BEM
• Annual Plan should be wrapped in h2 since you can only have one h1 tag on a website. Check this link to read more about it h1 tag.
• Proceed to Payment and cancel order are buttons thus they should be wrapped in an anchor tag , you could also remove the div tags around them since they're not really needed
• you missed to add the background-color in your "main-content" class
• The position property is not needed in your "main-content" class, use flexbox instead
• be careful where you use max-width: max-content; i noticed you used it a lot instead of defining the width size
• You missed to add the hover effect for the buttons.. check this link to read more about hover hover effect

Hope these help, happy coding 😎

Great work AditNovadianto. You've done fantastic job

In order to fix your accessibility issue, you can add <main> tag to be the wrapper of your entire app.

Other than that, stay code and happy coding

Nice work. Keep it up