Responsive landing page whit FlexBox

Hey @Darwnsantx,

Congrats on solving the challenge! Your solution looks great, it's close to the design and has no semantic or accessibility issues.

I only have a couple of suggestion to improve your code further, but nothing too major:

• Your "Proceed to Payment" button is a button element with the type="submit". In this case, you can either remove the attribute or set it to type="button". Submit buttons only work inside form elements, which you don't have here. There's no harm in having it, it's just unnecessary.
• You could add cursor: pointer to the "Proceed to Payment" button to make it consistent with the other clickable elements. By default, button elements have the standard cursor, changing it to pointer is a common UI pattern and indicates that this element is interactive to the user.
• Your main illustration uses the img element, which is good. However, to prevent layout shifts while loading your page and its content, you could add a width and height attribute to the element and set it to the width and height of the SVG. It can still be resized via CSS, but by doing this you prevent the elements from jumping around. It's a minor issue and might only ever happen on extremely slow connections, but it's also a good practice when working with images in general.
• You've used a div with class="logo-music" for your music icon. While this works fine, I am a fan of not using HTML elements purely for styling purposes. HTML ideally is used to describe content and not styles. To improve this, you could either use an img element, or (my preferred way) set the background-image property directly to <div class="payment">. Using padding-left, you can then shift the content to the right until it looks like in the design.

I hope my tips helped you - if you have any questions, I am happy to answer them :-)