Responsive Landing Page

Hi there! 👋

Good effort on this challenge! 👍

About the background image, I would recommend setting the size as 100% and positioning it on the top. I notice that you override the background shorthand styling, specifically the background-size and the background-position which you don't need to do.

I used flexbox for the Annual Plan part or in this case, the order-item however, you can use grid if you want. I would recommend choosing either grid or flexbox over absolute positioning.

Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.

Also, the music icon is also a decorative image the same as the illustration. So, leave the alt empty.

On mobile view, to be specific 360px * 640px. the buttons are overflowing from the card element. It's because of the width that are specified on them.

That's it! I hope this information is useful! 😁

give the container the width you want, since the image is inside the container give it 100% width, it'll take the full width of the container . as for the annual plans and stuff you should use flexbox, its the best way!!

<div class = "plan container"> <div class = "leftside"> <img class = "music icon"> </img> <div class = "plan details"> <h2> Annual plan <h2> <p> $59.99</p> </div> </div> <div class= "right container"> <a href="#"> </a> </div> </div> now give the plan display flex,justify-content : space between ,just like that do the rest. i hope this helps!!!