Mobile-first solution using CSS Flexbox

Really nice solution, well done!

I was going to ask about why change is an anchor tag but proceed and cancel are both buttons. That could be fine but possibly not. The key question is what would you expect to happen on click of each of these?

The only other point to raise is that adding really obvious and clear focus-visible styles to interactive elements is probably more important than active states, as it tells keyboard users where they are focused on the page. These styles should not be subtle and there is a new requirement coming in WCAG 2.2 that focus visible styles must include some kind of thick outline or border on all sides of the element. If there’s ever an enhancement you want to add to things like links and buttons - this is the important one

Hello there 👋. Good job on completing the challenge !

I have some feedback for you if you want to improve your code.

• You can add aria-hidden="true" to illustration-hero the element .

  Adding aria-hidden="true" to an image will prevent it from being read by screen readers. This is useful when the image is purely decorative and does not convey any information that needs to be communicated to the user.

  <img src="./images/illustration-hero.svg" alt aria-hidden="true">
  

  You can read more about this here 📘

• There is a debate about what is the best type of elements for this challenge, but in my opinion, the "change" element should be a button and not an anchor tag, because anchor tags are typically used to link to other pages or sections of a page, while buttons are used to trigger an action. In this case, the action is to change the plan of the order, so a button would be more appropriate.

I hope you find it useful! 😄

Happy coding!