Order Summary Card Challenge

Hi Tony, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

Feel free to choose one of the two!

The rest is great!

I hope it helps... 👍

Hi, well done on completing the challenge.

• Placing your 'Order Summary' as an H1 and 'Annual plan' as H2 will remove the accessibility warning issue you're receiving.

• The 'Change' link should not need or have the <p> wrapping the text inside the <a>. Remove the <p> or swap them around.

• To achieve the hover effects, add styling with :hover. eg: button:hover { add your style } Here's a link to MDN's docs that you may find helpful.

Hello, for background desktop : I did this and it worked: Html :

<div class="background-desktop"> <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="437"><path fill="#D6E1FF" fill-rule="evenodd" d="M0 349.974c218.558 116.035 460.05 116.035 724.475 0s502.933-116.035 715.525 0V0H0v349.974z"/></svg> </div> CSS : .background-desktop{ position: absolute; display: block; padding-top: 30%; width: 100vw; margin-top: 0;

} .background-desktop svg{ margin-top: 0; width: 100%; display: block; }